Order Delivered List

This tailwind example is contributed by ABDO-SY, on 21-Apr-2025. Component is made with Tailwind v3.4.

Tailwind v3.4 1.2k 2

<div class="rounded-xl max-w-[350px] bg-[#E15C44] p-6">
  <div class="mb-7 flex justify-between items-center">
    <h2 class=" text-white text-sm font-medium font-['Poppins'] leading-tight">Order Delivered</h2>
    <span class=" text-white text-xl font-semibold font-['Poppins'] leading-7">932</span>
  </div>
  <div class="flex justify-between border-b border-white py-2">
    <span class=" text-white text-xs font-normal font-['Poppins'] leading-none">Indonesia Food (27%)</span><span class=" text-white text-xs font-semibold font-['Poppins'] leading-tight">763</span>
  </div>
  <div class="flex justify-between border-b border-white py-2">
    <span class=" text-white text-xs font-normal font-['Poppins'] leading-none">Indonesia Food (27%)</span><span class=" text-white text-xs font-semibold font-['Poppins'] leading-tight">763</span>
  </div>
  <div class="flex justify-between border-b border-white py-2">
    <span class=" text-white text-xs font-normal font-['Poppins'] leading-none">Indonesia Food (27%)</span><span class=" text-white text-xs font-semibold font-['Poppins'] leading-tight">763</span>
  </div>
  <div class="flex justify-between border-b border-white py-2">
    <span class=" text-white text-xs font-normal font-['Poppins'] leading-none">Indonesia Food (27%)</span><span class=" text-white text-xs font-semibold font-['Poppins'] leading-tight">763</span>
  </div>
  <div class="flex justify-between border-b border-white py-2">
    <span class=" text-white text-xs font-normal font-['Poppins'] leading-none">Indonesia Food (27%)</span><span class=" text-white text-xs font-semibold font-['Poppins'] leading-tight">763</span>
  </div>
  <div class="flex justify-between border-b border-white py-2">
    <span class=" text-white text-xs font-normal font-['Poppins'] leading-none">Indonesia Food (27%)</span><span class=" text-white text-xs font-semibold font-['Poppins'] leading-tight">763</span>
  </div>
</div>