Home
Anonymous
admin panel

admin panel

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

Other

Author Anonymous

2.2k

Fork Fullscreen

<div class="bg-zinc-100">
    <div class="px-5 py-10 max-w-4xl mx-auto h-screen">
        <div class="flex flex-row h-full space-x-5 w-full">
            <div class="flex flex-col w-1/5 space-y-2">
                <a href="#"
                    class="flex flex-col-2 items-center justify-between p-2 pl-3 text-slate-500 hover:text-black">
                    <div class="font-bold">
                        entry 1
                    </div>
                </a>
                <a href="#"
                    class="flex flex-col-2 items-center justify-between p-2 pl-3 text-slate-500 hover:text-black">
                    <div class="font-bold">
                        entry 2
                    </div>
                    <div class="py-0.5 px-2 text-sm font-bold text-center border-l">
                        3
                    </div>
                </a>
                <a href="#"
                    class="flex flex-col-2 items-center justify-between p-2 text-sky-500 border-l-4 border-sky-500">
                    <div class="font-bold">
                        entry 3
                    </div>
                </a>
            </div>
            <div class="flex flex-col w-4/5 space-y-2 p-5 rounded-md bg-white">
                <a href="#"
                    class="flex flex-col-2 items-center justify-between p-2 rounded text-slate-500 hover:ring-1 hover:ring-sky-200">
                    entry 1
                </a>
                <a href="#"
                    class="flex flex-col-2 items-center justify-between p-2 rounded text-slate-500 hover:ring-1 hover:ring-sky-200">
                    entry 2
                </a>
                <a href="#"
                    class="flex flex-col-2 items-center justify-between p-2 rounded text-slate-500 hover:ring-1 hover:ring-sky-200">
                    entry 3
                    <div class="py-0.5 px-2 rounded-md bg-red-100 text-sm font-bold text-center text-red-400">
                        error
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

Related Examples

Moving Background Animation

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

6 months ago

2.3k
Tailwind Google Map widget

Author:
Dung Vuong

1 month ago

59
Simple Payment Successfull Notification Page

Author:
Anonymous

2 months ago

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

Author:
Ahita Bisma Adlula

5 months ago

1.8k
profile
user profile

Author:
gidy

2 months ago

124
Calculator
A Basic Calculator

Author:
Debbie F

1 year ago

1.4k
Subscription Plans
Subscription Plans

Author:
Tanvir Hasan Bappy (Tanvir)

2 months ago

525
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

3 months ago

293
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

6 months ago

950
cards
cards with background animation

Author:
Anonymous

1 year ago

10.8k
Login AND Signup
login and signup

Author:
Uwera Dorcas

2 months ago

191
nft card
nft card

Author:
5upreme505

9 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components