Status Flow

This tailwind example is contributed by Anonymous, on 01-Sep-2026. Component is made with Tailwind v3.4.

Tailwind v3.4 62

<div class="min-h-screen bg-neutral-50 p-4 text-neutral-900 antialiased md:p-8">
  <div class="mx-auto max-w-6xl">

<div class="flex flex-wrap items-baseline justify-between gap-2">
      <h2 class="text-base font-semibold">Stand <span class="ml-2 font-mono font-normal text-neutral-500">PS-4187</span></h2>
      <span class="text-xs text-neutral-500">Der Fachbetrieb sieht hier nur: Behälter unterwegs, Baugruppen in Vorbereitung</span>
    </div>

<div class="rounded-xl border border-neutral-200/80 bg-neutral-100/60 p-3">
          <div class="mb-3 flex items-center gap-3">
            <span class="rounded-md border border-neutral-300 bg-white px-2 py-0.5 text-[11px] font-semibold">Behältersendung</span>
            <span class="text-[11px] text-neutral-500">Spedition Lütkemeyer, 3 Paletten Sperrgut, Positionen 1–2</span>
            <span class="ml-auto flex items-center gap-2 text-[11px] text-neutral-500">
              <span class="flex h-1.5 w-24 overflow-hidden rounded-full bg-neutral-200"><span class="w-[60%] bg-neutral-900"></span></span>
              3 von 5 Schritten
            </span>
          </div>

<div class="relative w-56 rounded-lg border border-neutral-200 bg-white shadow-sm">
              <span class="absolute -right-1 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full border border-neutral-400 bg-white"></span>
              <div class="px-3 pt-2.5">
                <p class="text-sm font-semibold leading-5">Termin vereinbart</p>
                <div class="mt-1 flex items-center gap-1.5 text-[11px] text-neutral-500">
                  <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 3h3l2 5-2 1a9 9 0 0 0 4 4l1-2 5 2v3a1 1 0 0 1-1 1A13 13 0 0 1 3 4a1 1 0 0 1 1-1z"/></svg>
                  <span>Innendienst · Telefonat</span>
                  <a href="#" class="ml-auto inline-flex items-center gap-0.5 hover:text-neutral-900">Details<svg class="h-3 w-3" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7 13 13 7M8 7h5v5"/></svg></a>
                </div>
              </div>
              <div class="mx-3 mt-2 grid grid-cols-3 gap-2 border-t border-neutral-100 pb-2.5 pt-2">
                <div><p class="text-[10px] text-neutral-500">Liefertermin</p><p class="text-xs font-semibold tabular-nums">Do 03.09.</p><p class="text-[10px] text-neutral-500">8–12 Uhr</p></div>
                <div><p class="text-[10px] text-neutral-500">Vereinbart</p><p class="text-xs font-semibold tabular-nums">24.08.</p><p class="text-[10px] text-neutral-500">S. Koch</p></div>
                <div><p class="text-[10px] text-neutral-500">Mit</p><p class="text-xs font-semibold">D. Brandt</p><p class="text-[10px] text-neutral-500">Bauleitung</p></div>
              </div>
              <div class="flex items-center justify-between rounded-b-lg border-t border-neutral-100 bg-neutral-50 px-3 py-1.5 text-[10px] text-neutral-500">
                <span>Vorlauf 10 Tage</span>
                <span class="rounded bg-neutral-900 px-1.5 py-0.5 font-medium text-white">Erledigt</span>
              </div>
            </div>

<div class="relative h-0 w-20 border-t-2 border-dotted border-[#980073]"><span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full bg-[#980073] px-2 py-0.5 text-[10px] font-medium leading-4 text-white">3 Tage</span></div>

<div id="sn" class="relative w-60 rounded-lg border border-[#980073] bg-white shadow-sm ring-2 ring-[#980073]/15">
              <span class="absolute -left-1 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full border border-[#980073] bg-white"></span>
              <span class="absolute -right-1 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full border border-[#980073] bg-white"></span>
              <div class="px-3 pt-2.5">
                <p class="text-sm font-semibold leading-5 text-[#980073]">Seriennummern</p>
                <div class="mt-1 flex items-center gap-1.5 text-[11px] text-neutral-500">
                  <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"><path d="M4 5v10M7 5v10M10 5v10M13 5v10M16 5v10"/></svg>
                  <span>Fertigungspartner · je Behälter</span>
                  <a href="#" class="ml-auto inline-flex items-center gap-0.5 hover:text-neutral-900">Details<svg class="h-3 w-3" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7 13 13 7M8 7h5v5"/></svg></a>
                </div>
              </div>
              <div class="mx-3 mt-2 border-t border-neutral-100 pt-2">
                <div class="flex items-center justify-between text-[10px] text-neutral-500"><span>Gemeldet</span><span class="font-semibold tabular-nums text-neutral-900">2 von 3 · 67 %</span></div>
                <div class="mt-1 flex h-1.5 overflow-hidden rounded-full bg-neutral-200"><span class="w-[67%] bg-[#980073]"></span></div>
                <ul class="mt-2 space-y-1 pb-2.5 text-[11px]">
                  <li class="flex items-center justify-between"><span class="font-mono">1000-26-04471</span><span class="flex items-center gap-1 text-neutral-500"><svg class="h-3 w-3" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 10 4 4 8-8"/></svg>27.08.</span></li>
                  <li class="flex items-center justify-between"><span class="font-mono">1000-26-04472</span><span class="flex items-center gap-1 text-neutral-500"><svg class="h-3 w-3" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 10 4 4 8-8"/></svg>27.08.</span></li>
                  <li class="flex items-center justify-between"><span class="text-neutral-500">rSTOR C 500</span><span class="font-medium text-[#980073]">fehlt</span></li>
                </ul>
              </div>
              <div class="flex items-center justify-between rounded-b-lg border-t border-neutral-100 bg-neutral-50 px-3 py-1.5 text-[10px] text-neutral-500">
                <span>Sendung ist schon unterwegs</span>
                <a href="#" class="rounded bg-[#980073] px-1.5 py-0.5 font-medium text-white hover:bg-[#7d005e]">1 Nummer melden</a>
              </div>
            </div>

<div class="relative h-0 w-20 border-t-2 border-dotted border-neutral-400"><span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full bg-neutral-900 px-2 py-0.5 text-[10px] font-medium leading-4 text-white">4 Tage</span></div>

<div class="relative w-56 rounded-lg border border-neutral-200 bg-white shadow-sm">
              <span class="absolute -left-1 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full border border-neutral-400 bg-white"></span>
              <span class="absolute -right-1 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full border border-neutral-400 bg-white"></span>
              <div class="px-3 pt-2.5">
                <p class="text-sm font-semibold leading-5">Sendungsnummer</p>
                <div class="mt-1 flex items-center gap-1.5 text-[11px] text-neutral-500">
                  <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h6l8 8-6 6-8-8z"/><circle cx="7" cy="7" r="1"/></svg>
                  <span>Fertigungspartner · Spedition</span>
                  <a href="#" class="ml-auto inline-flex items-center gap-0.5 hover:text-neutral-900">Details<svg class="h-3 w-3" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7 13 13 7M8 7h5v5"/></svg></a>
                </div>
              </div>
              <div class="mx-3 mt-2 border-t border-neutral-100 pt-2 pb-2.5">
                <div class="flex items-center justify-between gap-2 rounded-md border border-neutral-200 bg-neutral-50 px-2 py-1.5">
                  <span class="select-all font-mono text-sm tracking-wide tabular-nums">40 3312 9975 20</span>
                  <button type="button" class="rounded border border-neutral-300 bg-white p-1 text-neutral-600 hover:bg-neutral-100" aria-label="Kopieren"><svg class="h-3 w-3" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="7" width="9" height="9" rx="1.5"/><path d="M4 13V5a1 1 0 0 1 1-1h8"/></svg></button>
                </div>
                <p class="mt-1.5 text-[10px] text-neutral-500">Kein Direktlink — auf luetkemeyer-logistik.de eintippen</p>
                <div class="mt-2 grid grid-cols-2 gap-2">
                  <div><p class="text-[10px] text-neutral-500">Auftrag Frachtführer</p><p class="font-mono text-xs font-semibold">LK-26-118842</p></div>
                  <div><p class="text-[10px] text-neutral-500">Eingetragen</p><p class="text-xs font-semibold tabular-nums">31.08.</p><p class="text-[10px] text-neutral-500">M. Aydin</p></div>
                </div>
              </div>
              <div class="flex items-center justify-between rounded-b-lg border-t border-neutral-100 bg-neutral-50 px-3 py-1.5 text-[10px] text-neutral-500">
                <span>Spedition Lütkemeyer</span>
                <span class="rounded bg-neutral-900 px-1.5 py-0.5 font-medium text-white">Erledigt</span>
              </div>
            </div>

<div class="relative h-0 w-24 border-t-2 border-dotted border-neutral-400"><span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full bg-neutral-900 px-2 py-0.5 text-[10px] font-medium leading-4 text-white">31.08., 14:20</span></div>

<div class="relative w-56 rounded-lg border border-neutral-200 bg-white shadow-sm">
              <span class="absolute -left-1 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full border border-neutral-400 bg-white"></span>
              <span class="absolute -right-1 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full border border-neutral-400 bg-white"></span>
              <div class="px-3 pt-2.5">
                <p class="text-sm font-semibold leading-5">Unterwegs</p>
                <div class="mt-1 flex items-center gap-1.5 text-[11px] text-neutral-500">
                  <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2 5h10v8H2zM12 8h3l3 3v2h-6z"/><circle cx="5" cy="15" r="1.5"/><circle cx="14" cy="15" r="1.5"/></svg>
                  <span>Spedition · Sperrgut</span>
                  <a href="#" class="ml-auto inline-flex items-center gap-0.5 hover:text-neutral-900">Details<svg class="h-3 w-3" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7 13 13 7M8 7h5v5"/></svg></a>
                </div>
              </div>
              <div class="mx-3 mt-2 grid grid-cols-3 gap-2 border-t border-neutral-100 pb-2.5 pt-2">
                <div><p class="text-[10px] text-neutral-500">Abgeholt</p><p class="text-xs font-semibold tabular-nums">31.08.</p><p class="text-[10px] text-neutral-500">14:20 Uhr</p></div>
                <div><p class="text-[10px] text-neutral-500">Laufzeit</p><p class="text-xs font-semibold">3 Werktage</p><p class="text-[10px] text-neutral-500">Bielefeld–Kreuztal</p></div>
                <div><p class="text-[10px] text-neutral-500">Ankunft</p><p class="text-xs font-semibold tabular-nums">Do 03.09.</p><p class="text-[10px] text-neutral-500">avisiert</p></div>
              </div>
              <div class="flex items-center justify-between rounded-b-lg border-t border-neutral-100 bg-neutral-50 px-3 py-1.5 text-[10px] text-neutral-500">
                <span>Tag 2 von 3</span>
                <span class="rounded border border-neutral-300 bg-white px-1.5 py-0.5 font-medium text-neutral-700">Läuft</span>
              </div>
            </div>

<div class="relative h-0 w-20 border-t-2 border-dotted border-neutral-300"><span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full border border-neutral-300 bg-white px-2 py-0.5 text-[10px] font-medium leading-4 text-neutral-500">in 2 Tagen</span></div>

<div class="relative w-56 rounded-lg border border-dashed border-neutral-300 bg-white/80">
              <span class="absolute -left-1 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full border border-neutral-300 bg-white"></span>
              <div class="px-3 pt-2.5">
                <p class="text-sm font-semibold leading-5 text-neutral-500">Zugestellt</p>
                <div class="mt-1 flex items-center gap-1.5 text-[11px] text-neutral-400">
                  <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"/><path d="m6.5 10 2.5 2.5 4.5-5"/></svg>
                  <span>Baustelle · Annahme</span>
                </div>
              </div>
              <div class="mx-3 mt-2 grid grid-cols-2 gap-2 border-t border-neutral-100 pb-2.5 pt-2 text-neutral-500">
                <div><p class="text-[10px]">Annahme</p><p class="text-xs font-semibold">D. Brandt</p><p class="font-mono text-[10px]">0171 4 88 32 91</p></div>
                <div><p class="text-[10px]">Zufahrt</p><p class="text-xs font-semibold">Ringstraße</p><p class="text-[10px]">Hebebühne nötig</p></div>
              </div>
              <div class="flex items-center justify-between rounded-b-lg border-t border-neutral-100 px-3 py-1.5 text-[10px] text-neutral-400">
                <span>Quittung durch Baustelle</span>
                <span class="rounded border border-dashed border-neutral-300 px-1.5 py-0.5 font-medium">Ausstehend</span>
              </div>
            </div>

</div>
        </div>

<div class="rounded-xl border border-neutral-200/80 bg-neutral-100/60 p-3">
          <div class="mb-3 flex items-center gap-3">
            <span class="rounded-md border border-neutral-300 bg-white px-2 py-0.5 text-[11px] font-semibold">Baugruppensendung</span>
            <span class="text-[11px] text-neutral-500">DHL Paket, 1 Paket, Positionen 3–5</span>
            <span class="ml-auto flex items-center gap-2 text-[11px] text-neutral-500">
              <span class="flex h-1.5 w-24 overflow-hidden rounded-full bg-neutral-200"><span class="w-[25%] bg-neutral-900"></span></span>
              1 von 4 Schritten
            </span>
          </div>

<div class="relative w-56 rounded-lg border border-neutral-200 bg-white shadow-sm">
              <span class="absolute -right-1 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full border border-neutral-400 bg-white"></span>
              <div class="px-3 pt-2.5">
                <p class="text-sm font-semibold leading-5">Kommissioniert</p>
                <div class="mt-1 flex items-center gap-1.5 text-[11px] text-neutral-500">
                  <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7l7-4 7 4v7l-7 4-7-4zM3 7l7 4 7-4M10 11v7"/></svg>
                  <span>Lager · 3 Positionen</span>
                  <a href="#" class="ml-auto inline-flex items-center gap-0.5 hover:text-neutral-900">Details<svg class="h-3 w-3" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7 13 13 7M8 7h5v5"/></svg></a>
                </div>
              </div>
              <ul class="mx-3 mt-2 space-y-1 border-t border-neutral-100 pb-2.5 pt-2 text-[11px]">
                <li class="flex items-center justify-between"><span>Ladegruppe LG 25</span><span class="flex items-center gap-1 text-neutral-500"><svg class="h-3 w-3" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 10 4 4 8-8"/></svg>1 Stk.</span></li>
                <li class="flex items-center justify-between"><span>Regelung RC pro</span><span class="flex items-center gap-1 text-neutral-500"><svg class="h-3 w-3" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 10 4 4 8-8"/></svg>1 Stk.</span></li>
                <li class="flex items-center justify-between"><span>Sicherheitsgruppe SG 1</span><span class="flex items-center gap-1 text-neutral-500"><svg class="h-3 w-3" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 10 4 4 8-8"/></svg>1 Stk.</span></li>
              </ul>
              <div class="flex items-center justify-between rounded-b-lg border-t border-neutral-100 bg-neutral-50 px-3 py-1.5 text-[10px] text-neutral-500">
                <span>31.08., 09:05 · Lager</span>
                <span class="rounded bg-neutral-900 px-1.5 py-0.5 font-medium text-white">Erledigt</span>
              </div>
            </div>

<div id="paket" class="relative w-60 rounded-lg border border-[#980073] bg-white shadow-sm ring-2 ring-[#980073]/15">
              <span class="absolute -left-1 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full border border-[#980073] bg-white"></span>
              <span class="absolute -right-1 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full border border-[#980073] bg-white"></span>
              <div class="px-3 pt-2.5">
                <p class="text-sm font-semibold leading-5 text-[#980073]">Paketnummer</p>
                <div class="mt-1 flex items-center gap-1.5 text-[11px] text-neutral-500">
                  <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="14" height="11" rx="1.5"/><path d="M3 9h14M8 6V4h4v2"/></svg>
                  <span>Innendienst · DHL-Label</span>
                  <a href="#" class="ml-auto inline-flex items-center gap-0.5 hover:text-neutral-900">Details<svg class="h-3 w-3" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M7 13 13 7M8 7h5v5"/></svg></a>
                </div>
              </div>
              <div class="mx-3 mt-2 border-t border-neutral-100 pt-2 pb-2.5">
                <div class="flex gap-1.5">
                  <label class="flex-1"><span class="sr-only">Paketnummer</span><input type="text" value="" placeholder="0034 0434 …" class="w-full rounded-md border border-neutral-300 px-2 py-1.5 font-mono text-xs placeholder:text-neutral-400 focus:border-[#980073] focus:outline-none focus:ring-1 focus:ring-[#980073]"></label>
                  <button type="button" class="rounded-md bg-[#980073] px-2.5 py-1.5 text-xs font-medium text-white hover:bg-[#7d005e]">Eintragen</button>
                </div>
                <div class="mt-2 grid grid-cols-2 gap-2">
                  <div><p class="text-[10px] text-neutral-500">Abholung</p><p class="text-xs font-semibold">heute</p><p class="text-[10px] text-neutral-500">nachmittags</p></div>
                  <div><p class="text-[10px] text-neutral-500">Verfolgung</p><p class="text-xs font-semibold">Direktlink</p><p class="text-[10px] text-neutral-500">entsteht aus der Nummer</p></div>
                </div>
              </div>
              <div class="flex items-center justify-between rounded-b-lg border-t border-neutral-100 bg-neutral-50 px-3 py-1.5 text-[10px] text-neutral-500">
                <span>Fachbetrieb sieht: in Vorbereitung</span>
                <span class="rounded bg-[#980073] px-1.5 py-0.5 font-medium text-white">Offen</span>
              </div>
            </div>

<div class="relative w-56 rounded-lg border border-dashed border-neutral-300 bg-white/80">
              <span class="absolute -left-1 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full border border-neutral-300 bg-white"></span>
              <span class="absolute -right-1 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full border border-neutral-300 bg-white"></span>
              <div class="px-3 pt-2.5">
                <p class="text-sm font-semibold leading-5 text-neutral-500">Unterwegs</p>
                <div class="mt-1 flex items-center gap-1.5 text-[11px] text-neutral-400">
                  <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M2 5h10v8H2zM12 8h3l3 3v2h-6z"/><circle cx="5" cy="15" r="1.5"/><circle cx="14" cy="15" r="1.5"/></svg>
                  <span>DHL Paket</span>
                </div>
              </div>
              <div class="mx-3 mt-2 grid grid-cols-2 gap-2 border-t border-neutral-100 pb-2.5 pt-2 text-neutral-500">
                <div><p class="text-[10px]">Laufzeit</p><p class="text-xs font-semibold">1–2 Werktage</p><p class="text-[10px]">Standardpaket</p></div>
                <div><p class="text-[10px]">Verfolgung</p><p class="text-xs font-semibold">Link</p><p class="text-[10px]">auch für Fachbetrieb</p></div>
              </div>
              <div class="flex items-center justify-between rounded-b-lg border-t border-neutral-100 px-3 py-1.5 text-[10px] text-neutral-400">
                <span>Status von DHL</span>
                <span class="rounded border border-dashed border-neutral-300 px-1.5 py-0.5 font-medium">Ausstehend</span>
              </div>
            </div>

<div class="relative h-0 w-20 border-t-2 border-dotted border-neutral-300"></div>

<div class="relative w-56 rounded-lg border border-dashed border-neutral-300 bg-white/80">
              <span class="absolute -left-1 top-1/2 h-2 w-2 -translate-y-1/2 rounded-full border border-neutral-300 bg-white"></span>
              <div class="px-3 pt-2.5">
                <p class="text-sm font-semibold leading-5 text-neutral-500">Zugestellt</p>
                <div class="mt-1 flex items-center gap-1.5 text-[11px] text-neutral-400">
                  <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"/><path d="m6.5 10 2.5 2.5 4.5-5"/></svg>
                  <span>Paketdienst · ohne Avis</span>
                </div>
              </div>
              <div class="mx-3 mt-2 grid grid-cols-2 gap-2 border-t border-neutral-100 pb-2.5 pt-2 text-neutral-500">
                <div><p class="text-[10px]">Empfänger</p><p class="text-xs font-semibold">Baustelle</p><p class="text-[10px]">Lindenstraße 14</p></div>
                <div><p class="text-[10px]">Erwartet</p><p class="text-xs font-semibold">Do/Fr</p><p class="text-[10px]">je nach Abholung</p></div>
              </div>
              <div class="flex items-center justify-between rounded-b-lg border-t border-neutral-100 px-3 py-1.5 text-[10px] text-neutral-400">
                <span>Quittung von DHL</span>
                <span class="rounded border border-dashed border-neutral-300 px-1.5 py-0.5 font-medium">Ausstehend</span>
              </div>
            </div>

</div>
        </div>

</div>
    </div>
  </div>
</div>

Related Examples

Your upside-down text

Isabella Kowalski

3 years ago

13.6k
chat bar
live chat

gidy

1 year ago

2.2k
Visernic Profile

MD Mostafa Niloy

10 months ago

1.2k
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Nick Girga

1 year ago

1.8k
اصقل جسدك صفحة Landing

Hasan AlDoy (McDoy)

4 months ago

191
Customer support chatbox
Floating chatbox

gmer33

3 years ago

12.2k
Table CRUD
CRUD TABLE DESIGN

Abhiraj

1 year ago

5k
Review popup form with toggle and stars
Review popup form with toggle and stars

Ayman Reifoun

1 year ago

1.3k
Clean Component Sharing Hub (Landing State)
A minimalist, "before-talking" landing screen designed for a code or design component sharing platform. Features a welcoming header, three distinct action cards for sharing/browsing/exporting code, and a floating input bar, all styled with soft shadows and ample white space mimicking modern design tools.

Hamza Atig

8 months ago

722
magic card
by salvator

Baraka Salvator

1 year ago

1.4k
About Us Component

KULDEEP

1 year ago

2k
Soft-Modern Dark Pricing
A sophisticated, highly rounded pricing component inspired by modern fintech interfaces. It avoids harsh lines in favor of deep "zinc" tones and subtle borders (border-white/5). The center card pops using a high-contrast white button against the dark theme, guiding user focus naturally without using aggressive gradients.

Hamza Atig

8 months ago

737