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

960

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

rotate card
rotate card

Author:
Tanvir Hasan Bappy (Tanvir)

11 months ago

1.5k
Plant Game
Checking to see if it works

Author:
Becky Keyworth

6 months ago

631
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

Author:
M Junaid

4 months ago

416
Organization Hierarchy list

Author:
Anonymous

2 years ago

8.1k
3d card
the Best 3D card with tailwind css

Author:
irahoza daniel

5 months ago

304
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

9 months ago

1.3k
Responsive fullscreen youtube video

Author:
Anonymous

2 years ago

8.8k
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

7 months ago

1.2k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

8 months ago

1.3k
Responsive Light Mode Footer Component
This is a fully responsive and reusable light-mode footer component designed by ABNahid Agency. Built with a clean structure and optimized for modern web applications, this footer features essential sections, including About, Services, Contact, and Social Links. Ideal for personal portfolios, business websites, or startup platforms—plug and play in your React or HTML project.

Author:
Abdul Jabbar Al Nahid

3 months ago

398
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

Author:
SHARIFUL ISLAM

8 months ago

1.2k
Payment Cards

Author:
Shammi Nethupul

1 year ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components