admin panel

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

Other

Author Anonymous

Tailwind v3.4 3.5k 6

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

Drag & Drop File Upload with Progress & Image Preview

JUGENDRA GANGWAR

1 month ago

109
اصقل جسدك صفحة Landing

Hasan AlDoy (McDoy)

4 months ago

191
dsdd
dsdsd

fem dev

5 months ago

382
Track Your Order
Track Your Order

Tanvir Hasan Bappy (Tanvir)

1 year ago

855
Author Panels

Sherry Lynne

1 month ago

18
button animation
button animation big

QQ-VVN

1 year ago

1.5k
App Hero Section With header

Abdul Baset Bappy

1 year ago

1.5k
Testimonial Section
A responsive, SEO-friendly testimonial section for Ab Nahid Agency clients

Abdul Jabbar Al Nahid

1 year ago

1.2k
background animation
background animation

Anonymous

3 years ago

53k
Login Form
Login Card Structure This code gives you a complete, self-contained login card. Here's what's included: Input Fields: Email and password fields with icons, labels, and placeholder text. The password field includes a "Forgot password?" link. Options & Actions: A "Remember me" checkbox and a prominent "Sign In" button with hover effects. Footer Links: A "Create one" link for new accounts and social login icons (Google and GitHub) for alternative sign-in methods.

Muzammil Riaz

2 months ago

175
InfoWindow Mapy rzemieślników Desktop

Antoni Wierzba

3 months ago

113
Irish Destination
For Irish road signs Destination

Allynn Alvarico

5 months ago

245