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

757

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

Snake Game tailwind
snake game

Author:
QQ-VVN

2 months ago

324
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

5 months ago

1.8k
Life Tree
by salvator

Author:
Baraka Salvator

2 months ago

205
profile
user profile

Author:
gidy

2 months ago

124
Customer support chatbox
Floating chatbox

Author:
gmer33

2 years ago

11.1k
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Author:
Abdul Baset Bappy

4 months ago

579
Apple Dock Navigation Bar

Author:
Cristian

6 months ago

981
Hero

Author:
ORGIN_DREAMS

2 months ago

397
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

479
Sign up
sign up page

Author:
gidy

2 months ago

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

2 months ago

330
Payment form

Author:
ORGIN_DREAMS

2 months ago

146

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components