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 v3.4. It is responsive. similar terms for this example are Admin Dashboard, User dashboard

Dashboard

Author SANJAY SINGH GARIYA

Tailwind v3.4 1.9k 3

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

Responsive Dashboard
1. Background Colors: 1. Main background: `bg-indigo-50` 2. Welcome card: `bg-indigo-100` with `border-indigo-200` 3. Inbox card: `bg-blue-100` with `border-blue-200` 4. Overlay: `bg-indigo-900/50` 2. Text Colors: 1. Header text: `text-indigo-800` 2. Logo: `text-blue-900` and `text-indigo-800` 3. Menu items hover: `hover:text-indigo-800` 4. Card headings: `text-blue-900` 3. Button/Badge Colors: 1. Welcome badge: `bg-indigo-800` 2. Inbox button: `bg-blue-800` with `hover:bg-blue-900` 3. Stats card titles: `text-indigo-800` 4. Maintained all functionality: 1. Responsive design 2. Animations and transitions 3. Mobile menu 4. Hover effects 5. Notification animation The color scheme now uses a mix of Indigo-800 and Blue-900 while maintaining visual hierarchy and accessibility. The colors create a professional and cohesive look across all components.

nejaa badr

1 year ago

4.8k
quora/reddit
reddit / quora have some kind of same template. looksalikes. brothas

Anonymous

2 years ago

13.6k
Command Palette with Search & Keyboard Navigation

JUGENDRA GANGWAR

2 months ago

84
Admin Panel
Source https://gist.github.com/visualval/8aaaad794256313fa2310b997e8a9b8f

Mr Robot

4 years ago

25.7k
Modern Retail Analytics Dashboard UI with Interactive Charts
Dashboard built with HTML, Tailwind CSS, and vanilla JavaScript.

JUGENDRA GANGWAR

3 months ago

345
Adminpanel
Three tabs, switch between each other, change color when clicked. Tables with filter, search, with a drop-down form to fill.

Alla Telegina

1 year ago

2.1k
Kost Management Dashboard UI modern
Here is the comprehensive design for the KostManagement dashboard, implemented with a focus on luxury, modern aesthetics, and the specific color palette provided.

Alif Bima Pradana

8 months ago

1.1k
canvas fully covers
canvas fully covers

ABDESLAMI ACHRAF

1 year ago

5.2k
SalivaGuard Dashboard Modern
This is a mobile app interface design (Android style) for "SalivaGuard AI." I've designed it in a single file that includes HTML, CSS (via Tailwind), and JavaScript for the interaction logic.

Alif Bima Pradana

8 months ago

368
Adim dashboard
The dashboard includes practical admin components like user management, revenue tracking, order management, system monitoring, and performance metrics - all styled with vibrant colors and modern gradients using Tailwind CSS!

ishimwe prince

1 year ago

3.1k
EVDesign Admin Dashboard modern elegant
EVDesign Admin Dashboard

Alif Bima Pradana

7 months ago

1.3k
pange
pejdz

Anonymous

2 years ago

12.9k