Status Flow

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

Tailwind v3.4 70

<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

Updated customer details page
Customer details page

Olivia Smith

2 years ago

4.3k
Show user details

Lucas Martinez

3 years ago

26.3k
Swiss-Grid Dark Pricing
A brutally minimalist pricing section that relies on strict grid architecture and typographic hierarchy instead of decorative elements. Features responsive border collapsing, monospaced technical accents, and high-performance CSS-only hover states. Designed for high-end SaaS, dev-tools, or agency portfolios that prioritize data clarity and structural rhythm.

Hamza Atig

9 months ago

827
Modern Architecture Blog & News Grid UI Layout
A clean, minimal, and fully responsive Blog/News grid layout built with Tailwind CSS. Features a 2-column article grid with fixed title alignment, clean pagination, and a sticky sidebar with categories & CTA widget. Perfect for architectural firms, magazine portals, and CMS integrations.

Alief Malik

2 months ago

107
image

pablitodgb

1 year ago

880
coffee
a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

Augustin

1 year ago

1.5k
Creative Bento Gallery
A modern bento-style gallery combining differently sized image cards in a structured and visually engaging layout.

JUGENDRA GANGWAR

2 months ago

307
InfoWindow Mapy rzemieślników Desktop

Antoni Wierzba

4 months ago

185
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Ameth Galarcio

1 year ago

2.9k
blog component
good blog

Uwera Dorcas

1 year ago

1.4k
Custom Audio Player
🎧 Custom Audio Player (HTML, Tailwind CSS & Alpine.js) A modern, responsive custom audio player built with Tailwind CSS and Alpine.js, designed for a smooth user experience and elegant visuals in both light and dark mode. ✨ Features: 🎵 Play, pause, and mute/unmute controls 📈 Interactive progress bar with seek functionality 🔊 Dynamic volume slider with live preview 🖼️ Album art and track details display ⌨️ Keyboard support — toggle play/pause with the spacebar 🌓 Fully responsive and dark-mode compatible This player uses minimal JavaScript, relying on Alpine.js for reactivity, and can be easily customized or integrated into any web project. Perfect for portfolios, podcasts, or music web apps.

wavy kits

1 year ago

1.5k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Hamza Atig

1 year ago

980