Home
Bonimater
bonimator dash board

bonimator dash board

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

Shopping cart Accordion

Author Bonimater

195

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

Shop Now Amazon x
Product cards

Author:
ORGIN_DREAMS

6 months ago

1.1k
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Author:
Indra

2 months ago

224
Accordion block
FAQ accordion component, featuring expandable sections with smooth transitions and a clean, modern design

Author:
Maxim

1 year ago

1.7k
Animated Pizza Menu Grid
A beautiful, interactive pizza product grid featuring smooth 360-degree rotation animations on hover. This free open-source component includes automatic dark mode support, responsive design (mobile, tablet, desktop), and an elegant "Add to Cart" button reveal effect. Built with HTML and Tailwind CSS - no dependencies required. Ideal for restaurant websites, food delivery platforms, e-commerce stores, or any product showcase needing eye-catching interactivity.

Author:
Homayoun

3 weeks ago

221
Shopping Cart
Shopping Cart

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

857
FAQ.
Super simple animated FAQ with tailwind group hoverable accordion open and close.

Author:
inbarajan P

1 year ago

1.9k
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 months ago

552
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."

Author:
Nicole Shalom

6 months ago

966
portifolio
upgraded portifolio

Author:
Bonimater

4 months ago

572
clothes
shopp clothes

Author:
Nirere Esther

6 months ago

265
Native HTML Accordion
native html accordion summary details

Author:
Cristian

1 year ago

2.3k
details & summary beautiful styling & animation
details & summary beautiful styling & animation

Author:
Cristian

1 year ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components