Search Components

All Components

Browse all available Tailwind CSS components

Monospace_Developer_Autumn_Rating_System_Component

A complex, monospace-inspired rating system component with autumn colors for industrial and manufacturing applications. Features clean design, multiple interactive elements, full responsiveness, and dark mode support.

Open Preview

                <div class="font-['JetBrains_Mono',_monospace] bg-gray-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 md:p-8 flex items-center justify-center">
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300">
    <div class="bg-amber-800 dark:bg-amber-900 p-4 sm:p-6 flex items-center justify-between border-b border-amber-900 dark:border-amber-700">
      <h2 class="text-xl sm:text-2xl font-bold text-white tracking-wide">System Performance Rating</h2>
      <div class="flex items-center space-x-2">
        <svg class="w-6 h-6 text-white" 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.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M16.364 16.364l.707.707M12 21v-1m-4.673-1h4.673M3 12H2m1.636-6.364l.707-.707m0 12.728l-.707.707M6.707 6.707l-.707-.707m12.728 0l-.707.707M17 12a5 5 0 11-10 0 5 5 0 0110 0z"></path></svg>
        <span class="text-sm sm:text-base text-white opacity-75">v1.2.5</span>
      </div>
    </div>

    <div class="p-4 sm:p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="md:col-span-1 bg-gray-100 dark:bg-gray-700 rounded-md p-4 space-y-4 border border-gray-200 dark:border-gray-600 shadow-inner">
        <h3 class="text-lg font-bold text-gray-800 dark:text-gray-100 mb-2">Overall Score:</h3>
        <div class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-600">
          <span class="text-5xl font-extrabold text-amber-700 dark:text-amber-400">4.7</span>
          <span class="text-xl text-gray-500 dark:text-gray-400">/5</span>
        </div>

        <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
          <svg class="w-5 h-5 text-amber-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <span class="text-sm">Based on 124 reviews</span>
        </div>

        <div class="pt-4 border-t border-gray-200 dark:border-gray-600">
          <p class="mb-2 text-gray-700 dark:text-gray-300 font-bold text-sm">Key Metrics Breakdown:</p>
          <div class="space-y-1 text-gray-600 dark:text-gray-400 text-xs">
            <div class="flex justify-between items-center">
              <span>Efficiency:</span>
              <span class="text-green-600 dark:text-green-400">A+</span>
            </div>
            <div class="flex justify-between items-center">
              <span>Reliability:</span>
              <span class="text-green-600 dark:text-green-400">A</span>
            </div>
            <div class="flex justify-between items-center">
              <span>Maintenance Cost:</span>
              <span class="text-red-600 dark:text-red-400">C-</span>
            </div>
            <div class="flex justify-between items-center">
              <span>Adaptability:</span>
              <span class="text-blue-600 dark:text-blue-400">B+</span>
            </div>
          </div>
        </div>
      </div>

      <div class="md:col-span-2 space-y-6">
        <div class="">
          <h3 class="text-lg font-bold text-gray-800 dark:text-gray-100 mb-4">Rate This System:</h3>
          <div class="flex items-center space-x-1 sm:space-x-2 text-2xl sm:text-3xl text-gray-300 dark:text-gray-600">
            <svg class="w-8 h-8 sm:w-10 sm:h-10 cursor-pointer hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <svg class="w-8 h-8 sm:w-10 sm:h-10 cursor-pointer hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <svg class="w-8 h-8 sm:w-10 sm:h-10 cursor-pointer hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <svg class="w-8 h-8 sm:w-10 sm:h-10 cursor-pointer hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <svg class="w-8 h-8 sm:w-10 sm:h-10 cursor-pointer hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          </div>
        </div>

        <div class="flex flex-col space-y-4">
          <div>
            <label for="comments" class="block text-sm font-bold text-gray-800 dark:text-gray-100 mb-2">Comments:</label>
            <textarea id="comments" rows="4" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 transition-colors duration-200 resize-y placeholder-gray-400 dark:placeholder-gray-500" placeholder="Share your thoughts on the system's performance, strengths, or areas for improvement..."></textarea>
          </div>
          <div>
            <label for="recommendation" class="block text-sm font-bold text-gray-800 dark:text-gray-100 mb-2">Would you recommend this system?</label>
            <div class="flex items-center space-x-4">
              <label class="inline-flex items-center">
                <input type="radio" name="recommendation" value="yes" class="form-radio h-4 w-4 text-green-600 focus:ring-green-500 dark:focus:ring-green-400 border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700">
                <span class="ml-2 text-gray-700 dark:text-gray-200">Yes</span>
              </label>
              <label class="inline-flex items-center">
                <input type="radio" name="recommendation" value="no" class="form-radio h-4 w-4 text-red-600 focus:ring-red-500 dark:focus:ring-red-400 border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700">
                <span class="ml-2 text-gray-700 dark:text-gray-200">No</span>
              </label>
              <label class="inline-flex items-center">
                <input type="radio" name="recommendation" value="maybe" class="form-radio h-4 w-4 text-amber-600 focus:ring-amber-500 dark:focus:ring-amber-400 border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700">
                <span class="ml-2 text-gray-700 dark:text-gray-200">Maybe</span>
              </label>
            </div>
          </div>
          <div class="pt-4 flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 border-t border-gray-200 dark:border-gray-600">
            <button type="submit" class="flex-1 w-full sm:w-auto bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 transition-colors duration-200 text-base sm:text-lg tracking-wide shadow-md">
              Submit Rating
            </button>
            <button type="button" class="flex-1 w-full sm:w-auto bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-100 font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-base sm:text-lg tracking-wide shadow-md">
              Cancel
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-amber-700 dark:bg-amber-800 p-4 sm:p-6 text-center text-white text-xs sm:text-sm border-t border-amber-900 dark:border-amber-700">
      <p>&lt;/END_OF_TRANSMISSION&gt; System ID: M-2023-ALPHA</p>
    </div>
  </div>
</div>

Event_Gallery_Component

A responsive gallery component for event and conference websites, featuring jewel tones, color gradients, smooth transitions, and dark mode support. It showcases event highlights or speaker images in a visually engaging grid.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-800 to-indigo-900 text-white py-12 px-4 sm:px-6 lg:px-8 dark:from-gray-900 dark:to-black">
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-12">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 via-sapphire-500 to-ruby-600 dark:from-emerald-300 dark:via-sapphire-400 dark:to-ruby-500 pb-2">
        Event Highlights
      </h2>
      <p class="text-lg sm:text-xl text-indigo-200 dark:text-gray-400 leading-relaxed max-w-3xl mx-auto">
        Relive the moments and explore the vibrant atmosphere of our past events. From insightful keynotes to engaging workshops, witness the energy that defines us.
      </p>
    </div>

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

      <!-- Gallery Item 1 -->
      <div class="relative overflow-hidden rounded-xl shadow-2xl group transform transition-all duration-500 hover:scale-105 hover:shadow-emerald-500/50 dark:hover:shadow-emerald-700/50">
        <img src="https://picsum.photos/id/1015/600/400" alt="Event Moment 1" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-500">
          <h3 class="text-xl font-semibold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-emerald-300 to-cyan-400 dark:from-emerald-200 dark:to-cyan-300">Keynote Address</h3>
          <p class="text-sm text-gray-200 dark:text-gray-300 mb-4">Inspiring words from industry leaders, setting the stage for innovation.</p>
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Speaker Avatar" class="w-9 h-9 rounded-full border-2 border-emerald-400">
            <span class="text-sm text-emerald-200 dark:text-emerald-300">John Doe</span>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-full px-3 py-1 text-xs font-semibold uppercase text-white dark:bg-gray-800 dark:text-gray-300 dark:bg-opacity-50">Highlight</div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="relative overflow-hidden rounded-xl shadow-2xl group transform transition-all duration-500 hover:scale-105 hover:shadow-cyan-500/50 dark:hover:shadow-cyan-700/50">
        <img src="https://picsum.photos/id/1018/600/400" alt="Event Moment 2" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-500">
          <h3 class="text-xl font-semibold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 to-blue-400 dark:from-cyan-200 dark:to-blue-300">Networking Session</h3>
          <p class="text-sm text-gray-200 dark:text-gray-300 mb-4">Connecting minds and fostering collaborations among attendees.</p>
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Attendee Avatar" class="w-9 h-9 rounded-full border-2 border-cyan-400">
            <span class="text-sm text-cyan-200 dark:text-cyan-300">Sarah Lee</span>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-full px-3 py-1 text-xs font-semibold uppercase text-white dark:bg-gray-800 dark:text-gray-300 dark:bg-opacity-50">Connect</div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="relative overflow-hidden rounded-xl shadow-2xl group transform transition-all duration-500 hover:scale-105 hover:shadow-red-500/50 dark:hover:shadow-red-700/50">
        <img src="https://picsum.photos/id/1019/600/400" alt="Event Moment 3" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-500">
          <h3 class="text-xl font-semibold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-red-300 to-purple-400 dark:from-red-200 dark:to-purple-300">Interactive Workshop</h3>
          <p class="text-sm text-gray-200 dark:text-gray-300 mb-4">Hands-on learning and practical application of new skills.</p>
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Instructor Avatar" class="w-9 h-9 rounded-full border-2 border-red-400">
            <span class="text-sm text-red-200 dark:text-red-300">David Kim</span>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-full px-3 py-1 text-xs font-semibold uppercase text-white dark:bg-gray-800 dark:text-gray-300 dark:bg-opacity-50">Learn</div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="relative overflow-hidden rounded-xl shadow-2xl group transform transition-all duration-500 hover:scale-105 hover:shadow-indigo-500/50 dark:hover:shadow-indigo-700/50">
        <img src="https://picsum.photos/id/1025/600/400" alt="Event Moment 4" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-500">
          <h3 class="text-xl font-semibold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-indigo-300 to-pink-400 dark:from-indigo-200 dark:to-pink-300">Panel Discussion</h3>
          <p class="text-sm text-gray-200 dark:text-gray-300 mb-4">Expert insights and lively debates on future trends.</p>
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/66.jpg" alt="Panelist Avatar" class="w-9 h-9 rounded-full border-2 border-indigo-400">
            <span class="text-sm text-indigo-200 dark:text-indigo-300">Emily White</span>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-full px-3 py-1 text-xs font-semibold uppercase text-white dark:bg-gray-800 dark:text-gray-300 dark:bg-opacity-50">Discuss</div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="relative overflow-hidden rounded-xl shadow-2xl group transform transition-all duration-500 hover:scale-105 hover:shadow-purple-500/50 dark:hover:shadow-purple-700/50">
        <img src="https://picsum.photos/id/1035/600/400" alt="Event Moment 5" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-500">
          <h3 class="text-xl font-semibold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-purple-300 to-fuchsia-400 dark:from-purple-200 dark:to-fuchsia-300">Product Showcase</h3>
          <p class="text-sm text-gray-200 dark:text-gray-300 mb-4">Innovations unveiled and solutions demonstrated live.</p>
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Innovator Avatar" class="w-9 h-9 rounded-full border-2 border-purple-400">
            <span class="text-sm text-purple-200 dark:text-purple-300">Michael Green</span>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-full px-3 py-1 text-xs font-semibold uppercase text-white dark:bg-gray-800 dark:text-gray-300 dark:bg-opacity-50">Innovate</div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="relative overflow-hidden rounded-xl shadow-2xl group transform transition-all duration-500 hover:scale-105 hover:shadow-rose-500/50 dark:hover:shadow-rose-700/50">
        <img src="https://picsum.photos/id/1040/600/400" alt="Event Moment 6" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:scale-110">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-500"></div>
        <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-500">
          <h3 class="text-xl font-semibold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-rose-300 to-orange-400 dark:from-rose-200 dark:to-orange-300">Closing Ceremony</h3>
          <p class="text-sm text-gray-200 dark:text-gray-300 mb-4">A memorable conclusion celebrating achievements and looking forward.</p>
          <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Host Avatar" class="w-9 h-9 rounded-full border-2 border-rose-400">
            <span class="text-sm text-rose-200 dark:text-rose-300">Jessica Brown</span>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-full px-3 py-1 text-xs font-semibold uppercase text-white dark:bg-gray-800 dark:text-gray-300 dark:bg-opacity-50">Celebrate</div>
      </div>

    </div>

    <div class="text-center mt-16">
      <a href="#" class="inline-flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-full shadow-lg text-white bg-gradient-to-r from-emerald-500 to-indigo-600 transition-transform duration-300 hover:scale-105 hover:from-emerald-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:from-emerald-600 dark:to-indigo-700 dark:hover:from-emerald-700 dark:hover:to-indigo-800">
        View All Moments
        <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <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 fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.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" />
        </svg>
      </a>
    </div>
  </div>
</div>

Playful Entertainment Buttons

A set of playful and fun buttons designed for an entertainment or media platform, featuring muted/desaturated colors and rounded elements. Responsive and includes dark mode support.

Open Preview

                <div class="p-4 sm:p-8 md:p-12 min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-700 rounded-3xl shadow-xl p-6 sm:p-8 md:p-10 border border-gray-200 dark:border-gray-600 transition-all duration-300">
    <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-center mb-8 sm:mb-10 text-gray-800 dark:text-gray-100 leading-tight">
      Your Next Obsession Starts Here!
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 md:gap-8">
      
      <!-- Button 1: Stream Now -->
      <button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-purple-300 dark:bg-purple-600 text-white dark:text-purple-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-500 overflow-hidden">
        <span class="absolute inset-0 bg-transparent group-hover:bg-purple-400 dark:group-hover:bg-purple-700 opacity-50 rounded-full transition-all duration-300"></span>
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
        </svg>
        <span class="relative z-10 text-lg sm:text-xl">Stream Now</span>
      </button>

      <!-- Button 2: Discover More -->
      <button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-teal-300 dark:bg-teal-600 text-white dark:text-teal-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-500 overflow-hidden">
        <span class="absolute inset-0 bg-transparent group-hover:bg-teal-400 dark:group-hover:bg-teal-700 opacity-50 rounded-full transition-all duration-300"></span>
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <span class="relative z-10 text-lg sm:text-xl">Discover More</span>
      </button>

      <!-- Button 3: My Watchlist -->
      <button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-orange-300 dark:bg-orange-600 text-white dark:text-orange-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-500 overflow-hidden">
        <span class="absolute inset-0 bg-transparent group-hover:bg-orange-400 dark:group-hover:bg-orange-700 opacity-50 rounded-full transition-all duration-300"></span>
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z"></path>
        </svg>
        <span class="relative z-10 text-lg sm:text-xl">My Watchlist</span>
      </button>

      <!-- Button 4: Browse Genres -->
      <button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-rose-300 dark:bg-rose-600 text-white dark:text-rose-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-rose-300 dark:focus:ring-rose-500 overflow-hidden">
        <span class="absolute inset-0 bg-transparent group-hover:bg-rose-400 dark:group-hover:bg-rose-700 opacity-50 rounded-full transition-all duration-300"></span>
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
        </svg>
        <span class="relative z-10 text-lg sm:text-xl">Browse Genres</span>
      </button>

      <!-- Button 5: Recently Added -->
      <button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-sky-300 dark:bg-sky-600 text-white dark:text-sky-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-sky-300 dark:focus:ring-sky-500 overflow-hidden">
        <span class="absolute inset-0 bg-transparent group-hover:bg-sky-400 dark:group-hover:bg-sky-700 opacity-50 rounded-full transition-all duration-300"></span>
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
        </svg>
        <span class="relative z-10 text-lg sm:text-xl">Recently Added</span>
      </button>

      <!-- Button 6: Settings/Profile -->
      <button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-gray-300 dark:bg-gray-500 text-gray-800 dark:text-gray-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-400 overflow-hidden">
        <span class="absolute inset-0 bg-transparent group-hover:bg-gray-400 dark:group-hover:bg-gray-600 opacity-50 rounded-full transition-all duration-300"></span>
        <img class="h-8 w-8 sm:h-9 sm:w-9 rounded-full mr-2 sm:mr-3 object-cover shadow-inner" src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar">
        <span class="relative z-10 text-lg sm:text-xl">My Account</span>
      </button>

    </div>

    <div class="mt-10 sm:mt-12 text-center text-gray-600 dark:text-gray-300 text-sm sm:text-base">
      <p class="mb-2">Enjoy endless entertainment anywhere, anytime.</p>
      <p>&copy; <span id="current-year"></span> Your Entertainment Platform. All rights reserved.</p>
    </div>
  </div>
</div>

<script>
  document.getElementById('current-year').textContent = new Date().getFullYear();
</script>

Mega Menu Component - Neon Glow

A simple, responsive mega menu component with neon/glow effects, warm neutral colors, and dark mode support, suitable for booking/reservation systems.

Open Preview

                <nav class="bg-gradient-to-r from-stone-100 to-amber-50 dark:from-stone-900 dark:to-stone-800 p-4 shadow-sm font-sans relative">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-stone-800 dark:text-stone-100 text-2xl font-bold tracking-tight relative">
      GlowBook
      <span class="absolute inset-0 block rounded-full blur-sm opacity-50 bg-amber-300 dark:bg-amber-600 animate-pulse"></span>
    </a>
    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        Book Now
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        Services
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        About Us
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
      <a href="#" class="text-stone-600 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 text-lg font-medium relative group transition duration-300">
        Contact
        <span class="absolute inset-0 block rounded-full blur-sm opacity-0 group-hover:opacity-20 transition-opacity duration-300 bg-amber-300 dark:bg-amber-600"></span>
      </a>
    </div>
    <div class="md:hidden">
      <button aria-label="Toggle menu" class="text-stone-700 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 rounded p-1.5 focus:ring-offset-2 focus:ring-offset-stone-100 dark:focus:ring-offset-stone-900">
        <svg class="w-7 h-7" 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 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

Wishlist Component

A clean, trustworthy wishlist component designed for non-profit/charity organizations, featuring a triadic color scheme and full responsiveness with dark mode support.

Open Preview

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

  <div class="max-w-7xl mx-auto">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-center mb-8 sm:mb-12 text-blue-700 dark:text-blue-400">
      Your Impact Wishlist
    </h1>

    <p class="text-center text-lg mb-8 sm:mb-10 max-w-2xl mx-auto leading-relaxed text-gray-600 dark:text-gray-300">
      Every item on this wishlist represents a tangible way you can make a difference. Choose what resonates most with you.
    </p>

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

      <!-- Wishlist Item 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
        <img src="https://picsum.photos/id/1025/400/250" alt="Community Garden" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
        <div class="p-6 flex-grow">
          <h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Support a Community Garden</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
            Provide tools, seeds, and irrigation for a sustainable community garden that feeds local families and teaches valuable skills.
          </p>
          <div class="flex items-center justify-between text-base mb-4">
            <span class="font-medium text-green-700 dark:text-green-400">Goal: $500</span>
            <span class="text-yellow-600 dark:text-yellow-400 font-bold">$310 Raised</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 62%;"></div>
          </div>
        </div>
        <div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
            Contribute Now
          </button>
        </div>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
        <img src="https://picsum.photos/id/237/400/250" alt="School Supplies" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
        <div class="p-6 flex-grow">
          <h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Back-to-School Kits for Children</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
            Fund essential school supplies, backpacks, and learning materials for underprivileged students, setting them up for success.
          </p>
          <div class="flex items-center justify-between text-base mb-4">
            <span class="font-medium text-green-700 dark:text-green-400">Goal: $750</span>
            <span class="text-yellow-600 dark:text-yellow-400 font-bold">$150 Raised</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 20%;"></div>
          </div>
        </div>
        <div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
            Contribute Now
          </button>
        </div>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
        <img src="https://picsum.photos/id/292/400/250" alt="Medical Aid" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
        <div class="p-6 flex-grow">
          <h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Essential Medical Supplies</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
            Provide vital medicines, bandages, and hygiene kits to communities lacking access to basic healthcare.
          </p>
          <div class="flex items-center justify-between text-base mb-4">
            <span class="font-medium text-green-700 dark:text-green-400">Goal: $1200</span>
            <span class="text-yellow-600 dark:text-yellow-400 font-bold">$900 Raised</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 75%;"></div>
          </div>
        </div>
        <div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
            Contribute Now
          </button>
        </div>
      </div>

      <!-- Wishlist Item 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
        <img src="https://picsum.photos/id/1015/400/250" alt="Clean Water Access" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
        <div class="p-6 flex-grow">
          <h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Access to Clean Drinking Water</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
            Fund the drilling of new wells and water purification systems, bringing safe hydration to remote villages.
          </p>
          <div class="flex items-center justify-between text-base mb-4">
            <span class="font-medium text-green-700 dark:text-green-400">Goal: $2000</span>
            <span class="text-yellow-600 dark:text-yellow-400 font-bold">$1000 Raised</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 50%;"></div>
          </div>
        </div>
        <div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
            Contribute Now
          </button>
        </div>
      </div>

      <!-- Wishlist Item 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
        <img src="https://picsum.photos/id/1074/400/250" alt="Animal Shelter Support" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
        <div class="p-6 flex-grow">
          <h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Support for Animal Shelters</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
            Help provide food, veterinary care, and comfortable habitats for rescued animals awaiting adoption.
          </p>
          <div class="flex items-center justify-between text-base mb-4">
            <span class="font-medium text-green-700 dark:text-green-400">Goal: $600</span>
            <span class="text-yellow-600 dark:text-yellow-400 font-bold">$420 Raised</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 70%;"></div>
          </div>
        </div>
        <div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
            Contribute Now
          </button>
        </div>
      </div>

      <!-- Wishlist Item 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-xl">
        <img src="https://picsum.photos/id/1084/400/250" alt="Elderly Care" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
        <div class="p-6 flex-grow">
          <h3 class="text-xl font-semibold mb-2 text-blue-600 dark:text-blue-300">Warm Meals for Seniors</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">
            Provide nutritious, hot meals and friendly visits to elderly individuals who are homebound or facing food insecurity.
          </p>
          <div class="flex items-center justify-between text-base mb-4">
            <span class="font-medium text-green-700 dark:text-green-400">Goal: $900</span>
            <span class="text-yellow-600 dark:text-yellow-400 font-bold">$540 Raised</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
            <div class="bg-green-500 h-2.5 rounded-full" style="width: 60%;"></div>
          </div>
        </div>
        <div class="p-6 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-500 dark:hover:bg-blue-600">
            Contribute Now
          </button>
        </div>
      </div>

    </div>

    <div class="text-center mt-12 sm:mt-16">
      <a href="#" class="inline-block bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-full text-lg transition-colors duration-300 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 dark:bg-green-500 dark:hover:bg-green-600">
        Explore More Ways to Help
      </a>
    </div>
  </div>
</div>

Consulting_Services_Pricing_Table_Monospace_Pastel

A responsive pricing table component for consulting services, featuring a monospace/developer aesthetic with a pastel color scheme. Includes dark mode support and a clean layout suitable for displaying service tiers.

Open Preview

                <div class="font-mono py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-indigo-50 to-purple-50 text-slate-800 dark:from-slate-900 dark:to-gray-950 dark:text-gray-200">
  <div class="mx-auto max-w-7xl">
    <div class="text-center mb-12">
      <h2 class="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl text-slate-800 dark:text-purple-300">
        <span class="block">./consulting-services</span>
      </h2>
      <p class="mt-4 text-xl sm:text-2xl text-slate-600 dark:text-gray-400">
        Pick a service tier. We'll handle the rest.
      </p>
    </div>

    <div class="grid grid-cols-1 gap-8 md:grid-cols-3 lg:grid-cols-3">

      <!-- Basic Tier -->
      <div class="p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl ring-1 ring-gray-900/5 dark:ring-purple-700/50 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <h3 class="text-2xl font-bold tracking-tight text-indigo-600 dark:text-indigo-400 mb-4">Basic Package</h3>
        <p class="text-slate-500 dark:text-gray-400 mb-6">For individuals or small teams getting started.</p>
        <p class="mt-6 flex items-baseline justify-center sm:justify-start">
          <span class="text-5xl font-extrabold text-slate-800 dark:text-gray-100">$499</span>
          <span class="ml-1 text-xl font-medium text-slate-500 dark:text-gray-400">/project</span>
        </p>
        <ul role="list" class="mt-8 space-y-4 text-slate-600 dark:text-gray-300">
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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="M5 13l4 4L19 7"></path></svg>
            <span>Initial Consultation (2h)</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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="M5 13l4 4L19 7"></path></svg>
            <span>Basic Strategy Brief</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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="M5 13l4 4L19 7"></path></svg>
            <span>Email Support</span>
          </li>
        </ul>
        <a href="#" class="mt-10 block w-full rounded-md border border-transparent bg-indigo-600 px-6 py-3 text-center font-medium text-white shadow-sm hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 transition duration-300">
          Select Basic
        </a>
      </div>

      <!-- Pro Tier (Most Popular) -->
      <div class="relative p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl ring-2 ring-purple-500 dark:ring-purple-400 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="absolute -top-3 left-1/2 -translate-x-1/2 py-1 px-3 bg-purple-500 dark:bg-purple-600 text-white text-xs font-semibold uppercase rounded-full tracking-wide">Most Popular</div>
        <h3 class="text-2xl font-bold tracking-tight text-purple-600 dark:text-purple-400 mb-4">Pro Package</h3>
        <p class="text-slate-500 dark:text-gray-400 mb-6">Ideal for growing businesses requiring deeper insights.</p>
        <p class="mt-6 flex items-baseline justify-center sm:justify-start">
          <span class="text-5xl font-extrabold text-slate-800 dark:text-gray-100">$1299</span>
          <span class="ml-1 text-xl font-medium text-slate-500 dark:text-gray-400">/project</span>
        </p>
        <ul role="list" class="mt-8 space-y-4 text-slate-600 dark:text-gray-300">
          <li class="inline-flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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="M5 13l4 4L19 7"></path></svg>
            <span>Includes Basic Features</span>
          </li>
          <li class="inline-flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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="M5 13l4 4L19 7"></path></svg>
            <span>In-depth Analysis Report</span>
          </li>
          <li class="inline-flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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="M5 13l4 4L19 7"></path></svg>
            <span>Dedicated Consultant (20h)</span>
          </li>
          <li class="inline-flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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="M5 13l4 4L19 7"></path></svg>
            <span>Priority Support</span>
          </li>
        </ul>
        <a href="#" class="mt-10 block w-full rounded-md border border-transparent bg-purple-600 px-6 py-3 text-center font-medium text-white shadow-sm hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600 transition duration-300">
          Select Pro
        </a>
      </div>

      <!-- Enterprise Tier -->
      <div class="p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl ring-1 ring-gray-900/5 dark:ring-purple-700/50 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <h3 class="text-2xl font-bold tracking-tight text-rose-600 dark:text-rose-400 mb-4">Enterprise Scale</h3>
        <p class="text-slate-500 dark:text-gray-400 mb-6">For large organizations with complex needs.</p>
        <p class="mt-6 flex items-baseline justify-center sm:justify-start">
          <span class="text-5xl font-extrabold text-slate-800 dark:text-gray-100">Custom</span>
          <span class="ml-1 text-xl font-medium text-slate-500 dark:text-gray-400">/negotiable</span>
        </p>
        <ul role="list" class="mt-8 space-y-4 text-slate-600 dark:text-gray-300">
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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="M5 13l4 4L19 7"></path></svg>
            <span>Includes Pro Features</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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="M5 13l4 4L19 7"></path></svg>
            <span>Dedicated Project Manager</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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="M5 13l4 4L19 7"></path></svg>
            <span>On-site Workshops</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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="M5 13l4 4L19 7"></path></svg>
            <span>24/7 Premium Support</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 flex-shrink-0 text-emerald-500 dark:text-emerald-400 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="M5 13l4 4L19 7"></path></svg>
            <span>Custom Integrations</span>
          </li>
        </ul>
        <a href="#" class="mt-10 block w-full rounded-md border border-transparent bg-rose-600 px-6 py-3 text-center font-medium text-white shadow-sm hover:bg-rose-700 dark:bg-rose-500 dark:hover:bg-rose-600 transition duration-300">
          Contact Sales
        </a>
      </div>

    </div>
  </div>
</div>

3D_Marketplace_Dropdown_Menu

A complex, 3D-inspired dropdown menu component designed for marketplace platforms, featuring warm neutral colors, multi-level navigation, and full responsiveness with dark mode support. It incorporates depth and engagement through subtle shadows and transitions.

Open Preview

                <div class="relative inline-block text-left font-sans">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-850 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900 focus:ring-amber-500 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg active:scale-95" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Categories
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <!--
    Dropdown menu, show/hide based on menu state.

    Entering: "transition ease-out duration-200"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-150"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->
  <div class="absolute right-0 mt-2 w-72 md:w-96 origin-top-right bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 divide-y divide-gray-100 dark:divide-gray-800 rounded-md shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none transform scale-100 opacity-100 transition-all duration-300 ease-in-out z-50" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-0">
        <img src="https://picsum.photos/30/30?random=1" alt="Electronics icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Electronics
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-1">
        <img src="https://picsum.photos/30/30?random=2" alt="Fashion icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Fashion & Apparel
        <svg class="ml-auto h-4 w-4 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-2">
        <img src="https://picsum.photos/30/30?random=3" alt="Home & Garden icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Home & Garden
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-3">
        <img src="https://picsum.photos/30/30?random=4" alt="Books icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Books & Media
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-4">
        <img src="https://picsum.photos/30/30?random=5" alt="Sports icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Sports & Outdoors
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-5">
        <img src="https://picsum.photos/30/30?random=6" alt="Vehicles icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Vehicles
        <svg class="ml-auto h-4 w-4 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-6">All Categories</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-7">Sell on Marketplace</a>
    </div>
  </div>
</div>

Checkout Form Component

A responsive checkout form with black and white monochrome styling, a bright accent color, gradient transitions, and dark mode support, suitable for sports/fitness applications.

Open Preview

                <div class="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 flex items-center justify-center font-sans tracking-tight">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden md:flex
              transform transition-all duration-500 ease-in-out
              dark:shadow-2xl dark:shadow-purple-500/20">

    <!-- Left Section: Order Summary (Monochrome) -->
    <div class="md:w-1/2 p-8 md:p-12 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800
                flex flex-col justify-between transition-all duration-500 ease-out">
      <div>
        <h2 class="text-2xl md:text-3xl font-extrabold mb-6 text-gray-900 dark:text-white capitalize leading-tight">
          Your Order Summary
        </h2>
        
        <ul class="space-y-4 mb-8">
          <li class="flex justify-between items-center pb-2 border-b border-gray-300 dark:border-gray-600">
            <span class="text-gray-700 dark:text-gray-300 text-lg">Fitness Membership (1 Month)</span>
            <span class="text-gray-900 dark:text-white font-semibold text-lg">$49.99</span>
          </li>
          <li class="flex justify-between items-center pb-2 border-b border-gray-300 dark:border-gray-600">
            <span class="text-gray-700 dark:text-gray-300 text-lg">Personal Training (3 sessions)</span>
            <span class="text-gray-900 dark:text-white font-semibold text-lg">$149.00</span>
          </li>
          <li class="flex justify-between items-center pb-2 border-b border-gray-300 dark:border-gray-600">
            <span class="text-gray-700 dark:text-gray-300 text-lg">Sports Drink Bundle</span>
            <span class="text-gray-900 dark:text-white font-semibold text-lg">$19.50</span>
          </li>
        </ul>

        <div class="flex justify-between items-center pt-4 border-t-2 border-gray-400 dark:border-gray-500">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-200">Total</span>
          <span class="text-2xl font-extrabold text-array-900 dark:text-white">$218.49</span>
        </div>

        <p class="text-sm text-gray-500 dark:text-gray-400 mt-4 leading-relaxed">
          By completing your purchase, you agree to our <a href="#" class="text-gray-700 dark:text-gray-300 hover:underline">terms and conditions</a> and <a href="#" class="text-gray-700 dark:text-gray-300 hover:underline">privacy policy</a>.
        </p>
      </div>
    </div>

    <!-- Right Section: Payment Form (Accent) -->
    <div class="md:w-1/2 p-8 md:p-12 bg-gradient-to-tr from-purple-500 to-fuchsia-600 dark:from-purple-600 dark:to-fuchsia-700
                relative transition-all duration-500 ease-out flex flex-col justify-center">
      
      <!-- Floating Icons -->
      <div class="absolute top-4 right-4 flex space-x-2">
        <img src="https://picsum.photos/40/40?random=1" alt="Visa" class="h-8 w-8 rounded-full shadow-md transition-all duration-300 hover:scale-110" />
        <img src="https://picsum.photos/40/40?random=2" alt="Mastercard" class="h-8 w-8 rounded-full shadow-md transition-all duration-300 hover:scale-110" />
        <img src="https://picsum.photos/40/40?random=3" alt="Amex" class="h-8 w-8 rounded-full shadow-md transition-all duration-300 hover:scale-110" />
      </div>

      <h2 class="text-2xl md:text-3xl font-extrabold mb-6 text-white capitalize leading-tight">
        Payment Information
      </h2>

      <form class="space-y-6">
        <div>
          <label for="card-number" class="block text-sm font-semibold text-white mb-2">Card Number</label>
          <input type="text" id="card-number" placeholder="XXXX XXXX XXXX XXXX" class="w-full px-4 py-3 rounded-xl bg-white/20 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white focus:bg-white/30 transition-all duration-300 ease-in-out dark:bg-purple-800/30 dark:focus:ring-fuchsia-300" pattern="[0-9]{13,16}" required>
        </div>
        
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label for="expiry-date" class="block text-sm font-semibold text-white mb-2">Expiry Date</label>
            <input type="text" id="expiry-date" placeholder="MM/YY" class="w-full px-4 py-3 rounded-xl bg-white/20 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white focus:bg-white/30 transition-all duration-300 ease-in-out dark:bg-purple-800/30 dark:focus:ring-fuchsia-300" pattern="(0[1-9]|1[0-2])\/([0-9]{2})" required>
          </div>
          <div>
            <label for="cvv" class="block text-sm font-semibold text-white mb-2">CVV</label>
            <input type="text" id="cvv" placeholder="XXX" class="w-full px-4 py-3 rounded-xl bg-white/20 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white focus:bg-white/30 transition-all duration-300 ease-in-out dark:bg-purple-800/30 dark:focus:ring-fuchsia-300" pattern="[0-9]{3,4}" required>
          </div>
        </div>

        <div>
          <label for="card-name" class="block text-sm font-semibold text-white mb-2">Name on Card</label>
          <input type="text" id="card-name" placeholder="John Doe" class="w-full px-4 py-3 rounded-xl bg-white/20 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white focus:bg-white/30 transition-all duration-300 ease-in-out dark:bg-purple-800/30 dark:focus:ring-fuchsia-300" required>
        </div>

        <button type="submit" class="mt-8 w-full py-3 px-6 rounded-xl
                                 bg-white text-purple-600 font-bold text-lg
                                 hover:bg-gray-100 hover:scale-105
                                 focus:outline-none focus:ring-4 focus:ring-white/50
                                 transition-all duration-300 ease-in-out
                                 dark:bg-fuchsia-300 dark:text-purple-900 dark:hover:bg-fuchsia-200 dark:hover:scale-105 dark:focus:ring-fuchsia-400/50">
          Complete Payment
        </button>
      </form>
    </div>

  </div>
</div>

RetroGamingDropdownMenu

A responsive, retro/vintage-themed dropdown menu component with a muted color scheme, suitable for gaming websites, featuring dark mode support.

Open Preview

                <div class="relative inline-block text-left font-mono">
  <button id="retroDropdownButton" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-400 bg-gray-200 px-4 py-2 text-sm font-bold text-gray-800 shadow-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-purple-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800 dark:focus:ring-purple-400 transform transition-all duration-150 ease-in-out active:translate-y-1" aria-expanded="false" aria-haspopup="true">
    Game Actions
    <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg>
  </button>

  <div id="retroDropdownMenu" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-gray-200 ring-1 ring-black ring-opacity-5 focus:outline-none border-t-2 border-l-2 border-r-4 border-b-4 border-gray-500 dark:bg-gray-800 dark:border-gray-600 hidden opacity-0 scale-95 transition-all duration-200 ease-out transform" role="menu" aria-orientation="vertical" aria-labelledby="retroDropdownButton" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 border-b border-dashed border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:border-gray-600 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-0">
        <span class="pr-2 text-yellow-600 dark:text-yellow-400">▶</span> New Game
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 border-b border-dashed border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:border-gray-600 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-1">
        <span class="pr-2 text-red-600 dark:text-red-400">■</span> Load Game
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 border-b border-dashed border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:border-gray-600 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-2">
        <span class="pr-2 text-green-600 dark:text-green-400">●</span> Save Game
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-3">
        <span class="pr-2 text-blue-600 dark:text-blue-400">◆</span> Options
      </a>
    </div>
  </div>
</div>

<script>
  // Basic JavaScript for demonstration, not part of the HTML/Tailwind solution itself.
  // In a real application, you'd use a JS framework or a dedicated script.
  const dropdownButton = document.getElementById('retroDropdownButton');
  const dropdownMenu = document.getElementById('retroDropdownMenu');

  dropdownButton.addEventListener('click', () => {
    const isExpanded = dropdownButton.getAttribute('aria-expanded') === 'true';
    dropdownButton.setAttribute('aria-expanded', !isExpanded);
    if (!isExpanded) {
      dropdownMenu.classList.remove('hidden', 'opacity-0', 'scale-95');
      dropdownMenu.classList.add('block', 'opacity-100', 'scale-100');
      dropdownMenu.focus();
    } else {
      dropdownMenu.classList.remove('block', 'opacity-100', 'scale-100');
      dropdownMenu.classList.add('hidden', 'opacity-0', 'scale-95');
    }
  });

  // Close the dropdown if clicking outside
  document.addEventListener('click', (event) => {
    if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
      if (!dropdownMenu.classList.contains('hidden')) {
        dropdownButton.setAttribute('aria-expanded', 'false');
        dropdownMenu.classList.remove('block', 'opacity-100', 'scale-100');
        dropdownMenu.classList.add('hidden', 'opacity-0', 'scale-95');
      }
    }
  });

  // Close on Escape key
  dropdownMenu.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
      dropdownButton.setAttribute('aria-expanded', 'false');
      dropdownMenu.classList.remove('block', 'opacity-100', 'scale-100');
      dropdownMenu.classList.add('hidden', 'opacity-0', 'scale-95');
      dropdownButton.focus();
    }
  });
</script>

Skeuomorphic CAPTCHA Component

A moderately complex, skeuomorphic CAPTCHA component designed with corporate blue tones, suitable for booking and reservation systems. Features responsive design and dark mode support, mimicking real-world digital elements.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-50 to-blue-200 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="w-full max-w-md bg-gradient-to-br from-blue-100 to-blue-300 dark:from-gray-700 dark:to-gray-900 rounded-2xl shadow-xl border-t border-l border-blue-50 dark:border-gray-600 p-6 sm:p-8 relative overflow-hidden
    before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-blue-200/50 before:to-blue-400/50 dark:before:from-gray-800/50 dark:before:to-gray-950/50 before:rounded-2xl before:blur-xl before:opacity-30 before:-z-10
    after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] after:from-blue-100/30 after:via-blue-50/10 after:to-transparent dark:after:from-gray-600/30 dark:after:via-gray-700/10 dark:after:to-transparent after:rounded-2xl after:-z-10">

    <div class="flex items-center space-x-3 mb-6">
      <svg class="h-8 w-8 text-blue-700 dark:text-blue-400 drop-shadow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.92 14.92c-.225.86.147 1.767.93 2.22a12.035 12.035 0 0010.51 3.251c.905-.182 1.706-.577 2.404-1.127a12.003 12.003 0 003.53-3.66c.383-.75.393-1.637.087-2.399A12.008 12.008 0 0021.08 6.92a12.01 12.01 0 00-.73-2.936z" />
      </svg>
      <h2 class="text-2xl sm:text-3xl font-extrabold text-blue-900 dark:text-gray-100 text-shadow-sm">Verify You're Human</h2>
    </div>

    <p class="text-blue-800 dark:text-gray-200 mb-6 leading-relaxed">
      To proceed with your booking, please complete the CAPTCHA challenge below.
    </p>

    <div class="bg-blue-50 dark:bg-gray-800 p-5 rounded-xl shadow-inner border border-blue-200 dark:border-gray-700 mb-6">
      <div class="grid grid-cols-2 gap-4">
        <div class="col-span-2 text-blue-700 dark:text-blue-300 font-semibold mb-3 border-b border-blue-200/50 dark:border-gray-600/50 pb-2 flex items-center">
           <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2zM9 22V12h6v10" />
            </svg>
          Select all squares containing a <span class="text-blue-900 dark:text-white font-bold ml-1">house</span>.
        </div>

        <div class="captcha-grid grid grid-cols-3 gap-2">
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/10/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" data-selected="true" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/433/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/292/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" data-selected="true" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/400/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/296/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/1025/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/29/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" data-selected="true" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/1074/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
          <button type="button" class="group aspect-square rounded-lg overflow-hidden border-2 border-blue-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-gray-700 transition-all duration-200 relative
            data-[selected=true]:border-blue-700 dark:data-[selected=true]:border-blue-400 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-blue-50 dark:data-[selected=true]:ring-offset-gray-700">
            <img src="https://picsum.photos/id/196/300/300" alt="Image for CAPTCHA verification" class="w-full h-full object-cover transition-transform group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-700/30 dark:bg-blue-900/30 flex items-center justify-center opacity-0 group-data-[selected=true]:opacity-100 transition-opacity duration-200">
              <svg class="h-8 w-8 text-white drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </button>
        </div>
      </div>
    </div>

    <div class="flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0 sm:space-x-4">
      <button type="button" class="flex items-center justify-center w-full sm:w-auto px-6 py-3 bg-blue-700 text-white rounded-xl shadow-md hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-800 transition duration-200 ease-in-out
        relative overflow-hidden group
        after:absolute after:top-0 after:left-0 after:w-0 after:h-full after:bg-white/20 after:transition-all after:duration-300 after:ease-in-out group-hover:after:w-full">
        <svg class="h-5 w-5 mr-2 -ml-1 text-white group-hover:text-blue-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
        </svg>
        <span class="relative z-10">Refresh</span>
      </button>
      <button type="submit" class="flex items-center justify-center w-full sm:w-auto px-8 py-3 bg-gradient-to-br from-blue-600 to-blue-800 text-white font-bold rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-900 dark:from-blue-500 dark:to-blue-700 dark:hover:from-blue-600 dark:hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-800 transition duration-300 ease-in-out
        relative overflow-hidden group
        before:absolute before:top-0 before:left-0 before:w-0 before:h-full before:bg-white/20 before:transition-all before:duration-300 before:ease-in-out group-hover:before:w-full">
        <span class="relative z-10">Verify</span>
        <svg class="h-5 w-5 ml-2 -mr-1 text-white group-hover:text-blue-50 z-10" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <p class="text-xs text-blue-600 dark:text-gray-400 mt-6 text-center">
      Your privacy matters. This helps us ensure a secure experience for all users.
    </p>

  </div>
</div>

1 ... 4 5 6 7 8 ... 315