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.4k 3

<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>

Related Examples

Features list with heading

Leon Bachmann

3 years ago

12.1k
Bullet points list
for sections like "Why Choose Us"

Orson Kincaid

2 years ago

2.4k
Basic list

Sophia Baker

3 years ago

10.9k
List with border

Samuel Dawson

3 years ago

11.6k
Dropdown menu list
Dropdown menu list without using javascript. This example takes advantage of native HTML's <details> and <summary> tags

Prajwal Hallale

3 years ago

20.5k
List of links

Prajwal Hallale

3 years ago

10.4k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Abdul Baset Bappy

1 year ago

2.6k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

5 months ago

475
List with highlighted text

Amit Pachange

3 years ago

10.5k
Item List

Amit Pachange

4 years ago

10.9k
Table of content
Show list of Table of content

Anonymous

2 years ago

6.8k
Basic list

Leon Bachmann

3 years ago

10.6k