Admin Panel

Source https://gist.github.com/visualval/8aaaad794256313fa2310b997e8a9b8f

This tailwind example is contributed by SANJAY SINGH GARIYA, on 02-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Admin Dashboard, User dashboard

Dashboard

Author SANJAY SINGH GARIYA

1.6k

Fork Fullscreen

<div class="hidden md:flex space-x-8 text-gray-400 ">
            <a href="#about" class="text-green-400 dark:text-green-600">Home</a>
            <a href="#what-i-do" class="hover:text-green-400 dark:hover:text-green-600 ">What I Do</a>
            <a href="#testimonials" class="hover:text-green-400 dark:hover:text-green-600 ">Testimonials</a>
            <a href="#clients" class="hover:text-green-400 dark:hover:text-green-600 ">Clients</a>
            <a href="#fun-facts" class="hover:text-green-400 dark:hover:text-green-600 ">Fun Facts</a>
          </div>

<div class="md:hidden flex items-center">
            <button id="mobile-menu-button" class="text-green-400 dark:text-green-600 hover:text-green-600 focus:outline-none">
            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
            </svg>
          </button>
          </div>
        </div>
      </div>

<div id="mobile-menu" class="absolute inset-0 bg-[#111111]  bg-opacity-50 z-50 hidden">
        <div class="fixed inset-y-0 left-0 bg-[#111111] dark:bg-white w-64 p-6 transform -translate-x-full transition-transform">
          <button id="close-menu-button" class="text-green-400 dark:text-green-600 hover:text-green-600 focus:outline-none mb-4">
          <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
          <nav class="space-y-4 text-gray-400 dark:text-gray-700">
            <a href="#about" class="block text-green-400 dark:text-green-600">Home</a>
            <a href="#what-i-do" class="block hover:text-green-400 dark:hover:text-green-600 ">What I Do</a>
            <a href="#testimonials" class="block hover:text-green-400 dark:hover:text-green-600 ">Testimonials</a>
            <a href="#clients" class="block hover:text-green-400 dark:hover:text-green-600 ">Clients</a>
            <a href="#fun-facts" class="block hover:text-green-400 dark:hover:text-green-600 ">Fun Facts</a>
          </nav>
        </div>
      </div>
      
    </nav>

</div>

<div class="items-center mt-10 md:mt-5 w-10/12 grid-cols-2 mx-auto overflow-x-hidden lg:grid md:py-14 lg:py-24 xl:py-14 lg:mt-3 xl:mt-5" data-aos="fade-right" data-aos-duration="800">
    <div class="pr-2 md:mb-14 py-14 md:py-0">
      <h1 class="text-3xl font-semibold text-blue-900 xl:text-5xl lg:text-3xl"><span class="block w-full">Get a financial experience</span> for growing your business!</h1>
      <p class="py-4 text-lg text-gray-500 2xl:py-8 md:py-6 2xl:pr-5">
        Empowering you to make better financial decisions, We truly are professional money planners...
      </p>
      <div class="mt-4">
        <a href="#contact" class="px-5 py-3 text-lg tracking-wider text-white bg-blue-500 rounded-lg md:px-8 hover:bg-blue-600 group"><span>Explore More</span> </a>
      </div>
    </div>

<div class="items-center w-10/12 grid-cols-2 mx-auto overflow-x-hidden lg:grid md:py-14 lg:py-24 xl:py-14 lg:mt-3 xl:mt-5" data-aos="fade-right" data-aos-duration="800">
    <div class="pr-2 md:mb-14 py-14 md:py-0">
      <h1 class="text-3xl font-semibold text-blue-900 xl:text-5xl lg:text-3xl"><span class="block w-full">Get a financial experience</span> for growing your business!</h1>
      <p class="py-4 text-lg text-gray-500 2xl:py-8 md:py-6 2xl:pr-5">
        Empowering you to make better financial decisions, We truly are professional money planners...
      </p>
      <div class="mt-4">
        <a href="#contact" class="px-5 py-3 text-lg tracking-wider text-white bg-blue-500 rounded-lg md:px-8 hover:bg-blue-600 group"><span>Explore More</span> </a>
      </div>
    </div>

mobileMenuButton.addEventListener('click', () => {
      mobileMenu.classList.remove('hidden');
      mobileMenu.querySelector('div').classList.remove('-translate-x-full');
    });

closeMenuButton.addEventListener('click', () => {
      mobileMenu.querySelector('div').classList.add('-translate-x-full');
      setTimeout(() => mobileMenu.classList.add('hidden'), 300);
    });

mobileMenu.addEventListener('click', (e) => {
      if (e.target === mobileMenu) {
        closeMenuButton.click();
      }
    });
</script>

Related Examples

MEDICAL profecial #esther developer
medical care

Author:
Nirere Esther

9 months ago

552
EVDesign Admin Dashboard modern elegant
EVDesign Admin Dashboard

Author:
Alif Bima Pradana

1 week ago

170
sidebar dash
sidebar dash

Author:
Omer fils ELENGA

2 months ago

336
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

10 months ago

1k
sidebar

Author:
Abhishek Kumar

6 months ago

674
Best Chatting dashboard
create a modern WhatsApp-like chat dashboard with 3D effects, animations, and a sleek design. This will be a static view showcasing the interface with Nicole Shalom as the developer.

Author:
Nicole Shalom

9 months ago

1.2k
E-Voting Dashboard
For You

Author:
Alif Bima Pradana

2 weeks ago

141
IT Lab Loan Information System - UNG

Author:
Alif Bima Pradana

1 week ago

98
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Author:
Ayyamperumal S

3 weeks ago

262
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

1 year ago

1.6k
sidebar
This sidebar implementation 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 4. Beautiful animations and effects: 1. Slide-in animation when opening the sidebar 2. Fade-in animation for menu items with staggered delays 3. Hover effects on menu items with underline animation 4. Smooth color transitions 5. SVG icons for menu items 6. User profile section at the bottom of the sidebar 7. Close button for easy dismissal on mobile 8. Main content area with a toggle button for the sidebar 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The sidebar has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Menu items have hover effects with background color changes and underline animations - Icons change color on hover - The sidebar slides in from the left with a smooth animation - Menu items fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The layout is responsive, with the sidebar hiding off-screen on mobile and a toggle button to show/hide it This implementation provides a visually appealing and functional sidebar with various animations and effects, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions.

Author:
nejaa badr

1 year ago

4.7k
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

977

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components