status indicatior

status indicator navigation dashbord

This tailwind example is contributed by Rushikesh Latpate, on 03-Jan-2025. Component is made with Tailwind v3.4. It is responsive.

Other

Author Rushikesh Latpate

Tailwind v3.4 1.6k 3

Fork Fullscreen

<div class="flex items-center justify-center text-gray-800 p-2 bg-gray-50">
    
    <div class="grid lg:grid-cols-4 md:grid-cols-2 gap-6 w-full max-w-6xl">

<div class="flex items-center p-4 bg-white rounded">
            <div class="flex flex-shrink-0 items-center justify-center bg-gray-100 h-16 w-16 rounded">
               <font size="6"><i class="bi bi-envelope-arrow-down"></i></font>
            </div>
            <div class="flex-grow flex flex-col ml-4">
                <div class="flex items-center justify-between">
                    <span class="text-gray-500">New Email</span>
                </div>
                <span class="text-xl font-bold">00</span>
            </div>
        </div>

<div class="flex items-center p-4 bg-white rounded">
            <div class="flex flex-shrink-0 items-center justify-center bg-gray-100 h-16 w-16 rounded">
               <font size="6"><i class="bi bi-file-earmark-arrow-down"></i></font>
            </div>
            <div class="flex-grow flex flex-col ml-4">
                <div class="flex items-center justify-between">
                    <span class="text-gray-500">File Inbox</span>
                </div>
                <span class="text-xl font-bold">00</span>
            </div>
        </div>

<div class="flex items-center p-4 bg-white rounded">
            <div class="flex flex-shrink-0 items-center justify-center bg-gray-100 h-16 w-16 rounded">
               <font size="6"><i class="bi bi-calendar-check"></i></font>
            </div>
            <div class="flex-grow flex flex-col ml-4">
                <div class="flex items-center justify-between">
                    <span class="text-gray-500">New Task Assigned</span>
                </div>
                <span class="text-xl font-bold">00</span>
            </div>
        </div>

<div class="flex items-center p-4 bg-white rounded">
            <div class="flex flex-shrink-0 items-center justify-center bg-gray-100 h-16 w-16 rounded">
                <svg class="w-6 h-6 fill-current text-green-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                    fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="flex-grow flex flex-col ml-4">
                <span class="text-xl font-bold">140</span>
                <div class="flex items-center justify-between">
                    <span class="text-gray-500">Customers last 30 days</span>
                    <span class="text-green-500 text-sm font-semibold ml-2">+28.4%</span>
                </div>
            </div>
        </div>

</div>

</div>

</div>
        </div>
        </div>

Related Examples

Gaming UI Card, Form
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Ayyamperumal S

9 months ago

711
OTP Verification Page

JUGENDRA GANGWAR

2 weeks ago

20
Features Component

KULDEEP

1 year ago

1.5k
templete
templete

Uwera Dorcas

1 year ago

1.3k
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Abdul Baset Bappy

1 year ago

1.9k
profil_eleve.html

Anonymous

11 months ago

683
Play, Pause and Stop buttons

Lukas Müller

3 years ago

12.2k
Landi page template
con un cuerpo libre

Raul antonio de la cruz hernandez

9 months ago

917
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Samuel Dawson

3 years ago

22.1k
mailer
gmail style

МОЙДОЫР

11 months ago

774
Recipe Card
beautiful recipe component with image and step-by-step instructions

Anonymous

3 years ago

8.1k
Old Times Pomodorro
When the love of time management goes beyond the management of love over time. ~ Rogue agent

Hasan AlDoy (McDoy)

5 months ago

424