Home
Srreyashi DeyChakii
Admin portal landing page

Admin portal landing page

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

Header Table

Author Srreyashi DeyChakii

3.4k

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

Tailwind CSS Responsive Table

Author:
Prashant

3 years ago

11.3k
Modern Website Header & Footer
I created a professional header and footer using HTML and Tailwind CSS with modern design elements, smooth animations, and interactive features.

Author:
Rathanak Phan

3 months ago

726
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

527
Artisan Coffee Crafted with Care
Coffee is one of the world's most beloved beverages, enjoyed by millions daily. Here's an in-depth look at everything coffee-related.

Author:
matoleo chance

3 months ago

435
Yvette
it's very good

Author:
Umutoniwase Yvette

3 months ago

277
Header + simple Hero Section

Author:
ABDO-SY

7 months ago

1.5k
Markert shop
wellcome tothe my online shoping

Author:
Umutoniwase Yvette

3 months ago

102
Simple responsive table

Author:
Lukas Müller

2 years ago

11.1k
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

704
Section Heading
A gorgeous section heading with a smooth blur element.

Author:
Coastal UI

10 months ago

1.2k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

5 months ago

494
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

5 months ago

352

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components