bonimator dash board

This tailwind example is contributed by Bonimater, on 09-Aug-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is collapsible

Shopping cart Accordion

Author Bonimater

Tailwind v3.4 907 6

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Boimator Dashboard</title>
  <style>
    /* Underline slide animation for nav links */
    nav ul li a {
      position: relative;
      padding-bottom: 4px;
    }
    nav ul li a::after {
      content: "";
      position: absolute;
      width: 0;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: #facc15; /* yellow-400 */
      transition: width 0.3s ease;
    }
    nav ul li a:hover::after {
      width: 100%;
    }

/* Hamburger animation */
    #menu-btn {
      position: relative;
      width: 32px;
      height: 24px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    #menu-btn span {
      display: block;
      height: 4px;
      background: white;
      border-radius: 2px;
      transition: all 0.3s ease;
    }
    #menu-btn.open span:nth-child(1) {
      transform: translateY(10px) rotate(45deg);
    }
    #menu-btn.open span:nth-child(2) {
      opacity: 0;
    }
    #menu-btn.open span:nth-child(3) {
      transform: translateY(-10px) rotate(-45deg);
    }

/* Mobile menu styling */
    #menu.mobile {
      position: fixed;
      top: 56px; /* nav height */
      right: 0;
      width: 70%;
      max-width: 250px;
      height: calc(100% - 56px);
      background: #4f46e5; /* indigo-700 */
      padding-top: 1rem;
      padding-left: 1rem;
      box-shadow: -4px 0 8px rgba(0,0,0,0.2);
      z-index: 30;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      transform: translateX(100%);
      transition: transform 0.3s ease;
    }
    #menu.mobile.show {
      transform: translateX(0);
    }
    #menu.mobile li a {
      color: white;
      font-weight: 600;
      font-size: 1.1rem;
      padding: 0.5rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      position: relative;
      padding-bottom: 8px;
    }
    #menu.mobile li a::after {
      background-color: #facc15;
    }
    #overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 20;
      transition: opacity 0.3s ease;
    }
    #overlay.show {
      display: block;
      opacity: 1;
    }
  </style>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">

<nav class="bg-indigo-700 text-white p-4 flex items-center justify-between shadow fixed top-0 left-0 right-0 z-40">
    <div class="flex items-center space-x-2">
      
      <div class="text-2xl font-extrabold tracking-wide select-none">
        <span class="text-yellow-400">B</span>oimator
      </div>
    </div>

<button id="menu-btn" class="md:hidden" aria-label="Toggle menu" aria-expanded="false" aria-controls="menu">
      <span></span>
      <span></span>
      <span></span>
    </button>

<ul
      id="menu"
      class="hidden md:flex space-x-8 font-semibold"
    >
      <li><a href="#" class="hover:text-yellow-400 transition">Home</a></li>
      <li><a href="#" class="hover:text-yellow-400 transition">Projects</a></li>
      <li><a href="#" class="hover:text-yellow-400 transition">About</a></li>
      <li><a href="#" class="hover:text-yellow-400 transition">Contact</a></li>
      <li><a href="#" class="hover:text-yellow-400 transition">Help</a></li>
    </ul>
  </nav>

<div id="overlay"></div>

<main class="p-6 pt-24 flex-grow">
    <div class="max-w-7xl mx-auto grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">

<div class="bg-white rounded-xl shadow-lg overflow-hidden flex flex-col">
        <img
          class="h-40 w-full object-cover"
          src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=800&q=80"
          alt="Campus Map"
        />
        <div class="p-5 flex flex-col flex-grow">
          <h3 class="text-indigo-700 font-bold text-lg mb-2">Smart Campus Navigation</h3>
          <p class="text-gray-700 flex-grow">Find buildings, classrooms, and more on campus with real-time directions.</p>
          <a href="#" class="mt-4 inline-block bg-indigo-600 text-white py-2 rounded-full text-center hover:bg-indigo-700 transition">
            Explore Now
          </a>
        </div>
      </div>

<div class="bg-white rounded-xl shadow-lg overflow-hidden flex flex-col">
        <img
          class="h-40 w-full object-cover"
          src="https://images.unsplash.com/photo-1556741533-f6acd647d2fb?auto=format&fit=crop&w=800&q=80"
          alt="Blockchain"
        />
        <div class="p-5 flex flex-col flex-grow">
          <h3 class="text-indigo-700 font-bold text-lg mb-2">Blockchain Certificate Verification</h3>
          <p class="text-gray-700 flex-grow">Secure and verify certificates using blockchain technology.</p>
          <a href="#" class="mt-4 inline-block bg-indigo-600 text-white py-2 rounded-full text-center hover:bg-indigo-700 transition">
            Learn More
          </a>
        </div>
      </div>

<div class="bg-white rounded-xl shadow-lg overflow-hidden flex flex-col">
        <img
          class="h-40 w-full object-cover"
          src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=800&q=80"
          alt="E-commerce"
        />
        <div class="p-5 flex flex-col flex-grow">
          <h3 class="text-indigo-700 font-bold text-lg mb-2">Sustainable E-commerce Marketplace</h3>
          <p class="text-gray-700 flex-grow">Shop eco-friendly products with transparency on sustainability.</p>
          <a href="#" class="mt-4 inline-block bg-indigo-600 text-white py-2 rounded-full text-center hover:bg-indigo-700 transition">
            Shop Now
          </a>
        </div>
      </div>

<div class="bg-white rounded-xl shadow-lg overflow-hidden flex flex-col">
        <img
          class="h-40 w-full object-cover"
          src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=800&q=80"
          alt="AI Healthcare"
        />
        <div class="p-5 flex flex-col flex-grow">
          <h3 class="text-indigo-700 font-bold text-lg mb-2">AI-Powered Health Assistant</h3>
          <p class="text-gray-700 flex-grow">Personalized AI assistant providing health advice and reminders.</p>
          <a href="#" class="mt-4 inline-block bg-indigo-600 text-white py-2 rounded-full text-center hover:bg-indigo-700 transition">
            Discover
          </a>
        </div>
      </div>

<div class="bg-white rounded-xl shadow-lg overflow-hidden flex flex-col">
        <img
          class="h-40 w-full object-cover"
          src="https://images.unsplash.com/photo-1515377905703-c4788e51af15?auto=format&fit=crop&w=800&q=80"
          alt="IoT Home Automation"
        />
        <div class="p-5 flex flex-col flex-grow">
          <h3 class="text-indigo-700 font-bold text-lg mb-2">Smart Home Automation</h3>
          <p class="text-gray-700 flex-grow">Automate household tasks with IoT and machine learning.</p>
          <a href="#" class="mt-4 inline-block bg-indigo-600 text-white py-2 rounded-full text-center hover:bg-indigo-700 transition">
            Get Started
          </a>
        </div>
      </div>

</div>
  </main>

function closeMenu() {
      btn.classList.remove('open');
      menu.classList.remove('show');
      overlay.classList.remove('show');
      setTimeout(() => menu.classList.remove('mobile'), 300);
      btn.setAttribute('aria-expanded', 'false');
    }

function openMenu() {
      menu.classList.add('mobile');
      setTimeout(() => menu.classList.add('show'), 10);
      overlay.classList.add('show');
      btn.classList.add('open');
      btn.setAttribute('aria-expanded', 'true');
    }

btn.addEventListener('click', () => {
      if (menu.classList.contains('mobile')) {
        closeMenu();
      } else {
        openMenu();
      }
    });

overlay.addEventListener('click', closeMenu);

// Hide/show menu button explicitly on resize (optional, for extra safety)
    function checkMenuBtnVisibility() {
      if (window.innerWidth >= 768) {
        btn.style.display = 'none';
        // Also close menu if open
        if (menu.classList.contains('mobile')) {
          closeMenu();
        }
      } else {
        btn.style.display = 'flex';
      }
    }

checkMenuBtnVisibility();
    window.addEventListener('resize', checkMenuBtnVisibility);
  </script>

</body>
</html>

Related Examples

Accordion FAQ

Nikola Małecka

1 year ago

1.9k
HOT DOGS WEB SITE
it combine the hot dogs delivary

bonheur dev

1 year ago

1.2k
Accordion with minimum javascript

Anonymous

3 years ago

9.5k
Simple Accordion with Alpine Js and Tailwind CSS

Anonymous

2 years ago

3.6k
Frequently Asked Questions
A beautiful and modern accordion FAQ component using HTML & Tailwind CSS with smooth animations.

Rajesh Maheshwari

1 year ago

2k
Accordion
uses Flobite.js for interactivity

Piet Vriend

3 years ago

16.1k
Why Everyone Around the World Loves Us
"Our platform is built to serve everyone, everywhere — with speed, security, and a human touch." "From cities to remote villages, our features connect the world through technology that truly cares." "Designed with the whole world in mind — fast, secure, and made for real people." "No matter who you are or where you're from, our tools are built to empower and inspire you." "We believe great technology should be accessible, safe, and helpful to all — and that's exactly what we offer."

Nicole Shalom

1 year ago

1.7k
Stylish Mobile-First Navigation Bar Using Tailwind
This project showcases a sleek, fixed-top responsive navigation bar crafted with Tailwind CSS. Featuring a vibrant gradient background, a bold uppercase logo, and smooth pink hover effects, it adapts beautifully across devices. On desktop, the navigation links appear horizontally with ample spacing, while on mobile, a hamburger menu toggles a stylish dropdown with rounded corners and subtle shadows. The navbar’s semi-transparent backdrop with blur adds a modern glassmorphism touch, making it perfect for contemporary web designs.

Bonimater

1 year ago

1.6k
Native HTML Accordion
native html accordion summary details

Cristian

2 years ago

2.8k
FAQ section
An expanding frequently asked questions section made without using javascript.

Manuela Bianka

4 years ago

12.3k
Animated hero section template for a ecommerce store
A bold, animated hero section template that brings personality and energy to your ecommerce shoe store. Features floating 3D elements, vibrant gradients, and playful animations that make your products pop off the screen. Features: - Light & dark mode with smooth transitions and persistent theme preference - Fully responsive design optimized for mobile, tablet, and desktop - Eye-catching floating shoe display with rotating decorative elements - Animated gradient backgrounds and glowing CTAs - Modern color scheme with pink, purple, and yellow accents - Social proof stats section for building trust - Clean, semantic HTML with Tailwind CSS utility classes - Zero dependencies - just copy, customize, and deploy - Open source and free to use for commercial projects For: Sneaker stores, footwear brands, fashion ecommerce sites, streetwear shops, or any modern retail brand looking to make a memorable first impression with a hero section that doesn't take itself too seriously. Quick Setup: Simply replace the emoji placeholder with your product image, update the copy to match your brand voice, adjust the color gradients to your palette, and you're ready to launch!

Ijila Itunu

8 months ago

823
shoping products
Shopping products

Abhiraj

1 year ago

2.3k