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

Hero Section
A 2 column responsive hero section

Emdadul Islam

2 years ago

3.4k
vanessa
nice

Umutoniwase Yvette

1 year ago

1.1k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Christian Ahlin

1 year ago

3k
Header with logo, menu and buttons
Header with logo, menu and buttons. If you want to toggle the visibility of the mobile menu when clicking on the hamburger menu icon you can achieve this with JavaScript by adding and removing a class that controls the visibility of the mobile menu

Mike Varen

2 years ago

4.9k
tradition music
by salvator

Baraka Salvator

1 year ago

1.5k
Active Beauty Main Page

Maxim

1 year ago

1.8k
Responsive Class List Table using Tailwind CSS
A responsive and customizable class list table built with Tailwind CSS, featuring actions for editing and deleting classes.

Anum Shahana

2 years ago

2.8k
Tailwind Pricing Section 2
Fully Responsive Pricing Section

AKASH GANDHAR

2 years ago

2.8k
Hero

Aman kumar

2 years ago

7.7k
Home page
Home page для ПО, страница для входа в приложение.

Alla Telegina

1 year ago

1.8k
Brutalist Hero

threehymns

1 year ago

3k
Hero

Hasan AlDoy (McDoy)

1 year ago

2k