Home
Rushikesh Latpate
status indicatior

status indicatior

status indicator navigation dashbord

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

Other

Author Rushikesh Latpate

653

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

Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

1 month ago

46
Concert ticket

Author:
Elijah Davis

2 years ago

12.9k
Why Choose Us - Our Core Strengths
Discover what sets us apart with this engaging "Why Choose Us" section. Highlighting three key pillars—passion, honesty, and continuous improvement—this component features a bold, centered headline with a striking blue accent

Author:
Vikas Kushwah

2 months ago

318
Elegant Dock
Useful Tailwind classes for constructing a basic Dock (usually used on mobile).

Author:
Nick Girga

3 weeks ago

140
Question & Answer
questions and answers

Author:
Anonymous

1 year ago

8.3k
Contact Page

Author:
Sedat Kumcu

7 months ago

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

Author:
Abdul Baset Bappy

2 months ago

278
3d card
the Best 3D card with tailwind css

Author:
irahoza daniel

6 days ago

11
Coffee & Tea
Coffee: A brewed drink prepared from roasted seeds, called coffee beans, of the coffee plant. Tea: An agricultural product of the leaves, leaf buds, and internodes of various cultivars and sub-varieties of the Camellia sinensis plant, processed and cured using various methods.

Author:
Augustin

1 week ago

21
Upvote downvote buttons

Author:
Lucas Martinez

2 years ago

11.1k
ForK blocks animations
ForK blocks animations

Author:
Yor Rodriguez

4 months ago

934
Fake Medicine Detector
Fake Medicine Detector

Author:
Tanvir Hasan Bappy (Tanvir)

1 week ago

8

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components