Status Flow

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

Tailwind v3.4 72

<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

Indented Media Panels

Sherry Lynne

2 months ago

183
Invoice Generator
Invoice Generator

Tanvir Hasan Bappy (Tanvir)

10 months ago

497
htmlcss0

Anonymous

1 year ago

1.1k
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Lekhraj Ghimire

1 year ago

2.5k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Ayyamperumal S

1 year ago

3k
Reader AI – Your AI-Powered Knowledge & Thinking System
Reader AI helps you read, think, and remember better. Upload books, highlight insights, chat with AI, and build a personal knowledge system that evolves with you.

Ayyamperumal S

7 months ago

553
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

984
background animation
background animation

Anonymous

11 months ago

1.2k
delivery
It will help us get our stuff delivered to your home in a way that your ordered items are delivered to your home.

Nishimwe Jeanine

1 year ago

1.3k
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Rathanak Phan

1 year ago

1.3k
Table Skeleton
Data table skeleton built with Tailwind CSS for admin dashboards and SaaS applications.

JUGENDRA GANGWAR

3 weeks ago

20
Glassmorphism form

Sophia Baker

3 years ago

19.5k