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.4k

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

Apple Dock Navigation Bar

Author:
Cristian

8 months ago

1.3k
Linear infinite brand scrolling with hover effect
Beautiful lineat brand scrolling partner with hover effect

Author:
Walid Ahmad

1 year ago

2k
Product Details Page
This section will show all the information about a selected product, including its title, description, price, images, and specifications.

Author:
mohit kulkarni

2 weeks ago

84
News feed

Author:
Bunny

2 years ago

13.4k
Payment Cards

Author:
Shammi Nethupul

1 year ago

2.3k
App Hero Section With header

Author:
Abdul Baset Bappy

3 months ago

610
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

Author:
nejaa badr

11 months ago

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

Author:
Abdul Jabbar Al Nahid

2 months ago

213
To-Do List with Tailwind CSS
A simple and responsive to-do list built with HTML, JavaScript, and Tailwind CSS. Features task addition, completion, and deletion. Perfect for beginner projects or component demos.

Author:
Sudip chaudhary

3 months ago

430
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

6 months ago

620
Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

Author:
SHARIFUL ISLAM

7 months ago

1.5k
Invoice
Invoice

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

482

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components