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

Midnight Lava Lamp
Inspired by Steam's old "Big Picture" ambiance. Based on anonymous/background-animation-2

Nick Girga

1 year ago

2k
Simple Payment Successfull Notification Page

Anonymous

1 year ago

2.4k
Visernic Brand Logo | Logo Vector
Official SVG logo of Visernic Limited—a digital solutions agency offering software development, IT consulting, cybersecurity, and digital marketing worldwide. This vector asset is fully scalable and optimized for fast web performance.

Visernic

1 month ago

131
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.4k
Typewriter effect
using javascript

Samuel Dawson

3 years ago

43.5k
Muhammad Umair Arshad - Frontend Developer Resume | React, TypeScript, Tailwind CSS
Professional resume of Muhammad Umair Arshad, a skilled Frontend Developer specializing in React, TypeScript, and Tailwind CSS. I build high-performance web applications with responsive UI design.

Muhammad Umair Arshad

1 year ago

1.8k
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Ayyamperumal S

6 months ago

459
AutoTrade
Browse thousands of quality used cars from trusted sellers. Great prices and easy financing options available

INGRIDE MUZIRANENGE

1 year ago

1.2k
Stacked Checkboxes

kishan pc

2 years ago

3.9k
3d element

Omer fils ELENGA

9 months ago

821
products, show, items
display images, card, products

Rushikesh Latpate

8 months ago

752
Organization Hierarchy list

Anonymous

3 years ago

9.8k