Search Components

All Components

Browse all available Tailwind CSS components

Table of Contents Component

A simple, vibrant, and responsive Table of Contents component with a 3D design feel, suitable for travel/tourism websites, including dark mode support.

Open Preview

                <div class="p-4 md:p-8 lg:p-12 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-sans">

  <nav class="w-full max-w-sm lg:max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform perspective-1000 rotateX-3 animate-fade-in-up transition-all duration-300 hover:shadow-2xl dark:shadow-sky-900 dark:shadow-md" style="transform-style: preserve-3d;">
    <div class="p-6 lg:p-8 bg-gradient-to-r from-purple-600 via-pink-600 to-yellow-500 dark:from-purple-800 dark:via-pink-800 dark:to-yellow-700 text-white shadow-md transform translateZ-20 relative z-10 rounded-t-3xl">
      <h2 class="text-2xl lg:text-3xl font-extrabold tracking-tight drop-shadow-lg text-center">
        Your Adventure Guide
      </h2>
      <p class="text-sm lg:text-base text-gray-100 mt-1 opacity-90 text-center">
        Jump to your next destination.
      </p>
    </div>

    <ul class="p-6 lg:p-8 space-y-4 lg:space-y-5 relative z-0 before:absolute before:left-10 before:top-0 before:bottom-0 before:w-1 before:bg-gradient-to-b before:from-purple-300 before:via-pink-300 before:to-yellow-300 dark:before:from-purple-700 dark:before:via-pink-700 dark:before:to-yellow-600 before:rounded-full before:shadow-inner">

      <li class="relative group">
        <a href="#overview" class="block p-4 rounded-xl transform perspective-600 transition-all duration-300 bg-white dark:bg-gray-700 hover:bg-purple-50 dark:hover:bg-gray-600 shadow-md group-hover:shadow-lg group-hover:-translate-y-1 group-hover:translateZ-10 group-hover:rotateX-2 hover:scale-[1.01] flex items-center">
          <span class="relative z-10 w-9 h-9 lg:w-10 lg:h-10 flex-shrink-0 bg-purple-500 dark:bg-purple-600 text-white rounded-full flex items-center justify-center font-bold text-lg lg:text-xl transform -translate-x-10 group-hover:translate-x-0 transition-transform duration-300 shadow-lg group-hover:shadow-xl">
            1
          </span>
          <div class="ml-4 text-gray-800 dark:text-gray-100 flex-grow">
            <h3 class="font-semibold text-lg lg:text-xl">Overview</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm lg:text-base">Explore the highlights.</p>
          </div>
          <svg class="w-6 h-6 lg:w-7 lg:h-7 text-purple-400 dark:text-purple-300 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors" 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>
      </li>

      <li class="relative group">
        <a href="#destinations" class="block p-4 rounded-xl transform perspective-600 transition-all duration-300 bg-white dark:bg-gray-700 hover:bg-pink-50 dark:hover:bg-gray-600 shadow-md group-hover:shadow-lg group-hover:-translate-y-1 group-hover:translateZ-10 group-hover:rotateX-2 hover:scale-[1.01] flex items-center">
          <span class="relative z-10 w-9 h-9 lg:w-10 lg:h-10 flex-shrink-0 bg-pink-500 dark:bg-pink-600 text-white rounded-full flex items-center justify-center font-bold text-lg lg:text-xl transform -translate-x-10 group-hover:translate-x-0 transition-transform duration-300 shadow-lg group-hover:shadow-xl">
            2
          </span>
          <div class="ml-4 text-gray-800 dark:text-gray-100 flex-grow">
            <h3 class="font-semibold text-lg lg:text-xl">Top Destinations</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm lg:text-base">Find your next journey.</p>
          </div>
          <svg class="w-6 h-6 lg:w-7 lg:h-7 text-pink-400 dark:text-pink-300 group-hover:text-pink-600 dark:group-hover:text-pink-400 transition-colors" 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>
      </li>

      <li class="relative group">
        <a href="#activities" class="block p-4 rounded-xl transform perspective-600 transition-all duration-300 bg-white dark:bg-gray-700 hover:bg-yellow-50 dark:hover:bg-gray-600 shadow-md group-hover:shadow-lg group-hover:-translate-y-1 group-hover:translateZ-10 group-hover:rotateX-2 hover:scale-[1.01] flex items-center">
          <span class="relative z-10 w-9 h-9 lg:w-10 lg:h-10 flex-shrink-0 bg-yellow-500 dark:bg-yellow-600 text-white rounded-full flex items-center justify-center font-bold text-lg lg:text-xl transform -translate-x-10 group-hover:translate-x-0 transition-transform duration-300 shadow-lg group-hover:shadow-xl">
            3
          </span>
          <div class="ml-4 text-gray-800 dark:text-gray-100 flex-grow">
            <h3 class="font-semibold text-lg lg:text-xl">Activities Guide</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm lg:text-base">Fun things to do.</p>
          </div>
          <svg class="w-6 h-6 lg:w-7 lg:h-7 text-yellow-400 dark:text-yellow-300 group-hover:text-yellow-600 dark:group-hover:text-yellow-400 transition-colors" 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>
      </li>

      <li class="relative group">
        <a href="#booking" class="block p-4 rounded-xl transform perspective-600 transition-all duration-300 bg-white dark:bg-gray-700 hover:bg-purple-50 dark:hover:bg-gray-600 shadow-md group-hover:shadow-lg group-hover:-translate-y-1 group-hover:translateZ-10 group-hover:rotateX-2 hover:scale-[1.01] flex items-center">
          <span class="relative z-10 w-9 h-9 lg:w-10 lg:h-10 flex-shrink-0 bg-purple-500 dark:bg-purple-600 text-white rounded-full flex items-center justify-center font-bold text-lg lg:text-xl transform -translate-x-10 group-hover:translate-x-0 transition-transform duration-300 shadow-lg group-hover:shadow-xl">
            4
          </span>
          <div class="ml-4 text-gray-800 dark:text-gray-100 flex-grow">
            <h3 class="font-semibold text-lg lg:text-xl">Booking Info</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm lg:text-base">Plan your trip.</p>
          </div>
          <svg class="w-6 h-6 lg:w-7 lg:h-7 text-purple-400 dark:text-purple-300 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors" 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>
      </li>

    </ul>

    <div class="p-6 lg:p-8 bg-gradient-to-r from-purple-600 via-pink-600 to-yellow-500 dark:from-purple-800 dark:via-pink-800 dark:to-yellow-700 text-white text-center text-sm lg:text-base rounded-b-3xl transform translateZ-20 relative z-10 shadow-inner mt-4">
      <p>Start your incredible journey today!</p>
    </div>
  </nav>

  <style>
    /* Custom 3D-like transformations (simulated using Tailwind's transform utilities) */
    .perspective-1000 { perspective: 1000px; }
    .rotateX-3 { transform: rotateX(3deg); }
    .perspective-600 { perspective: 600px; }
    .translateZ-10 { transform: translateZ(10px); }
    .translateZ-20 { transform: translateZ(20px); }
    .rotateX-2 { transform: rotateX(2deg); }

    /* Keyframe animation for initial fade-in and subtle 3D lift */
    @keyframes fade-in-up {
      from {
        opacity: 0;
        transform: translateY(20px) rotateX(10deg) scale(0.95);
      }
      to {
        opacity: 1;
        transform: translateY(0) rotateX(3deg) scale(1);
      }
    }

    .animate-fade-in-up {
      animation: fade-in-up 0.8s ease-out forwards;
    }

    /* Ensure smooth transitions for transform properties */
    .transform {
      transition-property: transform, background-color, box-shadow, color;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 300ms;
    }
  </style>
</div>

Neon_Sepia_Checkout_Form

A simple, responsive checkout form component with neon/glow effects and sepia/brown color scheme, designed for cryptocurrency/blockchain applications. Includes dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-stone-950 via-neutral-900 to-stone-950 p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans dark:from-black dark:via-gray-950 dark:to-black">
  <div class="w-full max-w-md bg-stone-900 rounded-lg shadow-xl border border-stone-800 dark:bg-gray-900 dark:border-gray-800 relative overflow-hidden">
    <div class="absolute inset-0 bg-amber-800/10 dark:bg-lime-500/10 transform scale-[3] blur-3xl opacity-20 dark:opacity-10 pointer-events-none animate-pulse-slow"></div>
    <div class="relative p-6 sm:p-8">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-amber-500 dark:text-lime-400 mb-6 text-center tracking-wide" style="text-shadow: 0 0 8px rgba(217, 119, 6, 0.6), 0 0 16px rgba(217, 119, 6, 0.4); dark:text-shadow: 0 0 8px rgba(132, 204, 22, 0.6), 0 0 16px rgba(132, 204, 22, 0.4);">
        Checkout
      </h2>

      <form class="space-y-4">
        <div>
          <label for="wallet-address" class="block text-sm font-medium text-amber-200 dark:text-lime-200 mb-1 leading-relaxed">
            Wallet Address
          </label>
          <input type="text" id="wallet-address" name="wallet-address" placeholder="0x..." class="w-full p-3 bg-stone-800 rounded-md border border-stone-700 focus:outline-none focus:ring-2 focus:ring-amber-600 dark:bg-gray-800 dark:border-gray-700 dark:focus:ring-lime-500 text-amber-100 dark:text-lime-100 placeholder-stone-400 dark:placeholder-gray-500 transition duration-300 ease-in-out glow-input">
        </div>

        <div>
          <label for="amount" class="block text-sm font-medium text-amber-200 dark:text-lime-200 mb-1 leading-relaxed">
            Amount (ETH)
          </label>
          <input type="number" id="amount" name="amount" step="0.001" placeholder="0.05" class="w-full p-3 bg-stone-800 rounded-md border border-stone-700 focus:outline-none focus:ring-2 focus:ring-amber-600 dark:bg-gray-800 dark:border-gray-700 dark:focus:ring-lime-500 text-amber-100 dark:text-lime-100 placeholder-stone-400 dark:placeholder-gray-500 transition duration-300 ease-in-out glow-input">
        </div>

        <!-- Hidden input for a minimal simple form -->
        <input type="hidden" name="currency" value="ETH">

        <button type="submit" class="w-full py-3 px-4 bg-amber-700 text-white font-semibold rounded-md shadow-lg
          hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-900
          dark:bg-lime-600 dark:hover:bg-lime-500 dark:focus:ring-lime-400 dark:focus:ring-offset-gray-900
          transition duration-300 ease-in-out transform hover:scale-105 active:scale-100 glow-button">
          Confirm Payment
        </button>
      </form>

      <p class="text-center text-xs text-stone-500 dark:text-gray-500 mt-6">
        By clicking 'Confirm Payment', you agree to our <a href="#" class="text-amber-400 hover:underline dark:text-lime-300">Terms of Service</a>.
      </p>
    </div>
  </div>

  <style>
    @keyframes pulse-slow {
      0%, 100% { transform: scale(3) blur(3rem) opacity(0.2); }
      50% { transform: scale(3.1) blur(3.5rem) opacity(0.25); }
    }
    .animate-pulse-slow { animation: pulse-slow 8s infinite ease-in-out; }
    .glow-input { box-shadow: 0 0 0px #d97706; transition: box-shadow 0.3s ease-in-out; }
    .glow-input:focus { box-shadow: 0 0 10px rgba(217, 119, 6, 0.7); }
    .dark .glow-input { box-shadow: none; }
    .dark .glow-input:focus { box-shadow: 0 0 10px rgba(132, 204, 22, 0.7); }
    .glow-button { box-shadow: 0 0 0px #d97706; transition: box-shadow 0.3s ease-in-out; }
    .glow-button:hover { box-shadow: 0 0 15px rgba(217, 119, 6, 0.8); }
    .dark .glow-button { box-shadow: none; }
    .dark .glow-button:hover { box-shadow: 0 0 1px rgba(132, 204, 22, 0.8); }
  </style>
</div>

Bauhaus Medical Table of Contents

A complex, responsive Table of Contents component for medical/healthcare applications, featuring a Bauhaus-inspired functional design with muted colors and dark mode support. Includes navigation, search, and section links.

Open Preview

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

  <!-- Outer Container with muted primary color accents -->
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
              border-t-4 border-l-4 border-yellow-500 dark:border-yellow-600
              md:border-t-8 md:border-l-8 md:border-yellow-500 dark:md:border-yellow-600">

    <!-- Header Section with strong geometric lines -->
    <div class="bg-blue-600 dark:bg-blue-800 text-white p-4 sm:p-6 lg:p-8
                relative overflow-hidden
                before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-gradient-to-br before:from-blue-700 before:to-transparent before:opacity-20 before:z-0
                after:content-[''] after:absolute after:bottom-0 after:right-0 after:w-full after:h-full after:bg-gradient-to-tl after:from-red-600 after:to-transparent after:opacity-10 after:z-0">
      <div class="relative z-10 flex flex-col sm:flex-row items-center justify-between">
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4 sm:mb-0
                   tracking-tight text-white dark:text-gray-50 flex items-center">
          <span class="block w-6 h-6 sm:w-8 sm:h-8 lg:w-10 lg:h-10 bg-red-500 dark:bg-red-600 mr-3 rounded-sm transform rotate-45"></span>
          Medical Index
        </h1>
        <div class="flex items-center space-x-3">
          <span class="text-sm italic opacity-80 hidden md:block">Last Updated: 2023-10-27</span>
          <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="Admin Avatar" class="w-10 h-10 rounded-full-lg border-2 border-white dark:border-gray-300 shadow-md">
        </div>
      </div>
    </div>

    <!-- Main Content Area: Search and Navigation -->
    <div class="p-4 sm:p-6 lg:p-8 grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

      <!-- Search and Filters Section -->
      <div class="md:col-span-1 border-r-4 border-gray-200 dark:border-gray-700 pr-0 md:pr-6 lg:pr-8 space-y-6">
        <div class="mb-4">
          <label for="search-toc" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Search Documentation</label>
          <div class="relative">
            <input type="text" id="search-toc" placeholder="Search diseases, treatments..." 
                   class="w-full p-3 pl-10 rounded-lg border-2 border-red-300 dark:border-red-600
                          bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100
                          focus:ring-blue-500 focus:border-blue-500 transition duration-200 ease-in-out
                          placeholder-gray-400 dark:placeholder-gray-500">
            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
          </div>
        </div>

        <!-- Filter Options with primary color toggles -->
        <div class="space-y-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Filters</h3>
          <div class="flex flex-wrap gap-3">
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100
                           hover:bg-blue-200 dark:hover:bg-blue-600 transition duration-200">All Topics</button>
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
                           hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Diseases</button>
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
                           hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Treatments</button>
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
                           hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Protocols</button>
            <button class="px-4 py-2 rounded-full text-sm font-medium
                           bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300
                           hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200">Diagnostics</button>
          </div>
        </div>

        <!-- Recent Updates Section -->
        <div class="mt-6">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Recent Updates</h3>
          <ul class="space-y-3">
            <li class="flex items-start">
              <span class="flex-shrink-0 w-2 h-2 bg-yellow-500 rounded-full mt-2 mr-2"></span>
              <a href="#" class="text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">New Guidelines for Diabetes Management</a>
            </li>
            <li class="flex items-start">
              <span class="flex-shrink-0 w-2 h-2 bg-red-500 rounded-full mt-2 mr-2"></span>
              <a href="#" class="text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Updated COVID-19 Vaccination Protocols</a>
            </li>
            <li class="flex items-start">
              <span class="flex-shrink-0 w-2 h-2 bg-gray-400 dark:bg-gray-500 rounded-full mt-2 mr-2"></span>
              <a href="#" class="text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Introduction to AI in Diagnostics</a>
            </li>
          </ul>
        </div>
      </div>

      <!-- Table of Contents Main Navigation -->
      <div class="md:col-span-2 space-y-8">

        <!-- Section 1: Core Medical Conditions -->
        <section>
          <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
            <span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
            Core Medical Conditions
          </h2>
          <ul class="space-y-3 pl-4 sm:pl-6">
            <li><a href="#cardiovascular" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Cardiovascular Diseases</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#hypertension" class="hover:text-blue-600 dark:hover:text-blue-400">Hypertension: Diagnosis & Management</a></li>
                <li><a href="#ischemic-heart-disease" class="hover:text-blue-600 dark:hover:text-blue-400">Ischemic Heart Disease</a></li>
                <li><a href="#arrhythmias" class="hover:text-blue-600 dark:hover:text-blue-400">Arrhythmias and ECG Interpretation</a></li>
              </ul>
            </li>
            <li><a href="#respiratory" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Respiratory Diseases</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#asthma" class="hover:text-blue-600 dark:hover:text-blue-400">Asthma and COPD</a></li>
                <li><a href="#pneumonia" class="hover:text-blue-600 dark:hover:text-blue-400">Pneumonia: Types & Treatment</a></li>
              </ul>
            </li>
            <li><a href="#endocrine" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Endocrine Disorders</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#diabetes-mellitus" class="hover:text-blue-600 dark:hover:text-blue-400">Diabetes Mellitus: Type 1 & 2</a></li>
                <li><a href="#thyroid-disorders" class="hover:text-blue-600 dark:hover:text-blue-400">Thyroid Disorders</a></li>
              </ul>
            </li>
          </ul>
        </section>

        <!-- Section 2: Medical Procedures & Diagnostics -->
        <section>
          <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
            <span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
            Medical Procedures & Diagnostics
          </h2>
          <ul class="space-y-3 pl-4 sm:pl-6">
            <li><a href="#surgical-techniques" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Surgical Techniques</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#minimally-invasive" class="hover:text-blue-600 dark:hover:text-blue-400">Minimally Invasive Surgery</a></li>
                <li><a href="#post-operative-care" class="hover:text-blue-600 dark:hover:text-blue-400">Post-Operative Care Protocols</a></li>
              </ul>
            </li>
            <li><a href="#imaging" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Medical Imaging</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#mri-ct-scans" class="hover:text-blue-600 dark:hover:text-blue-400">MRI & CT Scans Interpretation</a></li>
                <li><a href="#ultrasound" class="hover:text-blue-600 dark:hover:text-blue-400">Diagnostic Ultrasound</a></li>
              </ul>
            </li>
          </ul>
        </section>

        <!-- Section 3: Pharmacology & Therapeutics -->
        <section>
          <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
            <span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
            Pharmacology & Therapeutics
          </h2>
          <ul class="space-y-3 pl-4 sm:pl-6">
            <li><a href="#drug-classes" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Drug Classes & Mechanisms</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#antibiotics" class="hover:text-blue-600 dark:hover:text-blue-400">Antibiotics: Spectrum & Resistance</a></li>
                <li><a href="#analgesics" class="hover:text-blue-600 dark:hover:text-blue-400">Analgesics & Pain Management</a></li>
              </ul>
            </li>
            <li><a href="#vaccines" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Vaccines & Immunization</a>
              <ul class="pl-6 mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                <li><a href="#childhood-immunization" class="hover:text-blue-600 dark:hover:text-blue-400">Childhood Immunization Schedule</a></li>
              </ul>
            </li>
          </ul>
        </section>

        <!-- Section 4: Public Health & Epidemiology -->
        <section>
          <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 pb-2 border-b-2 border-red-400 dark:border-red-700 flex items-center">
            <span class="w-4 h-4 bg-blue-500 dark:bg-blue-600 mr-2 rounded-sm rotate-45"></span>
            Public Health & Epidemiology
          </h2>
          <ul class="space-y-3 pl-4 sm:pl-6">
            <li><a href="#disease-outbreaks" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Disease Outbreaks & Control</a></li>
            <li><a href="#preventative-medicine" class="text-lg text-blue-700 dark:text-blue-400 hover:text-red-600 dark:hover:text-red-500 transition-colors">Preventative Medicine Strategies</a></li>
          </ul>
        </section>

      </div>

    </div>

    <!-- Footer with simple branding -->
    <div class="bg-gray-100 dark:bg-gray-800 p-4 sm:p-6 lg:p-8 text-center text-gray-600 dark:text-gray-400 text-sm
                relative overflow-hidden
                before:content-[''] before:absolute before:bottom-0 before:left-0 before:w-full before:h-1 before:bg-yellow-500 dark:before:bg-yellow-600 before:z-0">
      <p class="relative z-10">&copy; 2023 Medical Knowledge Hub. All rights reserved.</p>
    </div>

  </div>

</div>

ArtDeco_Food_Restaurant_Progress_Indicators

Art Deco inspired progress indicators component for food/restaurant websites, featuring geometric patterns, luxurious styling, and earth tones. Complex interface with multiple steps and dark mode support.

Open Preview

                <div class="font-sans antialiased bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-4 sm:p-8 md:p-12 lg:p-16 min-h-screen">
  <div class="max-w-4xl mx-auto bg-stone-200 dark:bg-stone-800 shadow-xl rounded-lg overflow-hidden border border-stone-300 dark:border-stone-700">
    <!-- Header -->
    <div class="bg-gradient-to-br from-amber-800 to-amber-950 dark:from-amber-900 dark:to-stone-950 p-6 sm:p-8 text-center text-stone-100 relative overflow-hidden">
      <div class="absolute inset-0 bg-repeat opacity-10" 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.4\' fill-rule=\'evenodd\'%3E%3Cpath d=\'M5 0h1L0 6V5zM6 5v1H5z\'%3E%3C/path%3E%3C/g%3E%3C/svg%3E');"></div>
      <h1 class="text-3xl sm:text-4xl font-bold tracking-wider mb-2 text-stone-100 drop-shadow-md">Your Order Progress</h1>
      <p class="text-stone-200 text-lg">From Kitchen to Your Door</p>
    </div>

    <!-- Progress Steps Container -->
    <div class="p-6 sm:p-8 md:p-10 lg:p-12">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 relative">
        <!-- Horizontal Line for Desktop/Tablet -->
        <div class="hidden md:block absolute top-[25px] left-0 right-0 h-1 bg-stone-400 dark:bg-stone-600 mx-8 lg:mx-16"></div>

        <!-- Step 1: Order Placed -->
        <div class="flex flex-col items-center text-center relative z-10">
          <div class="w-12 h-12 sm:w-14 sm:h-14 bg-amber-700 dark:bg-amber-600 rounded-full flex items-center justify-center text-stone-100 font-bold text-2xl border-4 border-amber-500 dark:border-amber-400 shadow-lg">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
          </div>
          <p class="mt-3 text-sm sm:text-base font-semibold text-amber-700 dark:text-amber-300">Order Placed</p>
          <p class="text-xs sm:text-sm text-stone-600 dark:text-stone-400">10:30 AM</p>
        </div>

        <!-- Step 2: Preparing Order -->
        <div class="flex flex-col items-center text-center relative z-10">
          <div class="w-12 h-12 sm:w-14 sm:h-14 bg-amber-700 dark:bg-amber-600 rounded-full flex items-center justify-center text-stone-100 font-bold text-2xl border-4 border-amber-500 dark:border-amber-400 shadow-lg">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" 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="M17 20h-3a2 2 0 01-2-2V7a2 2 0 012-2h3a2 2 0 012 2v11a2 2 0 01-2 2z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20h3a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v11a2 2 0 002 2z"></path></svg>
          </div>
          <p class="mt-3 text-sm sm:text-base font-semibold text-amber-700 dark:text-amber-300">Preparing Order</p>
          <p class="text-xs sm:text-sm text-stone-600 dark:text-stone-400">10:45 AM</p>
        </div>

        <!-- Step 3: Out For Delivery -->
        <div class="flex flex-col items-center text-center relative z-10">
          <div class="w-12 h-12 sm:w-14 sm:h-14 bg-stone-500 dark:bg-stone-700 rounded-full flex items-center justify-center text-stone-100 font-bold text-2xl border-4 border-stone-400 dark:border-stone-600 shadow-lg opacity-70">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" 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 17l6-6-6-6"></path></svg>
          </div>
          <p class="mt-3 text-sm sm:text-base font-semibold text-stone-700 dark:text-stone-300 opacity-70">Out For Delivery</p>
          <p class="text-xs sm:text-sm text-stone-500 dark:text-stone-400"></p>
        </div>

        <!-- Step 4: Delivered -->
        <div class="flex flex-col items-center text-center relative z-10">
          <div class="w-12 h-12 sm:w-14 sm:h-14 bg-stone-500 dark:bg-stone-700 rounded-full flex items-center justify-center text-stone-100 font-bold text-2xl border-4 border-stone-400 dark:border-stone-600 shadow-lg opacity-70">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" 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 13l4 4L19 7"></path></svg>
          </div>
          <p class="mt-3 text-sm sm:text-base font-semibold text-stone-700 dark:text-stone-300 opacity-70">Delivered</p>
          <p class="text-xs sm:text-sm text-stone-500 dark:text-stone-400"></p>
        </div>

        <!-- Vertical Line for Mobile -->
        <div class="absolute inset-y-0 left-1/2 -translate-x-1/2 w-1 bg-stone-400 dark:bg-stone-600 md:hidden"></div>
      </div>
    </div>


    <!-- Delivery Details / Map Section -->
    <div class="bg-stone-300 dark:bg-stone-850 p-6 sm:p-8 md:p-10 lg:p-12 border-t-4 border-amber-800 dark:border-amber-900 border-dashed">
      <h2 class="text-xl sm:text-2xl font-bold text-amber-900 dark:text-amber-200 mb-6 text-center tracking-wide">Delivery Details</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- Driver Info Card -->
        <div class="bg-stone-100 dark:bg-stone-700 rounded-lg shadow-md border border-stone-300 dark:border-stone-600 p-6 flex flex-col items-center text-center md:items-start md:text-left">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Driver Avatar" class="w-24 h-24 rounded-full border-4 border-amber-600 dark:border-amber-400 mb-4 shadow-lg">
          <p class="text-lg font-semibold text-stone-800 dark:text-stone-200">Your Driver: John Doe</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">Estimated Arrival: 11:30 AM</p>
          <a href="tel:+1234567890" class="mt-4 px-5 py-2 bg-amber-700 dark:bg-amber-600 text-stone-100 rounded-lg shadow-md hover:bg-amber-800 dark:hover:bg-amber-500 transition duration-300 flex items-center">
            <svg class="w-5 h-5 mr-2" 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 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.134L9.349 14.45a14.001 14.001 0 007.443 7.443l1.815-.545a1 1 0 011.134-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
            Call Driver
          </a>
        </div>

        <!-- Map Placeholder -->
        <div class="bg-stone-100 dark:bg-stone-700 rounded-lg shadow-md border border-stone-300 dark:border-stone-600 p-2 overflow-hidden relative">
          <img src="https://picsum.photos/600/400?grayscale&random=2" alt="Map" class="w-full h-48 md:h-full object-cover rounded-md">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent flex items-end p-4 text-stone-100 font-semibold">
            Tracking Live...
          </div>
        </div>
      </div>
    </div>

    <!-- Decorative Footer -->
    <div class="bg-amber-800 dark:bg-amber-900 h-6 sm:h-8 md:h-10 relative overflow-hidden">
      <div class="absolute inset-0 bg-repeat opacity-10" 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.4\' fill-rule=\'evenodd\'%3E%3Cpath d=\'M5 0h1L0 6V5zM6 5v1H5z\'%3E%3C/path%3E%3C/g%3E%3C/svg%3E');"></div>
    </div>
  </div>
</div>

Heat Maps Component

A playful and fun heat map component for news and journalism websites, featuring bright, cheerful design with rounded elements and friendly aesthetics, using a corporate blue color scheme. Includes responsiveness and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-blue-50 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-blue-900 dark:text-blue-100 mb-4 sm:mb-6 lg:mb-8 text-center">
      Today's Hottest Topics
    </h2>
    <p class="text-lg text-blue-700 dark:text-blue-300 mb-8 sm:mb-10 lg:mb-12 text-center max-w-2xl mx-auto">
      Explore the most engaging and talked-about stories right now. The bigger the bubble, the more buzz it's generating!
    </p>

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

      <!-- Heat Map Item 1 -->
      <div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
        <div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-500 dark:bg-blue-600 scale-125 blur-xl"></div>
        <div class="relative z-10 text-center">
          <div class="w-32 h-32 sm:w-40 sm:h-40 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
            <span class="text-5xl sm:text-6xl font-bold text-blue-800 dark:text-blue-200">95%</span>
          </div>
          <h3 class="text-2xl sm:text-3xl font-bold text-blue-900 dark:text-blue-100 mb-2">Climate Solutions</h3>
          <p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">New report highlights renewable energy breakthroughs.</p>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
            Read More
            <svg class="ml-1 w-4 h-4" 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>
        </div>
      </div>

      <!-- Heat Map Item 2 -->
      <div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
        <div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-400 dark:bg-blue-500 scale-105 blur-xl"></div>
        <div class="relative z-10 text-center">
          <div class="w-24 h-24 sm:w-32 sm:h-32 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
            <span class="text-4xl sm:text-5xl font-bold text-blue-800 dark:text-blue-200">78%</span>
          </div>
          <h3 class="text-2xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">Global Economy Shift</h3>
          <p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">Markets react to emerging trade policies.</p>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
            Read More
            <svg class="ml-1 w-4 h-4" 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>
        </div>
      </div>

      <!-- Heat Map Item 3 -->
      <div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
        <div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-300 dark:bg-blue-400 scale-95 blur-xl"></div>
        <div class="relative z-10 text-center">
          <div class="w-20 h-20 sm:w-28 sm:h-28 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
            <span class="text-3xl sm:text-4xl font-bold text-blue-800 dark:text-blue-200">62%</span>
          </div>
          <h3 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">Tech Innovation Boom</h3>
          <p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">AI advancements reshape daily life.</p>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
            Read More
            <svg class="ml-1 w-4 h-4" 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>
        </div>
      </div>

      <!-- Heat Map Item 4 -->
      <div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
        <div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-200 dark:bg-blue-300 scale-90 blur-xl"></div>
        <div class="relative z-10 text-center">
          <div class="w-16 h-16 sm:w-24 sm:h-24 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
            <span class="text-2xl sm:text-3xl font-bold text-blue-800 dark:text-blue-200">45%</span>
          </div>
          <h3 class="text-xl sm:text-xl font-bold text-blue-900 dark:text-blue-100 mb-2">Health & Wellness</h3>
          <p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">New trends in mental health.</p>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
            Read More
            <svg class="ml-1 w-4 h-4" 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>
        </div>
      </div>

      <!-- Heat Map Item 5 -->
      <div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
        <div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-100 dark:bg-blue-200 scale-85 blur-xl"></div>
        <div class="relative z-10 text-center">
          <div class="w-12 h-12 sm:w-20 sm:h-20 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
            <span class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-200">28%</span>
          </div>
          <h3 class="text-lg sm:text-xl font-bold text-blue-900 dark:text-blue-100 mb-2">Space Exploration</h3>
          <p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">New missions planned for Mars.</p>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
            Read More
            <svg class="ml-1 w-4 h-4" 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>
        </div>
      </div>

      <!-- Heat Map Item 6 -->
      <div class="relative flex items-center justify-center p-6 rounded-3xl bg-white dark:bg-gray-800 shadow-xl transition-transform transform hover:scale-105 duration-300 ease-in-out">
        <div class="absolute inset-0 rounded-3xl opacity-20 bg-blue-50 dark:bg-blue-100 scale-80 blur-xl"></div>
        <div class="relative z-10 text-center">
          <div class="w-8 h-8 sm:w-16 sm:h-16 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-700 mx-auto mb-4 scale-animation">
            <span class="text-lg sm:text-xl font-bold text-blue-800 dark:text-blue-200">15%</span>
          </div>
          <h3 class="text-lg sm:text-xl font-bold text-blue-900 dark:text-blue-100 mb-2">Cultural Trends</h3>
          <p class="text-blue-700 dark:text-blue-300 text-sm sm:text-base">Popular music genres evolving.</p>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200">
            Read More
            <svg class="ml-1 w-4 h-4" 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>
        </div>
      </div>

    </div>

    <div class="mt-12 sm:mt-16 lg:mt-20 text-center">
      <a href="#" class="px-8 py-3 rounded-full bg-gradient-to-r from-blue-600 to-blue-700 text-white font-bold text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out dark:from-blue-700 dark:to-blue-800">
        Explore All Topics
      </a>
    </div>
  </div>
</div>

<style>
  /* This is a simple animation for the circles, typically done via JS for dynamic content, 
     but for a static HTML component, CSS animation can simulate a 'pulse' or 'grow' effect. */
  @keyframes scalePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }

  .scale-animation {
    animation: scalePulse 2s infinite ease-in-out;
  }
</style>

3D_Candy_SearchBox_Manufacturing

A responsive 3D-inspired search box component with candy/sweet colors, suitable for manufacturing/industrial applications, featuring a subtle shadow effect and interactive elements.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-pink-100 via-purple-100 to-blue-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-sans">
  <div class="relative w-full max-w-md mx-auto">
    <div class="absolute -inset-1 bg-gradient-to-r from-pink-400 via-purple-400 to-blue-400 rounded-3xl blur-xl opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt dark:from-pink-600 dark:via-purple-600 dark:to-blue-600"></div>
    <div class="relative p-6 rounded-3xl shadow-xl bg-white dark:bg-gray-800 border border-t-pink-200 border-l-purple-200 border-b-blue-200 border-r-green-200 dark:border-t-pink-700 dark:border-l-purple-700 dark:border-b-blue-700 dark:border-r-green-700 transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-center mb-6 text-pink-600 dark:text-pink-400 tracking-tight leading-tight drop-shadow-sm">Find Your <span class="text-purple-600 dark:text-purple-400">Components</span></h2>
      <div class="relative flex items-center w-full shadow-inner rounded-full bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-blue-600 transition-all duration-300 focus-within:shadow-xl focus-within:ring-2 focus-within:ring-purple-300 focus-within:border-purple-400 dark:focus-within:ring-purple-700 dark:focus-within:border-purple-500">
        <svg class="h-6 w-6 ml-4 text-purple-400 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
        <input type="text" placeholder="Search for parts, models, or documentation..." class="flex-grow py-3 px-4 text-lg bg-transparent border-none outline-none placeholder-blue-300 dark:placeholder-gray-500 text-gray-800 dark:text-gray-100 rounded-full pr-12" aria-label="Search for components">
        <button type="button" class="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-full bg-gradient-to-r from-pink-500 to-purple-500 text-white shadow-lg sm:hover:from-pink-600 sm:hover:to-purple-600 active:scale-95 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300 dark:focus:ring-pink-700" aria-label="Initiate search">
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8c1.332 0 2.593-.576 3.49-1.576l4.053 4.054a1 1 0 001.414-1.414l-4.053-4.054C13.576 10.593 13 9.332 13 8a5 5 0 00-10 0zM12 8a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
      <p class="mt-6 text-center text-sm text-gray-500 dark:text-gray-400">
        Need assistance? <a href="#" class="text-purple-600 dark:text-purple-400 font-semibold hover:underline transition-colors duration-200">Contact support</a> or browse our <a href="#" class="text-blue-600 dark:text-blue-400 font-semibold hover:underline transition-colors duration-200">knowledge base</a>.
      </p>
    </div>
  </div>
</div>

Art Deco Back to Top Button

A 'Back to Top' button component with an Art Deco design, featuring geometric patterns and warm sunset colors, suitable for dating/social platforms. It includes a rich, interactive style and supports dark mode.

Open Preview

                <div class="fixed bottom-8 right-8 z-50">
  <a href="#" class="group relative flex items-center justify-center p-0.5 overflow-hidden text-2xl font-bold text-white shadow-lg focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-800 transition-all duration-300 hover:scale-105 active:scale-95 transform rotate-0 hover:rotate-3">
    <span class="absolute inset-0 bg-gradient-to-br from-orange-400 via-red-500 to-yellow-600 dark:from-orange-700 dark:via-red-800 dark:to-yellow-900 opacity-90 group-hover:opacity-100 transition-opacity duration-300 filter blur-sm group-hover:blur-none"></span>
    <span class="absolute inset-0 bg-[repeating-linear-gradient(45deg,_transparent_0,_transparent_5px,_rgba(255,255,255,0.1)_5px,_rgba(255,255,255,0.1)_10px)] dark:bg-[repeating-linear-gradient(45deg,_transparent_0,_transparent_5px,_rgba(0,0,0,0.2)_5px,_rgba(0,0,0,0.2)_10px)] opacity-30 group-hover:opacity-50 transition-opacity duration-300 transform group-hover:scale-110 group-hover:rotate-12"></span>
    <span class="relative flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-tl from-orange-600 to-red-600 dark:from-red-900 dark:to-orange-900 rounded-full group-hover:rounded-2xl transition-all duration-300 overflow-hidden shadow-inner shadow-orange-900/50 dark:shadow-red-950/50 group-hover:shadow-lg group-hover:shadow-orange-900/70 dark:group-hover:shadow-red-950/70">
      <span class="absolute inset-0 border-4 border-yellow-300 dark:border-yellow-700 rounded-full group-hover:rounded-2xl transition-all duration-300 opacity-60 group-hover:opacity-100"></span>
      <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white dark:text-gray-200 transform group-hover:-translate-y-1 transition-transform duration-300" 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>
      <div class="absolute bottom-1 right-1 w-4 h-4 bg-yellow-300 dark:bg-yellow-700 rounded-full blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </span>
  </a>
</div>

Cyberpunk Music Player Layout

A cyberpunk-themed music player layout with futuristic neon aesthetics, dark backgrounds, and vibrant accent colors, designed for responsiveness and dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-950 text-purple-200 dark:bg-black p-4 md:p-8 font-mono relative overflow-hidden">

  <!-- Background Grid & Neon Lines -->
  <div class="absolute inset-0 z-0 opacity-10">
    <div class="absolute inset-0 bg-grid-pattern"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="w-full h-px bg-current-600 animate-pulse-light"></div>
    </div>
    <div class="absolute inset-0 flex items-center justify-center rotate-90">
      <div class="w-full h-px bg-current-600 animate-pulse-light animation-delay-1"></div>
    </div>
  </div>

  <!-- Main Content Area -->
  <div class="relative z-10 max-w-7xl mx-auto flex flex-col lg:flex-row gap-6 lg:gap-8">

    <!-- Left Sidebar: Navigation & Playlist -->
    <aside class="w-full lg:w-1/4 flex-shrink-0 bg-gray-900/70 backdrop-blur-sm border border-purple-800/50 rounded-lg p-6 shadow-neon-sm animate-fade-in-up">
      <div class="text-2xl font-bold text-neon-green mb-6 border-b border-purple-700 pb-4">CYBER BEATS</div>

      <nav class="mb-8">
        <ul class="space-y-4">
          <li><a href="#" class="flex items-center gap-3 text-lg text-purple-300 hover:text-neon-pink transition duration-300 transform hover:translate-x-1"><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="M9 19V6l12-3v13M9 19c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zm-4 0V3m0 6h.01"></path></svg>Discover</a></li>
          <li><a href="#" class="flex items-center gap-3 text-lg text-purple-300 hover:text-neon-pink transition duration-300 transform hover:translate-x-1"><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="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Profile</a></li>
          <li><a href="#" class="flex items-center gap-3 text-lg text-neon-pink"><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="M9 19V6l12-3v13M9 19c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zm-4 0V3m0 6h.01"></path></svg>My Tracks</a></li>
          <li><a href="#" class="flex items-center gap-3 text-lg text-purple-300 hover:text-neon-pink transition duration-300 transform hover:translate-x-1"><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="M8 14v3m4-3v3m4-3v3M18 10h4M4 10h4m-4 6h4m4 0h4m-4 6h4M3 6h18L1 6h22M12 4l-4 4-2-2m-2-2V4h6v2h2v4h4v2h2v2h2v4h-2V6L12 4z"></path></svg>Playlists</a></li>
        </ul>
      </nav>

      <div>
        <h3 class="text-xl font-semibold text-purple-300 mb-4">Current Playlist</h3>
        <ul class="space-y-3">
          <li class="flex items-center justify-between text-base group cursor-pointer hover:bg-purple-800/30 rounded-md p-2 transition duration-200">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/seed/track1/50/50" alt="Track Cover" class="w-10 h-10 object-cover rounded-md border border-neon-green/50">
              <div class="flex-1">
                <p class="text-purple-100 group-hover:text-neon-green font-medium">Neon Genesis</p>
                <p class="text-purple-400 text-sm">Synthwave Rider</p>
              </div>
            </div>
            <span class="text-purple-500 text-sm">3:45</span>
          </li>
          <li class="flex items-center justify-between text-base group cursor-pointer hover:bg-purple-800/30 rounded-md p-2 transition duration-200 bg-purple-900/50 border border-neon-pink/50">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/seed/track2/50/50" alt="Track Cover" class="w-10 h-10 object-cover rounded-md border border-neon-pink/70">
              <div class="flex-1">
                <p class="text-neon-pink font-bold">Cyberpunk Serenade</p>
                <p class="text-purple-300 text-sm">Future Glitch</p>
              </div>
            </div>
            <span class="text-neon-pink text-sm">4:10</span>
          </li>
          <li class="flex items-center justify-between text-base group cursor-pointer hover:bg-purple-800/30 rounded-md p-2 transition duration-200">
            <div class="flex items-center gap-3">
              <img src="https://picsum.photos/seed/track3/50/50" alt="Track Cover" class="w-10 h-10 object-cover rounded-md border border-neon-green/50">
              <div class="flex-1">
                <p class="text-purple-100 group-hover:text-neon-green font-medium">Data Stream</p>
                <p class="text-purple-400 text-sm">Artificial Echoes</p>
              </div>
            </div>
            <span class="text-purple-500 text-sm">2:58</span>
          </li>
        </ul>
      </div>
    </aside>

    <!-- Main Content: Featured Tracks & Albums -->
    <main class="flex-1 w-full lg:w-3/4">
      <div class="bg-gray-900/70 backdrop-blur-sm border border-neon-green/50 rounded-lg p-6 shadow-neon-lg mb-6 animate-fade-in-right">
        <h2 class="text-3xl font-bold text-neon-green mb-6 border-b border-neon-green/70 pb-4">Featured Drops_</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <!-- Featured Track 1 -->
          <article class="bg-gray-800/60 p-4 rounded-md border border-purple-700/50 shadow-inner-neon hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/seed/album1/300/200" alt="Album Art" class="w-full h-40 object-cover rounded-md mb-4 border border-neon-green/60 shadow-md-neon-green">
            <h3 class="text-xl font-semibold text-purple-100 mb-1">Electric Dreamscape</h3>
            <p class="text-purple-400 text-sm mb-3">by Voxel Echoes</p>
            <button class="w-full bg-neon-pink text-gray-950 py-2 px-4 rounded-md font-bold hover:bg-neon-pink/80 transition duration-300 shadow-neon-button relative overflow-hidden group">
              <span class="absolute inset-0 bg-neon-pink/50 transform scale-x-0 origin-left group-hover:scale-x-100 transition-transform duration-500"></span>
              <span class="relative z-10">_Listen Now</span>
            </button>
          </article>
          <!-- Featured Track 2 -->
          <article class="bg-gray-800/60 p-4 rounded-md border border-purple-700/50 shadow-inner-neon hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/seed/album2/300/200" alt="Album Art" class="w-full h-40 object-cover rounded-md mb-4 border border-neon-green/60 shadow-md-neon-green">
            <h3 class="text-xl font-semibold text-purple-100 mb-1">Binary Reverie</h3>
            <p class="text-purple-400 text-sm mb-3">by Ghost in the Wires</p>
            <button class="w-full bg-neon-pink text-gray-950 py-2 px-4 rounded-md font-bold hover:bg-neon-pink/80 transition duration-300 shadow-neon-button relative overflow-hidden group">
              <span class="absolute inset-0 bg-neon-pink/50 transform scale-x-0 origin-left group-hover:scale-x-100 transition-transform duration-500"></span>
              <span class="relative z-10">_Listen Now</span>
            </button>
          </article>
          <!-- Featured Track 3 -->
          <article class="bg-gray-800/60 p-4 rounded-md border border-purple-700/50 shadow-inner-neon hover:scale-105 transition-transform duration-300 lg:col-span-1 md:col-span-2">
            <img src="https://picsum.photos/seed/album3/300/200" alt="Album Art" class="w-full h-40 object-cover rounded-md mb-4 border border-neon-green/60 shadow-md-neon-green">
            <h3 class="text-xl font-semibold text-purple-100 mb-1">Chrome Drizzle</h3>
            <p class="text-purple-400 text-sm mb-3">by Synapse Drive</p>
            <button class="w-full bg-neon-pink text-gray-950 py-2 px-4 rounded-md font-bold hover:bg-neon-pink/80 transition duration-300 shadow-neon-button relative overflow-hidden group">
              <span class="absolute inset-0 bg-neon-pink/50 transform scale-x-0 origin-left group-hover:scale-x-100 transition-transform duration-500"></span>
              <span class="relative z-10">_Listen Now</span>
            </button>
          </article>
        </div>
      </div>

      <div class="bg-gray-900/70 backdrop-blur-sm border border-neon-blue/50 rounded-lg p-6 shadow-neon-lg animate-fade-in-right animation-delay-2">
        <h2 class="text-3xl font-bold text-neon-blue mb-6 border-b border-neon-blue/70 pb-4">New Albums_</h2>
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
          <!-- Album 1 -->
          <a href="#" class="block group">
            <img src="https://picsum.photos/seed/new1/200/200" alt="Album Cover" class="w-full aspect-square object-cover rounded-md mb-2 border border-purple-700/50 group-hover:border-neon-blue transition-colors duration-300 shadow-album-inner">
            <p class="text-purple-100 text-sm lg:text-base font-semibold group-hover:text-neon-blue">Circuit Breaker</p>
            <p class="text-purple-400 text-xs lg:text-sm">Cybernoise Collective</p>
          </a>
          <!-- Album 2 -->
          <a href="#" class="block group">
            <img src="https://picsum.photos/seed/new2/200/200" alt="Album Cover" class="w-full aspect-square object-cover rounded-md mb-2 border border-purple-700/50 group-hover:border-neon-blue transition-colors duration-300 shadow-album-inner">
            <p class="text-purple-100 text-sm lg:text-base font-semibold group-hover:text-neon-blue">Electric Oasis</p>
            <p class="text-purple-400 text-xs lg:text-sm">Rhythm Processor</p>
          </a>
          <!-- Album 3 -->
          <a href="#" class="block group">
            <img src="https://picsum.photos/seed/new3/200/200" alt="Album Cover" class="w-full aspect-square object-cover rounded-md mb-2 border border-purple-700/50 group-hover:border-neon-blue transition-colors duration-300 shadow-album-inner">
            <p class="text-purple-100 text-sm lg:text-base font-semibold group-hover:text-neon-blue">Neural Flux</p>
            <p class="text-purple-400 text-xs lg:text-sm">Cognitive Drive</p>
          </a>
          <!-- Album 4 -->
          <a href="#" class="block group">
            <img src="https://picsum.photos/seed/new4/200/200" alt="Album Cover" class="w-full aspect-square object-cover rounded-md mb-2 border border-purple-700/50 group-hover:border-neon-blue transition-colors duration-300 shadow-album-inner">
            <p class="text-purple-100 text-sm lg:text-base font-semibold group-hover:text-neon-blue">Data Echoes</p>
            <p class="text-purple-400 text-xs lg:text-sm">Glitch Symphony</p>
          </a>
        </div>
      </div>
    </main>
  </div>

  <!-- Audio Player Bar (Fixed Bottom) -->
  <footer class="fixed bottom-0 left-0 right-0 z-20 bg-gray-900/90 backdrop-blur-lg border-t border-neon-pink/50 pt-4 pb-6 px-4 md:px-8 shadow-player-top animate-fade-in-down">
    <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
      <div class="flex items-center gap-4 flex-grow">
        <img src="https://picsum.photos/seed/current/60/60" alt="Current Track Cover" class="w-16 h-16 object-cover rounded-md border border-neon-pink/70 shadow-md-neon-pink-sm">
        <div class="flex flex-col">
          <p class="text-purple-100 text-lg font-bold">Cyberpunk Serenade</p>
          <p class="text-purple-300 text-sm">Future Glitch</p>
        </div>
      </div>

      <div class="flex flex-col flex-grow w-full md:w-auto md:max-w-md gap-2 mt-4 md:mt-0">
        <div class="flex items-center justify-center gap-6 text-neon-green">
          <button aria-label="Previous"><svg class="w-8 h-8 hover:text-neon-pink transition-colors" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 10.5V13.5C6 14.3284 6.67157 15 7.5 15H17C17.8284 15 18.5 14.3284 18.5 13.5V10.5C18.5 9.67157 17.8284 9 17 9H7.5C6.67157 9 6 9.67157 6 10.5Z" fill="none" stroke="currentColor" stroke-width="1.5" transform="rotate(180 12 12)"/><path d="M15 15V9L9 12L15 15Z"></path></svg></button>
          <button aria-label="Play"><svg class="w-12 h-12 text-neon-pink hover:text-neon-green transition-colors" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5V19L19 12L8 5Z"></path></svg></button>
          <button aria-label="Next"><svg class="w-8 h-8 hover:text-neon-pink transition-colors" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 10.5V13.5C6 14.3284 6.67157 15 7.5 15H17C17.8284 15 18.5 14.3284 18.5 13.5V10.5C18.5 9.67157 17.8284 9 17 9H7.5C6.67157 9 6 9.67157 6 10.5Z" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M9 15V9L15 12L9 15Z"></path></svg></button>
        </div>
        <div class="flex items-center gap-3 text-purple-400 text-sm">
          <span>0:45</span>
          <div class="flex-1 bg-purple-800 rounded-full h-2 relative border border-purple-700">
            <div class="bg-neon-pink h-2 rounded-full w-1/4" style="width: 25%"></div>
            <div class="absolute -right-1 top-1/2 -translate-y-1/2 w-4 h-4 bg-neon-pink rounded-full shadow-neon-pink-md animate-pulse-slight"></div>
          </div>
          <span>4:10</span>
        </div>
       </div>

      <div class="flex items-center gap-4 mt-2 md:mt-0">
        <button aria-label="Volume"><svg class="w-6 h-6 text-neon-green hover:text-neon-pink transition-colors" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14 3.23V5.29C16.89 6.15 19 8.83 19 12C19 15.17 16.89 17.85 14 18.71V20.77C18.01 19.89 21 16.28 21 12C21 7.72 18.01 4.11 14 3.23ZM16.5 12C16.5 10.23 15.63 8.79 14.28 7.96L14 8.2V15.8L14.28 16.03C15.63 15.21 16.5 13.77 16.5 12ZM1 10V14H5L11 20V4L5 10H1Z"></path></svg></button>
        <div class="w-24 bg-purple-800 rounded-full h-2 relative border border-purple-700">
          <div class="bg-neon-blue h-2 rounded-full w-3/4" style="width: 75%"></div>
          <div class="absolute -right-1 top-1/2 -translate-y-1/2 w-4 h-4 bg-neon-blue rounded-full shadow-neon-blue-md animate-pulse-slight animation-delay-3"></div>
        </div>
      </div>
    </div>
  </footer>

  <!-- Custom Tailwind CSS & Keyframes (for demo, would be in tailwind.config.js or CSS file) -->
  <style>
    @keyframes pulse-light {
      0%, 100% { opacity: 0.2; }
      50% { opacity: 0.8; }
    }

    @keyframes pulse-slight {
      0%, 100% { transform: translate(-50%, -50%) scale(1); }
      50% { transform: translate(-50%, -50%) scale(1.1); }
    }

    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fade-in-right {
      from { opacity: 0; transform: translateX(20px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes fade-in-down {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .animate-pulse-light { animation: pulse-light 3s infinite ease-in-out; }
    .animate-pulse-slight { animation: pulse-slight 1.5s infinite ease-in-out; }
    .animate-fade-in-up { animation: fade-in-up 0.7s ease-out forwards; }
    .animate-fade-in-right { animation: fade-in-right 0.7s ease-out forwards; }
    .animate-fade-in-down { animation: fade-in-down 0.7s ease-out forwards; }

    .animation-delay-1 { animation-delay: 0.2s; }
    .animation-delay-2 { animation-delay: 0.4s; }
    .animation-delay-3 { animation-delay: 0.6s; }

    .bg-grid-pattern {
        background-image: linear-gradient(to right, rgba(128, 0, 128, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(128, 0, 128, 0.1) 1px, transparent 1px);
        background-size: 40px 40px;
    }

    .text-neon-green { color: #39FF14; text-shadow: 0 0 5px #39FF14, 0 0 10px #39FF14; }
    .text-neon-pink { color: #FF00FF; text-shadow: 0 0 5px rgba(255, 0, 255, 0.8), 0 0 10px rgba(255, 0, 255, 0.6); }
    .text-neon-blue { color: #00FFFF; text-shadow: 0 0 5px rgba(0, 255, 255, 0.8), 0 0 10px rgba(0, 255, 255, 0.6); }

    .shadow-neon-sm { box-shadow: 0 0 8px rgba(128, 0, 128, 0.6), 0 0 15px rgba(128, 0, 128, 0.4) inset; }
    .shadow-neon-lg { box-shadow: 0 0 15px rgba(57, 255, 20, 0.6), 0 0 25px rgba(57, 255, 20, 0.4) inset; }
    .shadow-player-top { box-shadow: 0 -8px 20px rgba(255, 0, 255, 0.5); }
    .shadow-inner-neon { box-shadow: inset 0 0 8px rgba(128, 0, 128, 0.4); }
    .shadow-neon-button { box-shadow: 0 0 10px rgba(255, 0, 255, 0.7); }
    .shadow-md-neon-green { box-shadow: 0 0 8px rgba(57, 255, 20, 0.6); }
    .shadow-md-neon-pink-sm { box-shadow: 0 0 6px rgba(255, 0, 255, 0.7); }
    .shadow-neon-blue-md { box-shadow: 0 0 8px rgba(0, 255, 255, 0.7); }
    .shadow-album-inner { box-shadow: inset 0 0 5px rgba(128, 0, 128, 0.3); }

    /* Dark mode adjustments - some colors are already dark, but ensuring contrast */
    .dark .bg-gray-950 { background-color: #0d0d0d; } /* Even darker background */
    .dark .bg-gray-900\/70 { background-color: rgba(10, 10, 10, 0.7); }
    .dark .bg-gray-800\/60 { background-color: rgba(20, 20, 20, 0.6); }
    .dark .text-purple-200 { color: #E0BBE4; }
    .dark .text-purple-300 { color: #C9AFD9; }
    .dark .text-purple-400 { color: #A881B5; }
    .dark .text-purple-500 { color: #8A609B; }
    .dark .text-purple-100 { color: #F0DFF2; }

  </style>
</div>

Playful_Booking_Calendar

A playful and cheerful monochromatic booking calendar component with rounded elements, suitable for appointment and reservation systems. It's responsive and supports dark mode.

Open Preview

                <div class="p-4 sm:p-8 bg-purple-50 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out">
    <div class="p-6 sm:p-8 bg-purple-200 dark:bg-purple-900 flex justify-between items-center rounded-t-3xl">
      <button class="p-2 sm:p-3 rounded-full bg-purple-500 dark:bg-purple-700 text-white hover:bg-purple-600 dark:hover:bg-purple-800 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600 transition-all duration-200 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="M15 19l-7-7 7-7"></path></svg>
      </button>
      <h2 class="text-xl sm:text-2xl font-extrabold text-purple-900 dark:text-purple-100">November 2023</h2>
      <button class="p-2 sm:p-3 rounded-full bg-purple-500 dark:bg-purple-700 text-white hover:bg-purple-600 dark:hover:bg-purple-800 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600 transition-all duration-200 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="M9 5l7 7-7 7"></path></svg>
      </button>
    </div>

    <div class="grid grid-cols-7 text-center text-sm sm:text-base font-semibold text-purple-700 dark:text-purple-300 p-4 sm:p-6 sm:pb-4">
      <div>Sun</div>
      <div>Mon</div>
      <div>Tue</div>
      <div>Wed</div>
      <div>Thu</div>
      <div>Fri</div>
      <div>Sat</div>
    </div>

    <div class="grid grid-cols-7 gap-2 sm:gap-4 p-4 sm:p-6 pt-0">
      <!-- Placeholder for previous month's days -->
      <div class="text-purple-300 dark:text-purple-600 p-2 sm:p-3 rounded-xl flex items-center justify-center text-sm">29</div>
      <div class="text-purple-300 dark:text-purple-600 p-2 sm:p-3 rounded-xl flex items-center justify-center text-sm">30</div>
      <div class="text-purple-300 dark:text-purple-600 p-2 sm:p-3 rounded-xl flex items-center justify-center text-sm">31</div>

      <!-- Current month's days -->
      <button aria-label="Select November 1st" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">1</button>
      <button aria-label="Select November 2nd" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">2</button>
      <button aria-label="Select November 3rd" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-500 dark:bg-purple-600 text-white dark:text-white transform scale-105 shadow-md transition-all duration-200 ease-in-out flex items-center justify-center text-base font-bold focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">3</button>
      <button aria-label="Select November 4th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">4</button>

      <!-- Example: Available days -->
      <button aria-label="Select November 5th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">5</button>
      <button aria-label="Select November 6th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">6</button>
      
      <!-- Example: Highlighted day with an event indicator -->
      <button aria-label="Select November 7th" class="relative p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
          7
          <span class="absolute bottom-1 right-1 sm:bottom-2 sm:right-2 w-2 h-2 sm:w-2.5 sm:h-2.5 bg-purple-500 rounded-full"></span>
      </button>

      <!-- Remaining days -->
      <button aria-label="Select November 8th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">8</button>
      <button aria-label="Select November 9th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">9</button>
      <button aria-label="Select November 10th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">10</button>
      <button aria-label="Select November 11th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">11</button>

      <button aria-label="Select November 12th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">12</button>
      <button aria-label="Select November 13th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">13</button>
      <button aria-label="Select November 14th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">14</button>
      <button aria-label="Select November 15th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">15</button>
      <button aria-label="Select November 16th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">16</button>
      <button aria-label="Select November 17th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">17</button>
      <button aria-label="Select November 18th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">18</button>

      <button aria-label="Select November 19th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">19</button>
      <button aria-label="Select November 20th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">20</button>
      <button aria-label="Select November 21st" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">21</button>
      <button aria-label="Select November 22nd" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">22</button>
      <button aria-label="Select November 23rd" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">23</button>
      <button aria-label="Select November 24th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">24</button>
      <button aria-label="Select November 25th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">25</button>

      <button aria-label="Select November 26th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">26</button>
      <button aria-label="Select November 27th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">27</button>
      <button aria-label="Select November 28th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">28</button>
      <button aria-label="Select November 29th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">29</button>
      <button aria-label="Select November 30th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">30</button>

      <!-- Placeholder for next month's days -->
      <div class="text-purple-300 dark:text-purple-600 p-2 sm:p-3 rounded-xl flex items-center justify-center text-sm">1</div>
      <div class="text-purple-300 dark:text-purple-600 p-2 sm:p-3 rounded-xl flex items-center justify-center text-sm">2</div>
    </div>

    <div class="p-6 sm:p-8 pt-0">
      <h3 class="text-lg sm:text-xl font-bold text-purple-800 dark:text-purple-200 mb-4">Available Slots for Nov 3rd:</h3>
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-4">
        <button class="py-2 px-3 sm:py-3 sm:px-4 rounded-xl bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 font-semibold hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
          9:00 AM
        </button>
        <button class="py-2 px-3 sm:py-3 sm:px-4 rounded-xl bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 font-semibold hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
          10:00 AM
        </button>
        <button class="py-2 px-3 sm:py-3 sm:px-4 rounded-xl bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 font-semibold hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
          11:00 AM
        </button>
        <button class="py-2 px-3 sm:py-3 sm:px-4 rounded-xl bg-purple-500 dark:bg-purple-700 text-white font-bold transform scale-105 shadow-md transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
          1:00 PM
        </button>
        <button class="py-2 px-3 sm:py-3 sm:px-4 rounded-xl bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 font-semibold hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out opacity-70 cursor-not-allowed">
          2:00 PM
        </button>
        <button class="py-2 px-3 sm:py-3 sm:px-4 rounded-xl bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 font-semibold hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
          3:00 PM
        </button>
      </div>
    </div>

    <div class="p-6 sm:p-8 pt-0 flex justify-end">
      <button class="py-3 px-6 sm:py-4 sm:px-8 rounded-full bg-purple-600 dark:bg-purple-700 text-white text-base sm:text-lg font-bold shadow-lg hover:bg-purple-700 dark:hover:bg-purple-800 transform hover:scale-105 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
        Confirm Booking
      </button>
    </div>
  </div>
</div>

Playful Maps Component for Gaming

A simple, playful, and responsive map component suitable for gaming websites, featuring bright jewel tones, rounded elements, and dark mode support.

Open Preview

                <div class="p-4 sm:p-8 bg-gradient-to-br from-emerald-100 to-teal-100 dark:from-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-gradient-to-br from-purple-200 to-indigo-200 dark:from-purple-900 dark:to-indigo-950 rounded-3xl shadow-2xl p-6 sm:p-8 transform hover:scale-105 transition duration-300 ease-in-out border-4 border-white dark:border-gray-700 overflow-hidden">
    <div class="flex flex-col md:flex-row gap-6 sm:gap-8 items-center">
      <div class="flex-shrink-0 w-full md:w-1/2 p-2 bg-white dark:bg-gray-800 rounded-2xl shadow-lg transform hover:rotate-2 transition duration-200 ease-in-out">
        <img src="https://picsum.photos/600/400?random=1" alt="Game Map Screenshot" class="w-full h-auto rounded-xl object-cover border-2 border-indigo-400 dark:border-indigo-600 shadow-md">
      </div>
      <div class="flex-grow text-center md:text-left">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-indigo-800 dark:text-indigo-300 mb-3 sm:mb-4 leading-tight tracking-tight drop-shadow-lg">
          Explore <span class="text-fuchsia-600 dark:text-fuchsia-400">Mystic</span> Realms
        </h2>
        <p class="text-lg sm:text-xl text-indigo-700 dark:text-indigo-200 mb-6 sm:mb-8 max-w-lg mx-auto md:mx-0">
          Embark on epic quests and discover hidden treasures across vibrant landscapes. Your next adventure awaits!
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
          <button class="px-8 py-3 bg-fuchsia-500 hover:bg-fuchsia-600 text-white rounded-full font-bold text-lg shadow-lg transform hover:scale-105 hover:rotate-1 transition duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-fuchsia-700">
            View All Maps
          </button>
          <button class="px-8 py-3 bg-emerald-500 hover:bg-emerald-600 text-white rounded-full font-bold text-lg shadow-lg transform hover:scale-105 hover:-rotate-1 transition duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700">
            Start Adventure
          </button>
        </div>
      </div>
    </div>
    <div class="mt-8 sm:mt-10 pt-6 border-t-2 border-indigo-300 dark:border-indigo-800 text-center">
      <h3 class="text-xl sm:text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Popular Zones</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6">
        <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md transform hover:translate-y-1 transition duration-200 ease-in-out border-2 border-purple-300 dark:border-purple-700 group cursor-pointer">
          <img src="https://picsum.photos/100/100?random=2" alt="Zone 1" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full mx-auto mb-2 object-cover border-2 border-emerald-400 dark:border-emerald-600 group-hover:scale-110 transition duration-200">
          <p class="text-sm sm:text-base font-semibold text-indigo-700 dark:text-indigo-200">Sunken City</p>
        </div>
        <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md transform hover:translate-y-1 transition duration-200 ease-in-out border-2 border-purple-300 dark:border-purple-700 group cursor-pointer">
          <img src="https://picsum.photos/100/100?random=3" alt="Zone 2" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full mx-auto mb-2 object-cover border-2 border-emerald-400 dark:border-emerald-600 group-hover:scale-110 transition duration-200">
          <p class="text-sm sm:text-base font-semibold text-indigo-700 dark:text-indigo-200">Dragon's Peak</p>
        </div>
        <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md transform hover:translate-y-1 transition duration-200 ease-in-out border-2 border-purple-300 dark:border-purple-700 group cursor-pointer">
          <img src="https://picsum.photos/100/100?random=4" alt="Zone 3" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full mx-auto mb-2 object-cover border-2 border-emerald-400 dark:border-emerald-600 group-hover:scale-110 transition duration-200">
          <p class="text-sm sm:text-base font-semibold text-indigo-700 dark:text-indigo-200">Whispering Woods</p>
        </div>
        <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md transform hover:translate-y-1 transition duration-200 ease-in-out border-2 border-purple-300 dark:border-purple-700 group cursor-pointer">
          <img src="https://picsum.photos/100/100?random=5" alt="Zone 4" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full mx-auto mb-2 object-cover border-2 border-emerald-400 dark:border-emerald-600 group-hover:scale-110 transition duration-200">
          <p class="text-sm sm:text-base font-semibold text-indigo-700 dark:text-indigo-200">Crimson Wastes</p>
        </div>
      </div>
      <div class="mt-6">
        <a href="#" class="inline-flex items-center text-indigo-700 dark:text-indigo-300 hover:text-emerald-500 dark:hover:text-emerald-400 font-semibold text-md sm:text-lg transition-colors duration-200">
          See All Zones
          <svg class="ml-2 w-4 h-4 sm:w-5 sm: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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
      </div>
    </div>
  </div>
</div>

1 ... 32 33 34 35 36 ... 335

Search Components

Categories

All Components