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

1.9k

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

Collapsible content

Author:
Rafferty Kim

2 years ago

13k
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

Author:
irahoza daniel

1 week ago

22
Multi Step form with javascript
A Beautiful multi step form using HTML CSS and JS

Author:
Walid Ahmad

7 months ago

803
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

1 month ago

270
Maintenance page

Author:
Faye

5 months ago

858
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Abhiraj

4 months ago

889
Upvote downvote buttons

Author:
Lucas Martinez

2 years ago

11.1k
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

Author:
SHARIFUL ISLAM

3 months ago

676
Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

1 year ago

8.4k
3d card
the Best 3D card with tailwind css

Author:
irahoza daniel

1 week ago

12
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

10 months ago

2.2k
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

Author:
SANJAY SINGH GARIYA

2 months ago

394

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components