Admin portal landing page

This tailwind example is contributed by Srreyashi DeyChakii, on 26-May-2024. Component is made with Tailwind v3.4. It is responsive.

Header Table

Author Srreyashi DeyChakii

Tailwind v3.4 4.6k 6

Fork Fullscreen

<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white">
            Admin Portal

</h1>
        <p class="text-gray-300">
           Application update and Status

</p>

<div class="shadow-lg rounded-lg overflow-hidden mx-3 md:mx-4">
    <table class="w-full table-fixed">
        <thead>
            <tr class="bg-gray-100">
                <th class="w-1/4 py-4 px-6 text-left text-gray-600 font-bold uppercase">Source</th>
                <th class="w-1/4 py-4 px-6 text-left text-gray-600 font-bold uppercase">Toggle</th>
                <th class="w-1/4 py-4 px-6 text-left text-gray-600 font-bold uppercase">URL</th>
                <th class="w-1/4 py-4 px-6 text-left text-gray-600 font-bold uppercase">Status</th>
            </tr>
        </thead>
        <tbody class="bg-white">
            <tr>
                <td class="py-4 px-6 border-b border-gray-200">box</td>
                <td class="py-4 px-6 border-b border-gray-200 truncate">On</td>
                <td class="py-4 px-6 border-b border-gray-200">www.box.net</td>
                <td class="py-4 px-6 border-b border-gray-200">
                    <span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span>
                </td>
            </tr>
            <tr>
                <td class="py-4 px-6 border-b border-gray-200">FR</td>
                <td class="py-4 px-6 border-b border-gray-200 truncate">Off</td>
                <td class="py-4 px-6 border-b border-gray-200">www.frr.com</td>
                <td class="py-4 px-6 border-b border-gray-200">
                    <span class="bg-red-500 text-white py-1 px-2 rounded-full text-xs">Inactive</span>
                </td>
            </tr>
            <tr>

Related Examples

Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

5.2k
Collapsible Sidebar Menu

Rajesh Maheshwari

1 year ago

3.6k
Tailwind Header
responsive mobile menu with a smooth transition

Anonymous

1 year ago

4.4k
3D Animation Studio
3D animation is the process of creating three-dimensional products, objects, backgrounds, etc., and setting them in motion within a digital environment. It's commonly used for the web, social media marketing, product design, film, cartoons, commercials, and video games.

Nicole Shalom

1 year ago

2.3k
SaaS Dashboard Navbar with Search, Notifications & Slide-In Mobile Menu
SaaS dashboard navbar built with pure HTML and Tailwind CSS.

JUGENDRA GANGWAR

4 months ago

284
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k
Table

Anonymous

2 years ago

7.8k
Reader AI – Your AI-Powered Knowledge & Thinking System
Reader AI helps you read, think, and remember better. Upload books, highlight insights, chat with AI, and build a personal knowledge system that evolves with you.

Ayyamperumal S

7 months ago

556
Advanced table

Noob

3 years ago

24.1k
Nutrition Facts table example

Kofi Osei

3 years ago

13.2k
Table for user management
It shows a table of users with their names, email, and role. The table also has two buttons for each row: one to save changes made to the user's details and another to delete the user.

I.P. Leroy

3 years ago

20.1k
Stripped table with tailwind css

Task Master

3 years ago

17k