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

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

Rwanda-Canada Transport Services | Safe & Reliable Shipping
Attractive color scheme inspired by Rwanda's landscapes

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

543
profil_eleve.html

Author:
Anonymous

2 months ago

130
Elegant Dock
Useful Tailwind classes for constructing a basic Dock (usually used on mobile).

Author:
Nick Girga

7 months ago

817
Life Tree
by salvator

Author:
Baraka Salvator

7 months ago

850
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 year ago

3.8k
trusted by
1. Color Scheme: 1. Updated the background to a gradient from Indigo-800 to Blue-900 2. Changed text colors to use Indigo-800 and Blue-900 shades 3. Updated ring colors on avatar images to match the new scheme 2. Enhanced Design: 1. Added a containing card with white background (dark gray in dark mode) 2. Increased the size of avatar images for better visibility 3. Added a shadow effect to the card that changes color on hover 3. Responsiveness: 1. Maintained the responsive layout, stacking vertically on smaller screens 4. Animations and Interactions: 1. Added a fade-in animation for the entire component 2. Enhanced hover effects on avatar images (scale and z-index change) 3. Added a ring effect on hover for each avatar 5. Accessibility: 1. Maintained alt text for images 2. Ensured proper color contrast for text readability 6. Dark Mode: 1. Implemented dark mode support 2. Adjusted colors and ring effects for dark mode 7. Additional Enhancements: 1. Increased font sizes for better readability 2. Added font weight variations to emphasize important text 3. Improved spacing and alignment This updated component maintains the original functionality while incorporating the Indigo-800 and Blue-900 color scheme and adding enhanced visual effects and interactions.

Author:
nejaa badr

1 year ago

1.8k
Your upside-down text

Author:
Isabella Kowalski

3 years ago

12.9k
Text Overlay Effect
This is a text overlay effect, featuring a subtle background title and a prominent foreground heading. This design enhances visual interest while maintaining a clean, modern aesthetic.

Author:
Anum Shahana

1 year ago

1.4k
Terms of Service Page Template

Author:
Anonymous

1 year ago

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

Author:
Walid Ahmad

1 year ago

1.2k
Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

8 months ago

1k
About Us Component

Author:
KULDEEP

5 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components