Search Components

All Components

Browse all available Tailwind CSS components

Art Deco Sport/Fitness Hamburger Menu

A complex, responsive hamburger menu component with an Art Deco aesthetic, pastel color scheme, and dark mode support, suitable for sports and fitness applications.

Open Preview

                <div class="relative bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 min-h-screen font-sans overflow-hidden">
  <!-- Header Section -->
  <header class="relative z-20 p-4 sm:p-6 lg:p-8 flex items-center justify-between shadow-lg backdrop-blur-sm bg-white/70 dark:bg-gray-900/70 border-b-4 border-opacity-70 border-purple-300 dark:border-gray-600">
    <div class="flex items-center space-x-4">
      <img src="https://picsum.photos/50/50?random=1" alt="Team Logo" class="rounded-full shadow-md border-2 border-purple-400 dark:border-gray-500">
      <h1 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-white tracking-wider uppercase text-shadow-art-deco">
        <span class="text-purple-600 dark:text-purple-300">Elite</span> <span class="text-pink-600 dark:text-pink-300">Athletics</span>
      </h1>
    </div>

    <!-- Mobile Hamburger Toggle -->
    <input type="checkbox" id="menu-toggle" class="hidden peer">
    <label for="menu-toggle" class="relative z-50 flex flex-col justify-between w-8 h-6 xl:hidden cursor-pointer group">
      <span class="block w-full h-1 bg-purple-600 dark:bg-purple-300 transform transition duration-300 rounded-full group-hover:bg-pink-500 peer-checked:rotate-45 peer-checked:translate-y-2.5"></span>
      <span class="block w-full h-1 bg-purple-600 dark:bg-purple-300 transform transition duration-300 rounded-full group-hover:bg-pink-500 peer-checked:opacity-0"></span>
      <span class="block w-full h-1 bg-purple-600 dark:bg-purple-300 transform transition duration-300 rounded-full group-hover:bg-pink-500 peer-checked:-rotate-45 peer-checked:-translate-y-2.5"></span>
    </label>

    <!-- Desktop Navigation -->
    <nav class="hidden xl:flex space-x-8 text-lg font-semibold">
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Home
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Schedule
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Team
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Results
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Shop
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Contact
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
    </nav>
  </header>

  <!-- Mobile Navigation (Off-canvas) -->
  <nav class="fixed inset-0 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-950 dark:via-gray-850 dark:to-gray-750 flex flex-col justify-center items-center space-y-8 text-2xl font-bold transition-transform duration-500 -translate-x-full peer-checked:translate-x-0 z-40 shadow-xl overflow-y-auto px-4 py-16">
    <div class="absolute top-0 left-0 w-full h-full opacity-30 pointer-events-none" style="background-image: url('data:image/svg+xml;utf8,<svg width=\'100\' height=\'100\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'><defs><pattern id=\'art-deco-pattern\' width=\'100\' height=\'100\' patternUnits=\'userSpaceOnUse\'><path d=\'M0 0 L100 0 L50 50 Z M50 50 L100 100 L0 100 Z\' fill=\'none\' stroke=\'rgba(0,0,0,0.1)\' stroke-width=\'1\'/><circle cx=\'50\' cy=\'50\' r=\'5\' fill=\'rgba(0,0,0,0.1)\'/></pattern></defs><rect width=\'100%\' height=\'100%\' fill=\'url(%23art-deco-pattern)\'/></svg>'); background-size: 100px 100px;"></div>

    <div class="relative z-10 flex flex-col items-center space-y-6 sm:space-y-8">
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-purple-200 dark:hover:bg-gray-600 hover:text-purple-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-purple-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[50ms]">
        <i class="fas fa-home mr-3 text-purple-600 dark:text-purple-300"></i> Home
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-pink-200 dark:hover:bg-gray-600 hover:text-pink-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-pink-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[100ms]">
        <i class="fas fa-calendar-alt mr-3 text-pink-600 dark:text-pink-300"></i> Schedule
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-yellow-200 dark:hover:bg-gray-600 hover:text-yellow-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-yellow-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[150ms]">
        <i class="fas fa-users mr-3 text-yellow-600 dark:text-yellow-300"></i> Team
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-green-200 dark:hover:bg-gray-600 hover:text-green-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-green-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[200ms]">
        <i class="fas fa-clipboard-list mr-3 text-green-600 dark:text-green-300"></i> Results
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-blue-200 dark:hover:bg-gray-600 hover:text-blue-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-blue-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[250ms]">
        <i class="fas fa-shopping-cart mr-3 text-blue-600 dark:text-blue-300"></i> Shop
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-indigo-200 dark:hover:bg-gray-600 hover:text-indigo-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-indigo-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[300ms]">
        <i class="fas fa-envelope mr-3 text-indigo-600 dark:text-indigo-300"></i> Contact
      </a>
    </div>

    <!-- Social Media Links -->
    <div class="relative z-10 flex space-x-6 mt-8 sm:mt-12 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[350ms]">
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors text-3xl"><i class="fab fa-facebook"></i></a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-pink-600 dark:hover:text-pink-300 transition-colors text-3xl"><i class="fab fa-twitter"></i></a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-yellow-600 dark:hover:text-yellow-300 transition-colors text-3xl"><i class="fab fa-instagram"></i></a>
    </div>

    <!-- User Mini-Profile -->
    <div class="relative z-10 flex items-center space-x-4 mt-8 sm:mt-12 p-4 bg-white/70 dark:bg-gray-800/70 rounded-lg shadow-lg border-2 border-purple-300 dark:border-gray-600 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[400ms]">
      <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-purple-400 dark:border-gray-500 shadow-md">
      <div>
        <p class="text-gray-800 dark:text-gray-100 text-lg font-semibold">John "The Bolt" Doe</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Athlete - Running</p>
      </div>
    </div>
  </nav>

  <!-- Main Content Area (for visual context) -->
  <main class="p-8 text-center text-gray-800 dark:text-gray-200 z-10 relative">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-6 mt-12 leading-tight text-shadow-art-deco-light">
      Unleash Your Inner <span class="text-pink-600 dark:text-pink-300">Champion</span>
    </h2>
    <p class="text-lg sm:text-xl max-w-2xl mx-auto mb-12 opacity-90">
      Dedicated to excellence in sports and fitness. Join our community and elevate your performance.
    </p>
    <div class="flex justify-center flex-wrap gap-6">
      <div class="w-full sm:w-1/2 lg:w-1/3 p-4">
        <div class="bg-white/80 dark:bg-gray-800/80 rounded-xl p-6 shadow-xl border-4 border-purple-300 dark:border-gray-600 backdrop-blur-sm transform transition-transform hover:scale-105 duration-300">
          <img class="w-full h-48 object-cover rounded-md mb-4 border-2 border-purple-400 dark:border-gray-500" src="https://picsum.photos/400/300?random=2" alt="Training Session">
          <h3 class="text-2xl font-bold mb-2 text-purple-700 dark:text-purple-200">Training Sessions</h3>
          <p class="text-gray-700 dark:text-gray-300">Discover personalized training programs for all skill levels.</p>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/3 p-4">
        <div class="bg-white/80 dark:bg-gray-800/80 rounded-xl p-6 shadow-xl border-4 border-pink-300 dark:border-gray-600 backdrop-blur-sm transform transition-transform hover:scale-105 duration-300">
          <img class="w-full h-48 object-cover rounded-md mb-4 border-2 border-pink-400 dark:border-gray-500" src="https://picsum.photos/400/300?random=3" alt="Team Sports">
          <h3 class="text-2xl font-bold mb-2 text-pink-700 dark:text-pink-200">Team Sports</h3>
          <p class="text-gray-700 dark:text-gray-300">Join a team and experience the thrill of competitive play.</p>
        </div>
      </div>
    </div>
  </main>

  <!-- Art Deco Geometric Background Elements (Absolute Positioning) -->
  <div class="absolute top-0 left-0 w-full h-full pointer-events-none opacity-20 dark:opacity-10">
    <!-- Top Left Triangle -->
    <div class="absolute top-0 left-0 w-64 h-64 sm:w-80 sm:h-80 bg-purple-300 dark:bg-gray-700 transform rotate-45 -translate-x-1/2 -translate-y-1/2 origin-top-left "></div>
    <div class="absolute top-0 left-0 w-48 h-48 sm:w-64 sm:h-64 bg-pink-300 dark:bg-gray-600 transform rotate-45 -translate-x-1/2 -translate-y-1/2 origin-top-left translate-x-16 translate-y-16 "></div>

    <!-- Bottom Right Chevron -->
    <div class="absolute bottom-0 right-0 w-64 h-32 sm:w-80 sm:h-40 bg-yellow-300 dark:bg-gray-700 transform rotate-45 translate-x-1/4 translate-y-1/4 origin-bottom-right"></div>
    <div class="absolute bottom-0 right-0 w-48 h-24 sm:w-64 sm:h-32 bg-purple-300 dark:bg-gray-600 transform rotate-45 translate-x-1/4 translate-y-1/4 origin-bottom-right -translate-x-16 -translate-y-8"></div>

    <!-- Middle Horizontal Bars -->
    <div class="absolute left-1/4 top-1/2 -translate-y-1/2 w-1/2 h-8 bg-pink-300 dark:bg-gray-700 rounded-full transform rotate-3 z-0"></div>
    <div class="absolute left-1/4 top-[calc(50%+2rem)] -translate-y-1/2 w-1/2 h-8 bg-purple-300 dark:bg-gray-600 rounded-full transform -rotate-3 z-0"></div>
  </div>

  <style>
    .text-shadow-art-deco {
      text-shadow: 2px 2px 0px rgba(109, 40, 217, 0.2), 4px 4px 0px rgba(219, 39, 119, 0.2);
      /* Combined purple and pink shadow */
    }

    .dark .text-shadow-art-deco {
      text-shadow: 2px 2px 0px rgba(82, 82, 91, 0.5), 4px 4px 0px rgba(37, 99, 235, 0.2);
    }

    .text-shadow-art-deco-light {
      text-shadow: 1px 1px 0px rgba(109, 40, 217, 0.1), 2px 2px 0px rgba(219, 39, 119, 0.1);
      /* Lighter for main heading copy */
    }

    .dark .text-shadow-art-deco-light {
      text-shadow: 1px 1px 0px rgba(82, 82, 91, 0.3), 2px 2px 0px rgba(37, 99, 235, 0.1);
    }

    /* Prevent scrolling when menu is open */
    body.menu-open {
      overflow: hidden;
    }

    /* Use JS for adding/removing menu-open class on body */
    /* Example (add this script manually elsewhere, not in the provided HTML context): */
    /*
    document.getElementById('menu-toggle').addEventListener('change', function() {
      if (this.checked) {
        document.body.classList.add('menu-open');
      } else {
        document.body.classList.remove('menu-open');
      }
    });
    */
  </style>
  <!-- Font Awesome for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</div>

360_Viewer_Component_Brutalism_Grayscale

A complex 360° viewer component designed with a brutalist, grayscale aesthetic for dashboard applications. Features raw, bold contrasts and interactive elements, fully responsive with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-neutral-100 dark:bg-neutral-950 font-mono text-neutral-900 dark:text-neutral-100 transition-colors duration-300">
  <!-- Component Wrapper -->
  <div class="max-w-7xl mx-auto border-4 border-neutral-900 dark:border-neutral-100 p-4 sm:p-6 lg:p-8 bg-neutral-200 dark:bg-neutral-900 shadow-[8px_8px_0px_2px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_2px_rgba(255,255,255,1)]">
    <!-- Header -->
    <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 sm:mb-8 pb-4 border-b-4 border-neutral-900 dark:border-neutral-100">
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold uppercase leading-none mb-2 sm:mb-0">360° Object <span class="hidden sm:inline">Viewer</span></h1>
      <div class="flex space-x-2">
        <button class="px-4 py-2 text-sm sm:text-base font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-700 hover:bg-neutral-400 dark:hover:bg-neutral-600 transition-colors duration-200 shadow-md">Live Feed</button>
        <button class="px-4 py-2 text-sm sm:text-base font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-700 hover:bg-neutral-400 dark:hover:bg-neutral-600 transition-colors duration-200 shadow-md">Settings</button>
      </div>
    </header>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 sm:gap-8">
      <!-- Main Viewer Area -->
      <section class="lg:col-span-2 relative aspect-video bg-neutral-300 dark:bg-neutral-800 border-4 border-neutral-900 dark:border-neutral-100 overflow-hidden shadow-lg p-2 sm:p-4 md:p-6">
        <div class="absolute inset-0 flex items-center justify-center p-4">
          <img src="https://picsum.photos/1200/800?grayscale&random=1" alt="360 object view placeholder" class="w-full h-full object-contain filter grayscale border-2 border-neutral-600 dark:border-neutral-400">
        </div>
        <!-- Overlay Controls -->
        <div class="absolute bottom-0 left-0 right-0 p-2 sm:p-4 bg-neutral-900 dark:bg-neutral-100 bg-opacity-70 dark:bg-opacity-70 text-neutral-100 dark:text-neutral-900 flex justify-between items-center">
          <div class="flex space-x-2 sm:space-x-4">
            <button class="p-2 border-2 border-neutral-100 dark:border-neutral-900 hover:bg-neutral-700 dark:hover:bg-neutral-300 transition-colors duration-200 shadow-md" aria-label="Rotate Left">
              <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M11 2C6.03 2 2 6.03 2 11h3c0-3.87 3.13-7 7-7s7 3.13 7 7c0 1.93-.78 3.68-2.05 4.95L15.36 12H19v7h-7l2.84-2.84C10.71 18.29 8.91 19 7 19c-3.87 0-7-3.13-7-7c0-3.87 3.13-7 7-7zm-4 4h2v5h5v2h-7zm6 3l-3 3h3zm-3 8h-2v-5h-5v-2h7z" />
              </svg>
            </button>
            <button class="p-2 border-2 border-neutral-100 dark:border-neutral-900 hover:bg-neutral-700 dark:hover:bg-neutral-300 transition-colors duration-200 shadow-md" aria-label="Rotate Right">
              <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M13 2c4.97 0 9 4.03 9 9h-3c0-3.87-3.13-7-7-7s-7 3.13-7 7c0 1.93.78 3.68 2.05 4.95L8.64 12H5v7h7l-2.84-2.84C13.29 18.29 15.09 19 17 19c3.87 0 7-3.13 7-7c0-3.87-3.13-7-7-7zm4 4h-2v5h-5v2h7zm-6 3l3 3h-3zm3 8h2v-5h5v-2h-7z" />
              </svg>
            </button>
          </div>
          <div class="flex space-x-2 sm:space-x-4">
            <button class="p-2 border-2 border-neutral-100 dark:border-neutral-900 hover:bg-neutral-700 dark:hover:bg-neutral-300 transition-colors duration-200 shadow-md" aria-label="Toggle Fullscreen">
              <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M5 5h5v2H7v3H5zm14 0h-5v2h3v3h2zm-5 14h5v-2h-3v-3h-2zm-7 0H5v-2h3v-3h2z" />
              </svg>
            </button>
          </div>
        </div>
      </section>

      <!-- Side Panel: Stats & Controls -->
      <aside class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-6 sm:gap-8">
        <!-- Object Details -->
        <section class="p-4 border-4 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-800 shadow-lg">
          <h2 class="text-xl sm:text-2xl font-extrabold uppercase mb-4 pb-2 border-b-2 border-neutral-900 dark:border-neutral-100">Object Info</h2>
          <dl class="text-sm sm:text-base">
            <div class="flex justify-between border-b border-neutral-500 py-1">
              <dt class="font-bold">ID:</dt>
              <dd>OBJ-734X</dd>
            </div>
            <div class="flex justify-between border-b border-neutral-500 py-1">
              <dt class="font-bold">Type:</dt>
              <dd>Heavy Unit</dd>
            </div>
            <div class="flex justify-between border-b border-neutral-500 py-1">
              <dt class="font-bold">Status:</dt>
              <dd class="text-green-700 dark:text-green-400 font-bold">ONLINE</dd>
            </div>
            <div class="flex justify-between py-1">
              <dt class="font-bold">Last Scan:</dt>
              <dd>2023-10-27 14:30 UTC</dd>
            </div>
          </dl>
        </section>

        <!-- Control Panel -->
        <section class="p-4 border-4 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-800 shadow-lg">
          <h2 class="text-xl sm:text-2xl font-extrabold uppercase mb-4 pb-2 border-b-2 border-neutral-900 dark:border-neutral-100">Actions</h2>
          <div class="grid grid-cols-1 gap-4">
            <button class="w-full px-4 py-3 text-base sm:text-lg font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-400 dark:bg-neutral-600 hover:bg-neutral-500 dark:hover:bg-neutral-500 transition-colors duration-200 shadow-md">Initiate Scan</button>
            <button class="w-full px-4 py-3 text-base sm:text-lg font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-400 dark:bg-neutral-600 hover:bg-negative-700 transition-colors duration-200 shadow-md">Deactivate Unit</button>
            <select class="w-full px-4 py-3 text-base sm:text-lg font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-400 dark:bg-neutral-600 appearance-none shadow-md">
              <option>Select View Mode</option>
              <option>Wireframe</option>
              <option>Thermal</option>
              <option>X-Ray</option>
            </select>
          </div>
        </section>
      </aside>
    </div>

    <!-- Activity Log / Footer -->
    <section class="mt-8 p-4 border-4 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-800 shadow-lg">
      <h2 class="text-xl sm:text-2xl font-extrabold uppercase mb-4 pb-2 border-b-2 border-neutral-900 dark:border-neutral-100">Recent Activity</h2>
      <div class="space-y-2 text-sm sm:text-base max-h-48 overflow-y-auto pr-2">
        <p><span class="text-neutral-700 dark:text-neutral-300">[14:35:01]</span> <span class="font-bold">SYSTEM:</span> User 'JOHN.DOE' requested full scan.</p>
        <p><span class="text-neutral-700 dark:text-neutral-300">[14:34:20]</span> <span class="font-bold">ALERT:</span> Environmental anomaly detected. Severity LOW.</p>
        <p><span class="text-neutral-700 dark:text-neutral-300">[14:30:00]</span> <span class="font-bold">REPORT:</span> Scan 'OBJ-734X' completed. No critical deviations.</p>
        <p><span class="text-neutral-700 dark:text-neutral-300">[14:29:15]</span> <span class="font-bold">SYSTEM:</span> Object 'OBJ-734X' power cycle initiated.</p>
        <p><span class="text-neutral-700 dark:text-neutral-300">[14:28:50]</span> <span class="font-bold">USER:</span> 'JANE.SMITH' logged in from Console 03.</p>
        <p><span class="text-neutral-700 dark:text-neutral-300">[14:27:05]</span> <span class="font-bold">SYSTEM:</span> Module 'ALPHA-01' diagnostics complete. OK.</p>
      </div>
    </section>

    <!-- Dark Mode Toggle (Conceptual - outside core component) -->
    <div class="absolute top-4 right-4">
      <button class="px-3 py-2 text-sm font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-700 hover:bg-neutral-400 dark:hover:bg-neutral-600 transition-colors duration-200 shadow-md" onclick="document.documentElement.classList.toggle('dark')">Toggle Dark Mode</button>
    </div>

  </div>
</div>

Bauhaus Weather Cards Component

A simple, responsive weather/climate cards component inspired by Bauhaus design principles, featuring geometric forms and a triadic color scheme. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans tracking-wide">
  <div class="container max-w-7xl grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

    <!-- Today's Weather Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-red-500 dark:border-red-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
      <div class="p-6 flex-grow flex flex-col justify-between">
        <div>
          <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Today</h2>
          <p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400 mb-4">28°C</p>
          <p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Sunny with scattered clouds</p>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-2 gap-2 text-sm text-gray-700 dark:text-gray-400">
          <div>
            <span class="font-semibold block">Humidity:</span> 65%
          </div>
          <div>
            <span class="font-semibold block">Wind:</span> 12 km/h NE
          </div>
          <div>
            <span class="font-semibold block">UV Index:</span> Low
          </div>
          <div>
            <span class="font-semibold block">Precip:</span> 0%
          </div>
        </div>
      </div>
      <div class="px-6 py-3 bg-yellow-500 dark:bg-yellow-600 text-sm font-semibold text-white uppercase text-center">
        Current Conditions
      </div>
    </div>

    <!-- Tomorrow's Forecast Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-blue-500 dark:border-blue-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
      <div class="p-6 flex-grow flex flex-col justify-between">
        <div>
          <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Tomorrow</h2>
          <p class="text-4xl font-extrabold text-red-600 dark:text-red-400 mb-4">25°C</p>
          <p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Partly cloudy, chance of showers</p>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-2 gap-2 text-sm text-gray-700 dark:text-gray-400">
          <div>
            <span class="font-semibold block">Humidity:</span> 78%
          </div>
          <div>
            <span class="font-semibold block">Wind:</span> 15 km/h NW
          </div>
          <div>
            <span class="font-semibold block">UV Index:</span> Moderate
          </div>
          <div>
            <span class="font-semibold block">Precip:</span> 30%
          </div>
        </div>
      </div>
      <div class="px-6 py-3 bg-red-500 dark:bg-red-600 text-sm font-semibold text-white uppercase text-center">
        Expected Forecast
      </div>
    </div>

    <!-- Day After Tomorrow's Forecast Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-yellow-500 dark:border-yellow-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
      <div class="p-6 flex-grow flex flex-col justify-between">
        <div>
          <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Fri, May 24</h2>
          <p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400 mb-4">22°C</p>
          <p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Mostly cloudy, few showers</p>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-2 gap-2 text-sm text-gray-700 dark:text-gray-400">
          <div>
            <span class="font-semibold block">Humidity:</span> 85%
          </div>
          <div>
            <span class="font-semibold block">Wind:</span> 10 km/h W
          </div>
          <div>
            <span class="font-semibold block">UV Index:</span> Low
          </div>
          <div>
            <span class="font-semibold block">Precip:</span> 60%
          </div>
        </div>
      </div>
      <div class="px-6 py-3 bg-blue-500 dark:bg-blue-600 text-sm font-semibold text-white uppercase text-center">
        Long Range Outlook
      </div>
    </div>

    <!-- Climate Data Card (Example with Placeholder Image) -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-green-500 dark:border-green-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
      <img src="https://picsum.photos/400/250?random=1" alt="Climate Data Visualization" class="w-full h-40 object-cover border-b-4 border-green-500 dark:border-green-600 group-hover:scale-105 transition duration-300" loading="lazy">
      <div class="p-6 flex-grow flex flex-col justify-between">
        <div>
          <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Climate Trends</h2>
          <p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Analyzing global temperature shifts</p>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 text-sm text-gray-700 dark:text-gray-400">
          <p class="font-semibold">Average Anomaly:</p>
          <p class="mb-2">+0.85°C (past decade)</p>
          <p class="font-semibold">CO2 Levels:</p>
          <p>420 ppm (rising)</p>
        </div>
      </div>
      <div class="px-6 py-3 bg-green-500 dark:bg-green-600 text-sm font-semibold text-white uppercase text-center">
        Environmental Impact
      </div>
    </div>

  </div>
</div>

Sticky Navigation Component

Minimalist, responsive sticky navigation bar for a weather/climate website, featuring cool neutral colors, dark mode support, and interactive elements. Designed for medium complexity with functional links and a search bar.

Open Preview

                <header class="sticky top-0 z-50 bg-white shadow-sm dark:bg-gray-900 transition-colors duration-300 ease-in-out">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between flex-wrap gap-4">
    <a href="#" class="text-2xl font-bold text-gray-800 dark:text-gray-100 whitespace-nowrap tracking-tight transition-colors duration-300 ease-in-out">
      Weather<span class="text-blue-600 dark:text-blue-400">Sphere</span>
    </a>

    <div class="flex items-center gap-4 order-3 md:order-none">
      <div class="relative flex items-center">
        <input type="search" placeholder="Search city..." class="py-2 pl-10 pr-3 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 ease-in-out w-full max-w-xs md:max-w-none">
        <svg class="absolute left-3 text-gray-500 dark:text-gray-400 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
      <button type="button" class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-300 ease-in-out">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12h1m15.325-7.757l-.707-.707M4.343 19.343l-.707-.707m13.414 0l.707-.707M4.343 4.343l-.707-.707"></path>
        </svg>
      </button>
    </div>

    <input type="checkbox" id="menu-toggle" class="hidden peer">
    <label for="menu-toggle" class="cursor-pointer md:hidden text-gray-600 dark:text-gray-300 p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300 ease-in-out order-2">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
    </label>

    <div class="hidden peer-checked:block md:flex flex-col md:flex-row md:items-center gap-x-6 gap-y-2 w-full md:w-auto mt-4 md:mt-0 pb-2 md:pb-0 border-t md:border-t-0 border-gray-200 dark:border-gray-700 order-last md:order-none transition-all duration-300 ease-in-out" id="navbar-links">
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        Dashboard
      </a>
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        Forecast
      </a>
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        Climate Data
      </a>
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        Maps
      </a>
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        About
      </a>
    </div>
  </nav>
</header>

Registration Form Component

A complex, responsive registration form component for finance/banking applications, featuring a clean, minimalist design with high-contrast colors, strong typography, and grid-based layout. Includes dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-50 flex items-center justify-center p-4 sm:p-6 lg:p-8 dark:bg-gray-900 font-sans">
  <div class="max-w-4xl w-full bg-white shadow-xl rounded-lg overflow-hidden dark:bg-gray-800 dark:text-gray-200 grid grid-cols-1 md:grid-cols-2 gap-0 border border-gray-200 dark:border-gray-700">

    <!-- Left Section: Header/Intro -->
    <div class="flex flex-col justify-between p-6 sm:p-8 bg-gradient-to-br from-indigo-700 to-blue-800 text-white dark:from-indigo-900 dark:to-blue-950">
      <div>
        <h1 class="text-4xl sm:text-5xl font-extrabold mb-4 leading-tight">Create Your Account</h1>
        <p class="text-lg sm:text-xl font-light opacity-90">Join us to unlock tailored financial solutions designed for your future.</p>
      </div>
      <div class="mt-8">
        <p class="text-sm opacity-80 mb-2">Already have an account?</p>
        <a href="#" class="inline-flex items-center text-white px-4 py-2 border border-white rounded-md hover:bg-white hover:text-indigo-700 transition-colors duration-300 font-medium">
          Sign In
          <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>
      <img src="https://picsum.photos/300/200?random=1" alt="Abstract financial graphic" class="mt-8 rounded-md shadow-lg opacity-80 hidden md:block">
    </div>

    <!-- Right Section: Registration Form -->
    <div class="p-6 sm:p-8 lg:p-10 flex flex-col justify-center">
      <h2 class="text-3xl sm:text-4xl font-bold mb-6 text-gray-900 dark:text-gray-50">Register and Get Started</h2>

      <form class="space-y-6">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
          <div class="mt-1">
            <input type="text" id="full-name" name="full-name" placeholder="John Doe" autocomplete="name" required
                   class="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white transition-colors duration-200">
          </div>
        </div>

        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
          <div class="mt-1">
            <input type="email" id="email" name="email" placeholder="[email protected]" autocomplete="email" required
                   class="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white transition-colors duration-200">
          </div>
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
          <div class="mt-1">
            <input type="password" id="password" name="password" placeholder="Minimum 8 characters" autocomplete="new-password" required
                   class="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white transition-colors duration-200">
          </div>
          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Must be 8+ characters, including numbers and symbols.</p>
        </div>

        <div>
          <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm Password</label>
          <div class="mt-1">
            <input type="password" id="confirm-password" name="confirm-password" placeholder="Re-enter your password" autocomplete="new-password" required
                   class="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 dark:text-white transition-colors duration-200">
          </div>
        </div>

        <div class="flex items-start">
          <div class="flex items-center h-5">
            <input id="terms" name="terms" type="checkbox" required
                   class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600 dark:checked:bg-blue-600 dark:checked:border-blue-600 transition-colors duration-200">
          </div>
          <div class="ml-3 text-sm">
            <label for="terms" class="font-medium text-gray-700 dark:text-gray-300">I agree to the <a href="#" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-500 font-medium transition-colors duration-200">Terms of Service</a> and <a href="#" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-500 font-medium transition-colors duration-200">Privacy Policy</a>.</label>
          </div>
        </div>

        <div>
          <button type="submit"
                  class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-offset-gray-800 transition-colors duration-200">
            Register
          </button>
        </div>
      </form>

      <div class="mt-6 relative">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
          <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white text-gray-500 dark:bg-gray-800 dark:text-gray-400">Or continue with</span>
        </div>
      </div>

      <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
        <button type="button"
                class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800 transition-colors duration-200">
          <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 16 16"><path d="M15.518 8.006c0-.528-.046-.928-.112-1.304H8V4.168h4.436c-.074-.784-.452-1.488-.992-1.928a5.2 5.2 0 00-3.444-1.296A5.28 5.28 0 002.72 5.6C2.72 7.024 3.736 8.304 4.984 8.948S7.096 9.772 8 9.772c1.78 0 2.928-.68 3.5-1.122l2.35 2.188c-1.396 1.28-3.328 2.052-5.78 2.052a7.99 7.99 0 01-7.8-7.988C.2 3.512 1.348 2.176 2.76 1.136S5.508 0 8 0a7.9 7.9 0 015.688 2.228 7.96 7.96 0 012.35 5.778z"></path></svg>
          Google
        </button>
        <button type="button"
                class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800 transition-colors duration-200">
          <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 16 16"><path d="M11.517 7.034c-.878-.492-1.74-.954-2.584-1.411-.84-.456-1.57-.852-2.196-1.189-.62-.33-.974-.6-1.074-.79a.294.294 0 01-.01-.07c.026-.065.176-.145.446-2.072 0 0-.294 1.706-2.502 1.954C2.192 3.654 0 5.4 0 7.55c0 2.15 1.572 4.1 3.4 5.922 1.82 1.82 3.8 3.484 5.952 3.484 2.152 0 3.7-1.5 3.7-3.75 0-2.25-1.534-3.75-3.7-3.75zM8 4.2C7.2 3.8 6.4 3.4 5.8 3.1c-.6-.3-1.1-.4-1.3-.4-.2 0-.4.1-.6.2-.2.1-.3.3-.3.4 0 .1 0 .2.1.2.1.1.2.2.3.2.1 0 .2 0 .3 0 .1 0 .2.1.3.1.1 0 .2.1.2.1.1 0 .2.1.3.1.1 0 .2 0 .3-.1l.1-.1c.1-.1.1-.2.2-.3-.1-.1-.2-.2-.3-.3-.1-.1-.2-.2-.3-.2 0 0 .1 0 .2 0 .1 0 .2.1.3.1.1 0 .2-.1.3-.1.1 0 .2-.1.3-.1.1 0 .2-.1.3-.1.1-.1.2-.1.3-.2-.1-.1-.1-.1-.2-.1-.1 0-.2 0-.2.1-.1 0-.1.1-.2.1-.1 0-.2.1-.3.1-.1 0-.2.1-.3.1-.1 0-.2.1-.3.1-.1 0-.2.1-.2.1-.1 0-.2 0-.2.1-.1 0-.1.1-.2.1-.1 0-.2.1-.2.1-.1 0-.1.1-.2.1-.1 0-.2.1-.3.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.2-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0-.1-.1-.2-.1-.1 0;m-1 7.15c.3.1.6.2.9.4.3.2.5.3.7.4.2.1.4.2.6.2.2.1.4.1.6.1.2 0 .4-.1.6-.2.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3.2-.1.4-.2.6-.3zm-11.838 1.12c-.528-.48-.954-.954-1.284-1.396-.33-.442-.516-.764-.556-.962-.02-.1-.01-.3.02-.4.03-.1.14-.3.34-.4.2-.1.4-.2.6-.3.2-.1.4-.1.6-.2.2-.1.4-.1.6-.1.2 0 .4-.1.6-.1.2 0 .4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2 0 .4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1.2-.1.4-.1.6-.1c.32-.4 1.134-1.396 1.134-1.3961zm1.264 4.092c-.39-.148-.776-.296-1.156-.444-.38-.148-.752-.292-1.116-.436-.36-.14-.7-.272-1.02-.396-.32-.12-.62-.23-.9-.33-.28-.1-.54-.188-.78-.264-.24-.076-.46-.14-.66-.192-.2-.052-.38-.09-.54-.114-.16-.02-.3-.034-.42-.042-.12-.008-.22-.012-.3-.012-.08 0-.14.004-.18.012-.04.008-.06.012-.06.012l.056-.002c-.012-.004-.02-.006-.024-.006-.004 0-.006-.002-.006-.002-.002 0-.002 0-.002 0zM12.924 1.638s-2.028-.466-2.046-1.042c-.018-.576.4-1.034.4-1.034l.006-.004s-.418.458-.4 1.034c.018.576.602 1.042.602 1.042L12.924 1.638zm-1.42 2.392s-1.46-.226-1.47-.642c-.01-.416.3-.642.3-.642l.004-.002s-.314.226-.3 0c.01-.416.48-1.506.48-1.506l.004-.002s-.474 1.09-.48 1.506c-.006.416.29 1.152.29 1.152l.002 0zm-2.088 1.704s-1.42-.516-1.43-.932c-.01-.416.29-.64.29-.64l.004-.002s-.3.224-.3.64c0 .416.307.72.307.72l.002 0zm-2.31 1.714s-.91-.18-1.01-.444c-.1-.264.06-.444.06-.444l.002-.002s-.07.18-.06.444c.01.264.25.444.25.444l.002 0zm-3.084 2.87c-.82-.68-1.458-1.258-1.916-1.734-.46-.476-.732-.82-.816-1.03-.08-.21-.06-.38-.008-.5.05-.12.16-.23.332-.33.17-.1.35-.16.54-.18.19-.02.38-.006.56.042.18.05.35.13.5.24.15.11.28.24.39.39.11.15.2.3.26.46.06.16.08.31.06.45-.02.14-.08.27-.18.38-.1.11-.23.2-.38.27-.15.07-.3.1-.46.09-.16-.01-.32-.07-.48-.18-.16-.11-.3-.26-.43-.46-.13-.2-.24-.44-.32-.7-.08-.26-.14-.54-.14-.84s.01-.58.04-.88c.03-.3.09-.59.18-.87.09-.28.2-.54.34-.78.14-.24.3-.46.48-.65.18-.19.38-.34.58-.46.2-.12.42-.2.66-.23.24-.03.48-.02.72.03.24.05.47.14.68.27.21.13.4.29.57.49.17.2.32.42.44.66.12.24.22.5.28.78.06.28.08.57.06.86-.02.29-.09.57-.22.84-.13.27-.3.53-.52.76-.22.23-.48.43-.76.6-.28.17-.58.3-.9.39-.32.09-.65.13-.98.12-.33-.01-.66-.08-.98-.21-.32-.13-.63-.3-.92-.53-.29-.23-.55-.49-.77-.79-.22-.3-.4-.63-.5-.95-.1-.32-.14-.66-.12-.99.02-.33.1-.66.24-.97.14-.3.3-.59.49-.85.19-.26.39-.49.62-.7.23-.21.49-.39.75-.54.26-.15.53-.26.8-.35.27-.09.55-.13.82-.12.27.01.54.06.8.15.26.09.5.2.7.34.2.14.4.3.57.48.17.18.3.37.4.58.1.21.16.42.17.63.01.21-.02.42-.09.63-.07.21-.18.4-.33.56-.15.16-.32.29-.5.39-.18.1-.38.16-.58.17-.2.01-.4-.02-.6-.09-.2-.07-.39-.17-.55-.29-.16-.12-.3-.27-.4-.44-.1-.17-.16-.36-.16-.56 0-.2.04-.39.12-.57.08-.18.19-.34.33-.48.14-.14.29-.25.46-.33.17-.08.33-.12.5-.12.17 0 .34.03.5.09.16.06.31.13.44.22.13.09.25.19.34.3.09.11.16.22.2.34.04.12.06.24.06.36 0 .12-.02.24-.06.36-.04.12-.1.23-.19.34-.09.11-.19.2-.3.29-.11.09-.23.16-.36.21-.13.05-.27.08-.41.08-.14 0-.28-.02-.41-.06-.13-.04-.25-.1-.37-.17-.12-.07-.23-.15-.33-.23-.1-.08-.19-.17-.26-.26-.07-.09-.12-.19-.15-.3-.03-.11-.04-.22-.02-.33.02-.11.07-.21.14-.3.07-.09.15-.17.25-.23.1-.06.2-.1.3-.12.1-.02.2-.02.3-.01.1 0 .2.01.3.03.1.02.2.04.3.07.1.03.2.06.3.1.1.04.2.07.2.11s.01.07.01.09c0 .02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01.02-.01.04-.03.06-.02.02-.04.03-.07.03-.03 0-.05-.01-.08-.03-.03-.02-.05-.04-.06-.07-.01-.03-.01-.05-.01-.07-.01-.02.01-.04.03-.06.02-.02.04-.03.07-.03.03.01.05.02.08.03.03.01.05.03.06.06.01.03.01.05.01.07.01-.004-.002-.006-.002zM12.924 1.638L12.924 1.638zM15.518 8.006c-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304-.066-.376-.112-.776-.112-1.304.066.376.112.776.112 1.304H8V4.168h4.436c-.074-.784-.452-1.488-.992-1.928a5.2 5.2 0 00-3.444-1.296A5.28 5.28 0 002.72 5.6C2.72 7.024 3.736 8.304 4.984 8.948S7.096 9.772 8 9.772c1.78 0 2.928-.68 3.5-1.122l2.35 2.188c-1.396 1.28-3.328 2.052-5.78 2.052a7.99 7.99 0 01-7.8-7.988C.2 3.512 1.348 2.176 2.76 1.136S5.508 0 8 0a7.9 7.9 0 015.688 2.228 7.96 7.96 0 012.35 5.778z"></path><path d="M11.517 7.034c-.878-.492-1.74-.954-2.584-1.411-.84-.456-1.57-.852-2.196-1.189-.62-.33-.974-.6-1.074-.79a.294.294 0 01-.01-.07c.026-.065.176-.145.446-2.072 0 0-.294 1.706-2.502 1.954C2.192 3.654 0 5.4 0 7.55c0 2.15 1.572 4.1 3.4 5.922 1.82 1.82 3.8 3.484 5.952 3.484 2.152 0 3.7-1.5 3.7-3.75 0-2.25-1.534-3.75-3.7-3.75z"></path></svg>
          Apple
        </button>
      </div>
    </div>
  </div>
</div>

Industrial_Sunset_Ecommerce_Component

Complex e-commerce component with an industrial design style, warm sunset color scheme, and full responsiveness with dark mode support.

Open Preview

                <div class="font-sans bg-stone-100 text-stone-800 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen">

  <!-- Header/Navigation Placeholder -->
  <header class="flex justify-between items-center bg-stone-200 dark:bg-stone-800 p-4 mb-8 shadow-md rounded-lg border-b-4 border-amber-600 dark:border-amber-400">
    <h1 class="text-2xl font-bold text-amber-700 dark:text-amber-300">RAW Goods</h1>
    <nav class="hidden md:flex space-x-6">
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Shop</a>
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">About</a>
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Contact</a>
    </nav>
    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 transition-colors duration-200">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 1116 0 2 2 0 0116 0z"></path></svg>
      </button>
      <button class="md:hidden p-2 rounded-md bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 transition-colors duration-200">
         <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </header>

  <!-- Main Content Area -->
  <main class="grid grid-cols-1 lg:grid-cols-4 gap-8">

    <!-- Sidebar / Filters -->
    <aside class="lg:col-span-1 bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-amber-500 dark:border-amber-700">
      <h2 class="text-xl font-semibold mb-6 text-amber-700 dark:text-amber-300">Filters</h2>
      <div class="mb-6">
        <h3 class="font-medium text-lg mb-3 text-stone-700 dark:text-stone-300">Category</h3>
        <ul class="space-y-2 text-stone-600 dark:text-stone-400">
          <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Metalwork</a></li>
          <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Woodcraft</a></li>
          <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Textiles</a></li>
          <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Concrete</a></li>
        </ul>
      </div>
      <div class="mb-6">
        <h3 class="font-medium text-lg mb-3 text-stone-700 dark:text-stone-300">Price Range</h3>
        <input type="range" min="0" max="500" value="250" class="w-full accent-amber-600 dark:accent-amber-400 h-2 rounded-lg appearance-none cursor-pointer bg-stone-400 dark:bg-stone-600 mb-2">
        <div class="flex justify-between text-sm text-stone-600 dark:text-stone-400">
          <span>$0</span>
          <span>$500+</span>
        </div>
      </div>
      <div class="mb-6">
        <h3 class="font-medium text-lg mb-3 text-stone-700 dark:text-stone-300">Material</h3>
        <div class="space-y-2">
          <label class="flex items-center text-stone-600 dark:text-stone-400">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-amber-600 dark:text-amber-400 rounded focus:ring-amber-500 dark:focus:ring-amber-300 border-stone-400 dark:border-stone-600 mr-2">
            Steel
          </label>
          <label class="flex items-center text-stone-600 dark:text-stone-400">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-amber-600 dark:text-amber-400 rounded focus:ring-amber-500 dark:focus:ring-amber-300 border-stone-400 dark:border-stone-600 mr-2">
            Oak
          </label>
          <label class="flex items-center text-stone-600 dark:text-stone-400">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-amber-600 dark:text-amber-400 rounded focus:ring-amber-500 dark:focus:ring-amber-300 border-stone-400 dark:border-stone-600 mr-2">
            Copper
          </label>
        </div>
      </div>
      <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 px-4 rounded-md transition-colors duration-200 shadow-md">
        Apply Filters
      </button>
    </aside>

    <!-- Product Grid -->
    <section class="lg:col-span-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 auto-rows-min">
      
      <!-- Product Card 1 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/67/300/200" alt="Industrial Lamp" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Forged Iron Lamp</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Hand-forged from recycled steel, a raw and powerful statement piece for any industrial space.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$189.99</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.8</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/1025/300/200" alt="Concrete Planter" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Brutalist Concrete Planter</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">A sturdy, minimalist design crafted from raw concrete, perfect for modern urban gardens.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$75.00</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.5</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/1084/300/200" alt="Reclaimed Wood Table" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Reclaimed Oak Console</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Each piece unique, crafted from distressed reclaimed oak, showcasing its natural imperfections.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$499.00</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.9</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/401/300/200" alt="Copper Pendant Light" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Patina Copper Pendant</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Hand-hammered copper with a natural patina, perfect for adding warmth to any room.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$210.00</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.7</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/353/300/200" alt="Industrial Stool" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Raw Steel Stool</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Minimalist design, maximum durability. Crafted from solid steel for a truly industrial feel.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$120.00</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.6</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/345/300/200" alt="Canvas Bag" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Waxed Canvas Tote</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Durable and water-resistant, made from heavy-duty waxed canvas with copper rivets.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$95.00</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.9</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

    </section>

  </main>

  <!-- Pagination Placeholder -->
  <nav class="flex justify-center items-center space-x-2 mt-12" aria-label="Pagination">
    <a href="#" class="p-3 rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
    </a>
    <a href="#" class="p-3 w-10 h-10 flex items-center justify-center rounded-full bg-amber-600 dark:bg-amber-400 text-white font-bold shadow-md">1</a>
    <a href="#" class="p-3 w-10 h-10 flex items-center justify-center rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">2</a>
    <a href="#" class="p-3 w-10 h-10 flex items-center justify-center rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">3</a>
    <span class="text-stone-600 dark:text-stone-400">...</span>
    <a href="#" class="p-3 w-10 h-10 flex items-center justify-center rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">10</a>
    <a href="#" class="p-3 rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
    </a>
  </nav>

  <!-- Footer Placeholder -->
  <footer class="mt-12 text-center text-stone-600 dark:text-stone-400 text-sm border-t-4 border-amber-600 dark:border-amber-400 pt-8">
    <p>&copy; 2023 RAW Goods. All rights reserved.</p>
  </footer>

</div>

Product Gallery Component

A responsive product gallery component with a dark UI, sepia/brown color scheme, suitable for business/corporate websites. Includes multiple product cards with images, titles, descriptions, and prices, and supports dark mode.

Open Preview

                <section class="py-12 bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 font-sans">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="text-4xl font-extrabold text-stone-800 dark:text-stone-200 sm:text-5xl lg:text-6xl leading-tight">
        Our Premium Collection
      </h2>
      <p class="mt-4 text-xl text-stone-600 dark:text-stone-400 max-w-2xl mx-auto">
        Discover exquisitely crafted products designed with passion and precision.
      </p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">

      <!-- Product Card 1 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1018/600/400" alt="Product Image 1">
          <div class="absolute top-4 left-4 bg-stone-700/80 dark:bg-stone-600/80 text-stone-100 text-xs font-semibold px-3 py-1 rounded-full">New Arrival</div>
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Elegant Desk Lamp</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">A sophisticated lamp with adjustable brightness, perfect for modern workspaces.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$89.99</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1/600/400" alt="Product Image 2">
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Vintage Leather Bag</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Hand-stitched leather bag with durable hardware, ideal for daily use or travel.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$149.00</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1084/600/400" alt="Product Image 3">
          <div class="absolute top-4 right-4 bg-red-600/80 dark:bg-red-500/80 text-white text-xs font-semibold px-3 py-1 rounded-full">Sale</div>
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Ceramic Coffee Mug Set</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Artisan crafted set of four mugs, perfect for your morning brew or evening tea.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300 line-through text-lg">$45.00</span>
            <span class="text-2xl font-extrabold text-red-600 dark:text-red-500">$32.50</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1015/600/400" alt="Product Image 4">
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Botanical Wall Art</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Stunning framed print, bringing the tranquility of nature indoors.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$65.00</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/10/600/400" alt="Product Image 5">
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">High-Quality Headphones</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Experience immersive sound with active noise cancellation and ergonomic design.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$199.99</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1020/600/400" alt="Product Image 6">
          <div class="absolute top-4 left-4 bg-stone-700/80 dark:bg-stone-600/80 text-stone-100 text-xs font-semibold px-3 py-1 rounded-full">Limited Edition</div>
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Luxury Fountain Pen</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">A refined writing instrument, handcrafted for exceptional balance and smooth ink flow.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$249.00</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 7 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1005/600/400" alt="Product Image 7">
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Smart Home Assistant</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Integrate and control your smart devices with simple voice commands.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$129.00</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 8 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1021/600/400" alt="Product Image 8">
          <div class="absolute top-4 right-4 bg-emerald-600/80 dark:bg-emerald-500/80 text-white text-xs font-semibold px-3 py-1 rounded-full">In Stock</div>
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Organic Scented Candle</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Eco-friendly candle made with natural waxes and essential oils for a calming aroma.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$34.99</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

    </div>

    <div class="mt-12 text-center">
      <button class="inline-flex items-center px-8 py-3 bg-stone-700 dark:bg-stone-600 text-white font-semibold text-lg rounded-lg shadow-lg hover:bg-stone-800 dark:hover:bg-stone-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-75">
        View All Products
        <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      </button>
    </div>
  </div>
</section>

Neon_Glow_Accordion_Fashion_Beauty

A simple, responsive accordion component with neon/glow effects and autumn color scheme, suitable for fashion and beauty brands. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-orange-50 to-amber-100 dark:from-stone-900 dark:to-orange-950 min-h-screen font-sans">
  <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-8 sm:mb-12 text-amber-900 dark:text-orange-50 relative">
    <span class="block relative z-10">Frequently Asked Questions</span>
    <span class="absolute inset-0 bg-amber-500 blur-sm opacity-30 dark:bg-orange-800 dark:opacity-40 z-0"></span>
  </h2>

  <div class="max-w-3xl mx-auto space-y-4">

    <!-- Accordion Item 1 -->
    <div class="group bg-white/70 dark:bg-stone-800/70 p-4 rounded-xl shadow-lg relative overflow-hidden transition-all duration-300 hover:shadow-xl">
      <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-orange-400 opacity-20 blur-md group-hover:opacity-40 dark:from-orange-700 dark:to-orange-900 z-0 transition-opacity duration-300"></div>
      <input type="checkbox" id="accordion-1" class="hidden peer">
      <label for="accordion-1" class="relative z-10 cursor-pointer flex justify-between items-center py-2 text-lg sm:text-xl font-semibold text-amber-800 dark:text-orange-200">
        What are your shipping options?
        <svg class="w-5 h-5 sm:w-6 sm:h-6 transform transition-transform duration-300 group-hover:rotate-90 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="relative z-10 max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-96">
        <p class="py-2 text-stone-700 dark:text-gray-300 leading-relaxed">
          We offer standard and express shipping options. Standard shipping usually takes 3-5 business days, while express shipping delivers within 1-2 business days. Shipping costs vary based on your location and chosen method.
        </p>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div class="group bg-white/70 dark:bg-stone-800/70 p-4 rounded-xl shadow-lg relative overflow-hidden transition-all duration-300 hover:shadow-xl">
      <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-orange-400 opacity-20 blur-md group-hover:opacity-40 dark:from-orange-700 dark:to-orange-900 z-0 transition-opacity duration-300"></div>
      <input type="checkbox" id="accordion-2" class="hidden peer">
      <label for="accordion-2" class="relative z-10 cursor-pointer flex justify-between items-center py-2 text-lg sm:text-xl font-semibold text-amber-800 dark:text-orange-200">
        How do I find my perfect shade?
        <svg class="w-5 h-5 sm:w-6 sm:h-6 transform transition-transform duration-300 group-hover:rotate-90 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="relative z-10 max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-96">
        <p class="py-2 text-stone-700 dark:text-gray-300 leading-relaxed">
          Our website features a 'Shade Finder' tool that helps you determine your ideal match based on your skin tone and undertones. You can also consult our detailed product descriptions and customer reviews for guidance.
        </p>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div class="group bg-white/70 dark:bg-stone-800/70 p-4 rounded-xl shadow-lg relative overflow-hidden transition-all duration-300 hover:shadow-xl">
      <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-orange-400 opacity-20 blur-md group-hover:opacity-40 dark:from-orange-700 dark:to-orange-900 z-0 transition-opacity duration-300"></div>
      <input type="checkbox" id="accordion-3" class="hidden peer">
      <label for="accordion-3" class="relative z-10 cursor-pointer flex justify-between items-center py-2 text-lg sm:text-xl font-semibold text-amber-800 dark:text-orange-200">
        Do you offer international shipping?
        <svg class="w-5 h-5 sm:w-6 sm:h-6 transform transition-transform duration-300 group-hover:rotate-90 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="relative z-10 max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-96">
        <p class="py-2 text-stone-700 dark:text-gray-300 leading-relaxed">
          Yes, we proudly ship our products worldwide! Please note that international shipping times and costs may vary. Customs duties and taxes, if applicable, are the responsibility of the recipient.
        </p>
      </div>
    </div>

    <!-- Accordion Item 4 -->
    <div class="group bg-white/70 dark:bg-stone-800/70 p-4 rounded-xl shadow-lg relative overflow-hidden transition-all duration-300 hover:shadow-xl">
      <div class="absolute inset-0 bg-gradient-to-br from-amber-200 to-orange-400 opacity-20 blur-md group-hover:opacity-40 dark:from-orange-700 dark:to-orange-900 z-0 transition-opacity duration-300"></div>
      <input type="checkbox" id="accordion-4" class="hidden peer">
      <label for="accordion-4" class="relative z-10 cursor-pointer flex justify-between items-center py-2 text-lg sm:text-xl font-semibold text-amber-800 dark:text-orange-200">
        What is your return policy?
        <svg class="w-5 h-5 sm:w-6 sm:h-6 transform transition-transform duration-300 group-hover:rotate-90 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="relative z-10 max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-96">
        <p class="py-2 text-stone-700 dark:text-gray-300 leading-relaxed">
          We accept returns of unused and unopened products within 30 days of purchase for a full refund or exchange. Please visit our 'Returns & Exchanges' page for detailed instructions and to initiate a return.
        </p>
      </div>
    </div>

  </div>
</div>

Add to Cart Button Component

A responsive 'Add to Cart' button component for travel/tourism websites, inspired by paper/print design with warm sunset tones. Includes dark mode support and a subtle interactive effect.

Open Preview

                <div class="flex items-center justify-center p-4 bg-orange-50 dark:bg-gray-950 min-h-screen">
  <button class="relative group overflow-hidden px-8 py-3 rounded-lg shadow-md bg-gradient-to-br from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700
    text-white font-semibold uppercase tracking-wider text-base md:text-lg
    transition-all duration-300 ease-in-out
    focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800
    hover:shadow-lg hover:scale-105
    before:content-[''] before:absolute before:inset-0 before:bg-white before:opacity-0 before:blur-md
    group-hover:before:opacity-10 group-hover:before:animate-pulse">
    <span class="relative z-10 flex items-center justify-center gap-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform -rotate-12 group-hover:rotate-0 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
      </svg>
      Add to Cart
    </span>

    <!-- Paper Fold Detail (Pseudo-element-like via nested div for simplicity) -->
    <div class="absolute -bottom-2 -right-2 w-8 h-8 rounded-br-lg bg-red-600 dark:bg-red-800 group-hover:bg-red-700 dark:group-hover:bg-red-900 transition-colors duration-300 transform rotate-45 origin-bottom-right group-hover:scale-110">
      <div class="absolute inset-0 w-full h-full bg-orange-400 dark:bg-orange-600 opacity-30 transform -translate-x-1 -translate-y-1 rounded-br-lg"></div>
    </div>

    <!-- Subtle Grain/Texture Overlay (Pseudo-element-like via nested div) -->
    <div class="absolute inset-0 opacity-10 bg-repeat" style="background-image: url('data:image/svg+xml,%3Csvg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000000" fill-opacity="0.1" fill-rule="evenodd"%3E%3Cpath d="M5 0h1L0 6V5zM6 5v1H0v-1z"/%3E%3C/g%3E%3C/svg%3E');"></div>
  </button>
</div>

Monospace_Developer_TOC

A complex, responsive Table of Contents component with a monospace/developer aesthetic, jewel tone color scheme, optimized for documentation and knowledge base sites, featuring dark mode support.

Open Preview

                <div class="font-mono bg-stone-50 text-gray-800 dark:bg-stone-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl border border-stone-200 dark:border-stone-800 transition-colors duration-300">
  <h2 class="text-xl sm:text-2xl font-bold mb-4 border-b-2 border-emerald-600 pb-2 text-emerald-700 dark:text-emerald-500 flex items-center">
    <svg class="w-6 h-6 mr-2 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
    </svg>
    Table of Contents
  </h2>
  <nav class="">
    <ul class="space-y-2 text-sm sm:text-base">
      <li class="group">
        <a href="#section-1" class="flex items-center text-emerald-700 dark:text-emerald-500 hover:text-emerald-500 dark:hover:text-emerald-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-emerald-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-emerald-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">1. Introduction to Project Atlas</span>
        </a>
        <ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-emerald-400 dark:border-emerald-700 pl-4">
          <li><a href="#section-1-1" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-emerald-500">1.1. Overview and Goals</a></li>
          <li><a href="#section-1-2" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-emerald-500">1.2. Key Features</a></li>
        </ul>
      </li>
      <li class="group">
        <a href="#section-2" class="flex items-center text-sapphire-700 dark:text-sapphire-500 hover:text-sapphire-500 dark:hover:text-sapphire-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-sapphire-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-sapphire-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-sapphire-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">2. Getting Started</span>
        </a>
        <ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-sapphire-400 dark:border-sapphire-700 pl-4">
          <li><a href="#section-2-1" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-sapphire-500">2.1. Installation Guide</a></li>
          <li><a href="#section-2-2" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-sapphire-500">2.2. Configuration Settings</a></li>
          <li><a href="#section-2-3" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-sapphire-500">2.3. Running Your First Query</a></li>
        </ul>
      </li>
      <li class="group">
        <a href="#section-3" class="flex items-center text-ruby-700 dark:text-ruby-500 hover:text-ruby-500 dark:hover:text-ruby-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-ruby-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-ruby-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">3. Advanced Topics</span>
        </a>
        <ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-ruby-400 dark:border-ruby-700 pl-4">
          <li><a href="#section-3-1" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.1. API Reference</a></li>
          <li><a href="#section-3-2" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.2. Performance Optimization</a></li>
          <li><a href="#section-3-3" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.3. Extending Functionality</a></li>
          <li><a href="#section-3-4" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.4. Troubleshooting Common Issues</a></li>
        </ul>
      </li>
      <li class="group">
        <a href="#section-4" class="flex items-center text-purple-700 dark:text-purple-500 hover:text-purple-500 dark:hover:text-purple-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-purple-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-purple-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">4. Contributing</span>
        </a>
        <ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-purple-400 dark:border-purple-700 pl-4">
          <li><a href="#section-4-1" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-purple-500">4.1. How to Submit a Pull Request</a></li>
          <li><a href="#section-4-2" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-purple-500">4.2. Code of Conduct</a></li>
        </ul>
      </li>
      <li class="group">
        <a href="#section-5" class="flex items-center text-teal-700 dark:text-teal-500 hover:text-teal-500 dark:hover:text-teal-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-purple-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-teal-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">5. Legal & Licensing</span>
        </a>
      </li>
    </ul>
  </nav>
  <div class="mt-6 pt-4 border-t-2 border-slate-300 dark:border-slate-700 text-xs text-gray-500 dark:text-gray-400 flex items-center justify-between">
    <span>Documentation Version: <span class="text-emerald-600 dark:text-emerald-400">1.0.3</span></span>
    <a href="#top" class="inline-flex items-center hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
      <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
      </svg>
      Back to Top
    </a>
  </div>
</div>

<style>
  /* Custom Tailwind colors for jewel tones */
  .text-emerald-700 { color: #047857; } /* green-700 */
  .text-emerald-500 { color: #10B981; } /* green-500 */
  .text-emerald-300 { color: #6EE7B7; } /* green-300 */
  .bg-emerald-600 { background-color: #059669; }
  .border-emerald-600 { border-color: #059669; }
  .border-emerald-400 { border-color: #34D399; }
  .hover\:bg-emerald-100:hover { background-color: #D1FAE5; }
  .focus\:ring-emerald-500:focus { --tw-ring-color: #10B981; }

  .text-sapphire-700 { color: #1D4ED8; } /* blue-700 */
  .text-sapphire-500 { color: #3B82F6; } /* blue-500 */
  .text-sapphire-300 { color: #93C5FD; } /* blue-300 */
  .bg-sapphire-600 { background-color: #2563EB; }
  .border-sapphire-400 { border-color: #60A5FA; }
  .hover\:bg-sapphire-100:hover { background-color: #DBEAFE; }
  .focus\:ring-sapphire-500:focus { --tw-ring-color: #3B82F6; }

  .text-ruby-700 { color: #B91C1C; } /* red-700 */
  .text-ruby-500 { color: #EF4444; } /* red-500 */
  .text-ruby-300 { color: #FCA5A5; } /* red-300 */
  .bg-ruby-600 { background-color: #DC2626; }
  .border-ruby-400 { border-color: #F87171; }
  .hover\:bg-ruby-100:hover { background-color: #FEE2E2; }
  .focus\:ring-ruby-500:focus { --tw-ring-color: #EF4444; }

  .text-purple-700 { color: #6D28D9; } /* violet-700 */
  .text-purple-500 { color: #8B5CF6; } /* violet-500 */
  .text-purple-300 { color: #C4B5FD; } /* violet-300 */
  .bg-purple-600 { background-color: #7C3AED; }
  .border-purple-400 { border-color: #A78BFA; }
  .hover\:bg-purple-100:hover { background-color: #EDE9FE; }
  .focus\:ring-purple-500:focus { --tw-ring-color: #8B5CF6; }

  .text-teal-700 { color: #0F766E; } /* teal-700 */
  .text-teal-500 { color: #14B8A6; } /* teal-500 */
  .text-teal-300 { color: #5EEAD4; } /* teal-300 */
  .bg-teal-600 { background-color: #0D9488; }
  .border-teal-400 { border-color: #2DD4BF; }

  /* Dark mode custom colors adjustments (optional, but good for fine-tuning) */
  .dark\:text-emerald-500 { color: #10B981; }
  .dark\:text-emerald-300 { color: #6EE7B7; }
  .dark\:border-emerald-700 { border-color: #047857; }
  .dark\:hover\:bg-stone-800:hover { background-color: #292524; }

  .dark\:text-sapphire-500 { color: #3B82F6; }
  .dark\:text-sapphire-300 { color: #93C5FD; }
  .dark\:border-sapphire-700 { border-color: #1D4ED8; }

  .dark\:text-ruby-500 { color: #EF4444; }
  .dark\:text-ruby-300 { color: #FCA5A5; }
  .dark\:border-ruby-700 { border-color: #B91C1C; }

  .dark\:text-purple-500 { color: #8B5CF6; }
  .dark\:text-purple-300 { color: #C4B5FD; }
  .dark\:border-purple-700 { border-color: #6D28D9; }
  
  .dark\:text-teal-500 { color: #14B8A6; }

  /* Animations */
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
  }
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
</style>

1 ... 5 6 7 8 9 ... 315

Search Components

Categories

All Components