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

958

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

Lots of button examples
tailwind button examples

Author:
QQ-VVN

5 months ago

344
Homepage event

Author:
Anonymous

3 months ago

335
Payment success page example

Author:
Anonymous

4 months ago

670
responsive home page
the best home page

Author:
irahoza daniel

4 months ago

764
Forgot Password Form
1. Color Updates: 1. Changed background to gradient `from-indigo-800 to-blue-900` 2. Updated text colors to match the new theme 3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900` 4. Updated focus rings to use indigo colors 5. Made footer links white with indigo hover states 2. Enhanced Styling: 1. Added gradient background 2. Improved border radius to `rounded-xl` 3. Enhanced shadow with `shadow-2xl` 4. Added hover scale effects 5. Added fade-in animation 3. Dark Mode Improvements: 1. Enhanced dark mode colors 2. Added system preference detection 3. Improved dark mode contrast 4. Updated dark mode focus rings 4. Added Functionality: 1. Added form validation 2. Added success message 3. Added form reset after submission 4. Added smooth transitions 5. Accessibility Improvements: 1. Maintained ARIA attributes 2. Enhanced focus states 3. Improved color contrast 4. Added transition animations for better UX 6. Added Interactions: 1. Hover effects on all interactive elements 2. Scale animation on card and button hover 3. Smooth color transitions 4. Form validation feedback The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

Author:
nejaa badr

11 months ago

1.1k
Interactive Game Flip Card – Pure HTML & CSS Component
An elegant and interactive game info flip card built purely with HTML and CSS. This component flips smoothly on hover to reveal detailed game information on the back, providing a modern and engaging way to showcase your games without using JavaScript. Perfect for gaming websites wanting sleek animations and clean design.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

529
Product hunt showcase

Author:
Lukas Müller

2 years ago

12.1k
Heading Style

Author:
KULDEEP

4 months ago

345
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

8 months ago

1.4k
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

3 months ago

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

Author:
Anonymous

2 years ago

7.1k
templete
templete

Author:
Uwera Dorcas

4 months ago

431

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components