Search Components

All Components

Browse all available Tailwind CSS components

Cyberpunk Mega Menu

A complex, cyberpunk-themed mega menu for food/restaurant websites, featuring neon accents, dark backgrounds, full responsiveness, and dark mode support.

Open Preview

                <nav class="bg-zinc-950 text-white shadow-lg dark:bg-black relative font-mono">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <a href="#" class="text-3xl font-bold tracking-widest text-lime-400 hover:text-lime-300 transition duration-300">CYBERBYTE</a>
    <div class="hidden lg:flex items-center space-x-8">
      <a href="#" class="text-lg uppercase hover:text-lime-400 transition duration-300 border-b-2 border-transparent hover:border-lime-400 pb-1">Home</a>
      <div class="group relative">
        <button class="text-lg uppercase hover:text-lime-400 transition duration-300 focus:outline-none border-b-2 border-transparent hover:border-lime-400 pb-1 flex items-center">
          Menu <svg class="ml-2 w-4 h-4 transform group-hover:rotate-180 transition duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
        </button>
        <div class="absolute hidden group-hover:block w-fit min-w-[700px] right-0 mt-3 p-6 bg-zinc-900 border border-lime-400 shadow-xl rounded-md transition duration-300 opacity-0 group-hover:opacity-100 dark:bg-zinc-950">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
              <h3 class="text-xl font-semibold mb-3 text-electric-blue-400 border-b border-lime-400 pb-2">Categories</h3>
              <ul class="space-y-2 text-sm">
                <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Neural Nosh (Main Courses)</a></li>
                <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Synth-Snacks (Appetizers)</a></li>
                <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Glitched Grub (Vegan)</a></li>
                <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Data Drinks (Beverages)</a></li>
                <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Cyber Sweets (Desserts)</a></li>
                <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Processor Packs (Combos)</a></li>
              </ul>
            </div>
            <div>
              <h3 class="text-xl font-semibold mb-3 text-hot-pink-400 border-b border-lime-400 pb-2">Featured Items</h3>
              <div class="space-y-4">
                <div class="flex items-center space-x-3">
                  <img src="https://picsum.photos/60/60?random=1" alt="Featured Dish" class="w-16 h-16 object-cover rounded-md border-2 border-lime-400">
                  <div>
                    <p class="font-medium text-gray-200">Quantum Burger</p>
                    <p class="text-sm text-gray-400">Synth-meat, bio-cheese, hyper-sauce.</p>
                    <span class="text-lime-400 font-bold">$15.99</span>
                  </div>
                </div>
                <div class="flex items-center space-x-3">
                  <img src="https://picsum.photos/60/60?random=2" alt="Featured Dish" class="w-16 h-16 object-cover rounded-md border-2 border-electric-blue-400">
                  <div>
                    <p class="font-medium text-gray-200">Neon Noodles</p>
                    <p class="text-sm text-gray-400">Glowing pasta, cyber-shrimp.</p>
                    <span class="text-lime-400 font-bold">$18.50</span>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <h3 class="text-xl font-semibold mb-3 text-lime-400 border-b border-lime-400 pb-2">Order Now!</h3>
              <div class="relative overflow-hidden w-full h-40 rounded-lg">
                <img src="https://picsum.photos/400/200?random=3" alt="Order Call to Action" class="w-full h-full object-cover transform scale-105 hover:scale-100 transition-transform duration-500 rounded-lg border-2 border-hot-pink-400">
                <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent flex items-end p-4">
                    <a href="#" class="text-hot-pink-400 text-lg font-bold hover:underline">Explore Full Menu <span class="text-white ml-1">&#8594;</span></a>
                </div>
              </div>
              <p class="mt-3 text-sm text-gray-400">Deliveries to sectors Alpha, Beta, Gamma.</p>
               <button class="mt-4 w-full bg-electric-blue-600 hover:bg-electric-blue-500 text-white py-2 px-4 rounded-md font-bold transition duration-300 transform hover:scale-105 shadow-neon-blue-glow">
                Place Order
              </button>
            </div>
          </div>
        </div>
      </div>
      <a href="#" class="text-lg uppercase hover:text-electric-blue-400 transition duration-300 border-b-2 border-transparent hover:border-electric-blue-400 pb-1">Locations</a>
      <a href="#" class="text-lg uppercase hover:text-hot-pink-400 transition duration-300 border-b-2 border-transparent hover:border-hot-pink-400 pb-1">About Us</a>
      <a href="#" class="text-lg uppercase hover:text-lime-400 transition duration-300 border-b-2 border-transparent hover:border-lime-400 pb-1">Contact</a>
    </div>

    <div class="hidden lg:flex items-center space-x-4">
      <div class="relative group">
        <button class="flex items-center space-x-2 text-white hover:text-lime-400 transition duration-300 focus:outline-none">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-9 h-9 rounded-full object-cover border-2 border-lime-400">
          <span class="text-lg">User 1</span>
        </button>
        <ul class="absolute hidden group-hover:block right-0 mt-3 w-48 bg-zinc-900 border border-lime-400 dark:bg-zinc-950 shadow-lg rounded-md overflow-hidden z-10">
          <li><a href="#" class="block px-4 py-3 text-gray-300 hover:bg-zinc-800 hover:text-electric-blue-300 transition duration-200 border-b border-zinc-800">Profile</a></li>
          <li><a href="#" class="block px-4 py-3 text-gray-300 hover:bg-zinc-800 hover:text-electric-blue-300 transition duration-200 border-b border-zinc-800">Order History</a></li>
          <li><a href="#" class="block px-4 py-3 text-gray-300 hover:bg-zinc-800 hover:text-hot-pink-300 transition duration-200">Settings</a></li>
          <li><a href="#" class="block px-4 py-3 text-gray-300 hover:bg-zinc-800 hover:text-hot-pink-300 transition duration-200">Logout</a></li>
        </ul>
      </div>
      <button aria-label="Toggle dark mode" class="p-2 rounded-full bg-zinc-800 hover:bg-zinc-700 text-lime-400 hover:text-hot-pink-400 transition duration-300 focus:outline-none dark:bg-zinc-900 dark:hover:bg-zinc-800" onclick="document.documentElement.classList.toggle('dark')">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
      </button>
    </div>

    <div class="lg:hidden flex items-center">
      <button aria-label="Toggle dark mode" class="mr-4 p-2 rounded-full bg-zinc-800 hover:bg-zinc-700 text-lime-400 hover:text-hot-pink-400 transition duration-300 focus:outline-none dark:bg-zinc-900 dark:hover:bg-zinc-800" onclick="document.documentElement.classList.toggle('dark')">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
      </button>
      <button id="mobile-menu-button" class="text-white hover:text-lime-400 focus:outline-none p-2 rounded-md bg-zinc-800 hover:bg-zinc-700 transition duration-300 dark:bg-zinc-900 dark:hover:bg-zinc-800">
        <svg class="w-7 h-7" 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>
      </button>
    </div>
  </div>

  <!-- Mobile Menu -->
  <div id="mobile-menu" class="hidden lg:hidden flex-col bg-zinc-950 p-6 space-y-4 border-t border-lime-400 dark:bg-black">
    <a href="#" class="block text-lg uppercase text-white hover:text-lime-400 transition duration-300 py-2 border-b border-zinc-800">Home</a>
    <div class="relative group">
      <button class="flex items-center justify-between w-full text-lg uppercase text-white hover:text-lime-400 transition duration-300 focus:outline-none py-2 border-b border-zinc-800">
        Menu <svg class="ml-2 w-4 h-4 transform group-hover:rotate-180 transition duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
      </button>
      <div class="hidden group-hover:block py-2 pl-4 text-sm bg-zinc-900 border-l border-lime-400 dark:bg-zinc-950">
        <ul class="space-y-2">
          <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Neural Nosh</a></li>
          <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Synth-Snacks</a></li>
          <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Glitched Grub</a></li>
          <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Data Drinks</a></li>
          <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Cyber Sweets</a></li>
          <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Processor Packs</a></li>
        </ul>
      </div>
    </div>
    <a href="#" class="block text-lg uppercase text-white hover:text-electric-blue-400 transition duration-300 py-2 border-b border-zinc-800">Locations</a>
    <a href="#" class="block text-lg uppercase text-white hover:text-hot-pink-400 transition duration-300 py-2 border-b border-zinc-800">About Us</a>
    <a href="#" class="block text-lg uppercase text-white hover:text-lime-400 transition duration-300 py-2 border-b border-zinc-800">Contact</a>
    <div class="flex items-center space-x-2 py-2 border-b border-zinc-800">
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full object-cover border-2 border-lime-400">
      <span class="text-lg text-white">User 1 Profile</span>
    </div>
    <button class="w-full bg-electric-blue-600 hover:bg-electric-blue-500 text-white py-3 rounded-md font-bold transition duration-300 transform hover:scale-105 shadow-neon-blue-glow">
      Place Order
    </button>
  </div>
</nav>

<style>
  /* Custom colors for cyberpunk theme */
  .text-electric-blue-400 { color: #00FFFF; /* Cyan */ }
  .hover\:text-electric-blue-300:hover { color: #00DDDD; }
  .bg-electric-blue-600 { background-color: #00BFFF; /* Deep Sky Blue */ }
  .hover\:bg-electric-blue-500:hover { background-color: #00AADD; }
  
  .text-hot-pink-400 { color: #FF00FF; /* Magenta */ }
  .hover\:text-hot-pink-300:hover { color: #DD00DD; }

  .text-lime-400 { color: #A7FF00; /* Neon Green */ }
  .hover\:text-lime-300:hover { color: #88EE00; }

  .border-electric-blue-400 { border-color: #00FFFF; }
  .border-hot-pink-400 { border-color: #FF00FF; }
  .border-lime-400 { border-color: #A7FF00; }

  .shadow-neon-blue-glow {
    box-shadow: 0 0 8px #00BFFF, 0 0 16px #00BFFF, 0 0 24px #00BFFF, 0 0 32px #00BFFF;
  }
  .dark .shadow-neon-blue-glow {
    box-shadow: 0 0 8px #00BFFF, 0 0 16px #00BFFF;
  }
</style>

<script>
  document.getElementById('mobile-menu-button').addEventListener('click', function() {
    document.getElementById('mobile-menu').classList.toggle('hidden');
    document.getElementById('mobile-menu').classList.toggle('flex');
  });
</script>

Badges Component

A clean, minimalist badges component designed for booking/reservation systems, featuring responsive layout, pastel color scheme, and dark mode support, inspired by Swiss/International Typography.

Open Preview

                <div class="font-sans antialiased bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto py-8 sm:py-12">
    <h2 class="text-3xl sm:text-4xl font-bold mb-8 text-center tracking-tight text-gray-900 dark:text-gray-50">
      Your Upcoming Bookings
    </h2>

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

      <!-- Badge 1: Confirmed Appointment -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow duration-300">
        <div class="p-5 flex flex-col items-start">
          <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-50 animate-pulse-slow">
            <svg class="-ml-0.5 mr-1.5 h-3 w-3 text-green-700 dark:text-green-50" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <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-4z" clip-rule="evenodd" />
            </svg>
            Confirmed
          </span>
          <h3 class="mt-4 text-xl font-semibold text-gray-900 dark:text-gray-50">Dental Check-up</h3>
          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Dr. Alice Smith</p>
          <div class="mt-4 text-gray-700 dark:text-gray-300 text-sm">
            <p class="flex items-center"><svg class="mr-2 h-4 w-4 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>Oct 26, 2023</p>
            <p class="flex items-center mt-1"><svg class="mr-2 h-4 w-4 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>10:00 AM</p>
          </div>
          <a href="#" class="mt-5 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
            View Details
            <svg class="ml-2 -mr-1 h-3 w-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
          </a>
        </div>
      </div>

      <!-- Badge 2: Pending Reservation -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow duration-300">
        <div class="p-5 flex flex-col items-start">
          <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-50">
            <svg class="-ml-0.5 mr-1.5 h-3 w-3 text-yellow-700 dark:text-yellow-50" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.3 2.624-1.3 3.389 0l7.25 12.482A1.5 1.5 0 0118.25 17H1.75a1.5 1.5 0 01-1.301-2.19l7.25-12.482zM10 13a1 1 0 100-2 1 1 0 000 2zm0 4a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
            </svg>
            Pending
          </span>
          <h3 class="mt-4 text-xl font-semibold text-gray-900 dark:text-gray-50">Restaurant Table Booking</h3>
          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">The Fancy Bistro</p>
          <div class="mt-4 text-gray-700 dark:text-gray-300 text-sm">
            <p class="flex items-center"><svg class="mr-2 h-4 w-4 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>Nov 15, 2023</p>
            <p class="flex items-center mt-1"><svg class="mr-2 h-4 w-4 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>7:30 PM (4 Guests)</p>
          </div>
          <a href="#" class="mt-5 inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
            Review / Cancel
          </a>
        </div>
      </div>

      <!-- Badge 3: Completed Session -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow duration-300">
        <div class="p-5 flex flex-col items-start">
          <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-50">
            <svg class="-ml-0.5 mr-1.5 h-3 w-3 text-indigo-700 dark:text-indigo-50" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.38-.72.588-1.81l3.462-.002a1 1 0 00.95-.69L9.049 2.927z" />
            </svg>
            Completed
          </span>
          <h3 class="mt-4 text-xl font-semibold text-gray-900 dark:text-gray-50">Yoga Session</h3>
          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Zen Flow Studio</p>
          <div class="mt-4 text-gray-700 dark:text-gray-300 text-sm">
            <p class="flex items-center"><svg class="mr-2 h-4 w-4 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>Sep 20, 2023</p>
            <p class="flex items-center mt-1"><svg class="mr-2 h-4 w-4 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>6:00 PM</p>
          </div>
          <a href="#" class="mt-5 inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
            Leave Feedback
          </a>
        </div>
      </div>

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

<style>
  /* This is for the pulsating effect on the 'Confirmed' badge only */
  @keyframes pulse-slow {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.03); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
  }
  .animate-pulse-slow {
    animation: pulse-slow 3s infinite ease-in-out;
  }
</style>

Cyberpunk Chart Component

A responsive and interactive-looking chart component with cyberpunk aesthetic, dark backgrounds, neon accents, and cool neutral colors, suitable for educational platforms.

Open Preview

                <div class="font-sans antialiased bg-gray-950 text-gray-200 dark:bg-gray-950 dark:text-gray-200 min-h-screen p-4 sm:p-6 lg:p-8">
  <div class="max-w-6xl mx-auto bg-gray-900 rounded-3xl shadow-2xl overflow-hidden border border-blue-900/50 relative">
    <div class="absolute inset-0 bg-gradient-to-br from-blue-950/20 via-transparent to-purple-950/20 pointer-events-none z-0"></div>
    <div class="relative z-10 p-4 sm:p-6 lg:p-8">
      <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 border-b border-gray-700/50 pb-4">
        <div>
          <h2 class="text-2xl sm:text-3xl font-bold text-blue-400 group-hover:text-blue-300 transition-colors duration-300 tracking-wide mb-2">
            <span class="text-blue-500">\\</span> Data Progression Analysis
          </h2>
          <p class="text-gray-400 text-sm sm:text-base">Visualize your learning journey and track progress over time.</p>
        </div>
        <div class="mt-4 md:mt-0 flex space-x-2">
          <button class="flex items-center px-4 py-2 bg-gray-800 text-blue-300 rounded-lg text-sm transition-all duration-300 hover:bg-blue-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 shadow-lg group">
            <svg class="w-4 h-4 mr-2 text-blue-400 group-hover:text-white transition-colors 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            <span class="group-hover:translate-x-0.5 transition-transform duration-300">Filter by Date</span>
          </button>
          <button class="flex items-center px-4 py-2 bg-blue-700 text-white rounded-lg text-sm transition-all duration-300 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 shadow-lg group">
            <svg class="w-4 h-4 mr-2 text-white group-hover:animate-pulse" 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 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
            <span class="group-hover:translate-x-0.5 transition-transform duration-300">Settings</span>
          </button>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <div class="col-span-1 lg:col-span-2 bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300">
          <h3 class="text-xl font-semibold text-blue-300 mb-4">Weekly Performance Overview</h3>
          <!-- Placeholder for Chart -->
          <div class="relative w-full h-64 sm:h-80 md:h-96 flex items-center justify-center bg-gray-900 border border-blue-800/60 rounded-lg overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-purple-800/10 via-transparent to-blue-800/10 animate-pulse-slow pointer-events-none"></div>
            <div class="absolute top-0 left-0 w-full h-full p-4 flex flex-col justify-between items-end text-right text-xs text-gray-500">
              <span class="text-red-400">100%</span>
              <span>80%</span>
              <span>60%</span>
              <span>40%</span>
              <span>20%</span>
              <span class="text-blue-400">0%</span>
            </div>
            <div class="absolute bottom-0 left-0 w-full p-4 flex justify-around text-gray-500 text-xs">
              <span>Mon</span>
              <span>Tue</span>
              <span>Wed</span>
              <span>Thu</span>
              <span>Fri</span>
              <span>Sat</span>
              <span>Sun</span>
            </div>
            <!-- Example 'graph' elements - can be replaced with actual chart library output -->
            <div class="absolute bottom-8 left-8 right-8 top-8 flex items-end justify-around">
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out h-[60%] hover:scale-x-105 hover:bg-blue-400"></div>
              <div class="w-6 sm:w-8 bg-purple-600 rounded-t-sm transition-all duration-500 ease-out delay-75 h-[80%] hover:scale-x-105 hover:bg-purple-400"></div>
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out delay-150 h-[40%] hover:scale-x-105 hover:bg-blue-400"></div>
              <div class="w-6 sm:w-8 bg-purple-600 rounded-t-sm transition-all duration-500 ease-out delay-225 h-[90%] hover:scale-x-105 hover:bg-purple-400"></div>
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out delay-300 h-[70%] hover:scale-x-105 hover:bg-blue-400"></div>
              <div class="w-6 sm:w-8 bg-purple-600 rounded-t-sm transition-all duration-500 ease-out delay-375 h-[50%] hover:scale-x-105 hover:bg-purple-400"></div>
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out delay-450 h-[85%] hover:scale-x-105 hover:bg-blue-400"></div>
            </div>
            <div class="absolute inset-0 flex items-center justify-center text-gray-600 text-lg sm:text-xl font-bold opacity-30 pointer-events-none">
              CHART DATA
            </div>
          </div>
          <p class="mt-4 text-gray-400 text-sm">This chart displays your average score and completion rate for various learning modules throughout the week.</p>
        </div>

        <div class="col-span-1 flex flex-col space-y-6">
          <!-- Key Metrics -->
          <div class="bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300 group">
            <h3 class="text-xl font-semibold text-blue-300 mb-3">Key Metrics</h3>
            <div class="space-y-4">
              <div class="flex items-center text-gray-300">
                <div class="w-3 h-3 rounded-full bg-blue-500 mr-3 animate-pulse group-hover:scale-110"></div>
                <span>Average Score: <strong class="text-blue-400">88.5%</strong></span>
              </div>
              <div class="flex items-center text-gray-300">
                <div class="w-3 h-3 rounded-full bg-purple-500 mr-3 animate-pulse delay-100 group-hover:scale-110"></div>
                <span>Modules Completed: <strong class="text-purple-400">12/15</strong></span>
              </div>
              <div class="flex items-center text-gray-300">
                <div class="w-3 h-3 rounded-full bg-red-500 mr-3 animate-pulse delay-200 group-hover:scale-110"></div>
                <span>Time Spent (Hrs): <strong class="text-red-400">24.5</strong></span>
              </div>
            </div>
          </div>

          <!-- Daily Trend -->
          <div class="bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300 group">
            <h3 class="text-xl font-semibold text-blue-300 mb-3">Daily Trend</h3>
            <p class="text-gray-400 text-sm mb-4">See your average score by day.</p>
            <div class="flex justify-between items-end h-24 sm:h-32 relative">
              <div class="absolute w-full h-0.5 bg-gray-700 bottom-0 left-0"></div>
              <!-- Bars -->
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 80%;"></div>
                <span class="text-xs text-gray-500 mt-1">Mon</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-purple-600 rounded-t-sm transition-all duration-300 group-hover:bg-purple-400" style="height: 65%;"></div>
                <span class="text-xs text-gray-500 mt-1">Tue</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 90%;"></div>
                <span class="text-xs text-gray-500 mt-1">Wed</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-purple-600 rounded-t-sm transition-all duration-300 group-hover:bg-purple-400" style="height: 75%;"></div>
                <span class="text-xs text-gray-500 mt-1">Thu</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 85%;"></div>
                <span class="text-xs text-gray-500 mt-1">Fri</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-purple-600 rounded-t-sm transition-all duration-300 group-hover:bg-purple-400" style="height: 50%;"></div>
                <span class="text-xs text-gray-500 mt-1">Sat</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 70%;"></div>
                <span class="text-xs text-gray-500 mt-1">Sun</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Recommendations/Insights -->
      <div class="bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300 group">
        <h3 class="text-xl font-semibold text-blue-300 mb-3">Insights & Recommendations</h3>
        <ul class="list-disc list-inside text-gray-400 space-y-2">
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">You had a strong performance on Wednesday. Keep up the momentum!</li>
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">Consider reviewing modules related to 'Data Structures' as your scores dipped on Tuesday.</li>
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">Your weekend learning hours are lower. A short review session could make a difference.</li>
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">Aim to achieve 90% completion rate by end of next week.</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom pulsing animation for background effect */
  @keyframes pulse-slow {
    0%, 100% { transform: scale(1); opacity: 0.1; }
    50% { transform: scale(1.05); opacity: 0.2; }
  }
  .animate-pulse-slow {
    animation: pulse-slow 6s infinite ease-in-out;
  }
</style>

Industrial_Chart_Component_Ocean_Blue_Simple

A simple, responsive chart component with an industrial, raw-materials aesthetic using ocean/blue tones, designed for non-profit/charity organizations. Includes dark mode support.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 p-4 sm:p-6 md:p-8 rounded-lg shadow-xl border border-blue-200 dark:border-blue-800">
  <div class="flex justify-between items-center mb-6 border-b pb-4 border-blue-300 dark:border-blue-700">
    <h2 class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-200 font-mono tracking-wide">Donation Impact Overview</h2>
    <p class="text-sm text-blue-600 dark:text-blue-400 uppercase tracking-widest font-mono">Q4 2023</p>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
    <div class="bg-blue-50 dark:bg-blue-950 p-4 rounded-md border border-blue-200 dark:border-blue-800 flex flex-col justify-between">
      <div>
        <p class="text-sm text-blue-700 dark:text-blue-300 font-semibold mb-2">Total Contributions</p>
        <p class="text-2xl font-extrabold text-blue-800 dark:text-sky-300 font-mono">$12,450</p>
      </div>
      <div class="w-full bg-blue-200 dark:bg-blue-700 rounded-full h-2 mt-4">
        <div class="bg-blue-600 dark:bg-blue-400 h-2 rounded-full" style="width: 75%;"></div>
      </div>
    </div>

    <div class="bg-blue-50 dark:bg-blue-950 p-4 rounded-md border border-blue-200 dark:border-blue-800 flex flex-col justify-between">
      <div>
        <p class="text-sm text-blue-700 dark:text-blue-300 font-semibold mb-2">Beneficiaries Reached</p>
        <p class="text-2xl font-extrabold text-blue-800 dark:text-sky-300 font-mono">87</p>
      </div>
      <div class="text-xs text-blue-600 dark:text-blue-400 mt-4">+15% from Q3</div>
    </div>

    <div class="bg-blue-50 dark:bg-blue-950 p-4 rounded-md border border-blue-200 dark:border-blue-800 flex flex-col justify-between">
      <div>
        <p class="text-sm text-blue-700 dark:text-blue-300 font-semibold mb-2">Volunteer Hours</p>
        <p class="text-2xl font-extrabold text-blue-800 dark:text-sky-300 font-mono">320 hrs</p>
      </div>
      <a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline mt-4 self-end">View Details &rarr;</a>
    </div>
  </div>

  <div class="bg-blue-100 dark:bg-blue-900 p-6 rounded-md border border-blue-300 dark:border-blue-700">
    <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-4">Impact Distribution</h3>
    <div class="relative h-48 sm:h-64">
      <!-- Placeholder for a simple bar chart or pie chart representation -->
      <div class="absolute inset-0 flex items-end p-2 sm:p-4">
        <div class="flex flex-grow justify-around items-end h-full">
          <div class="w-8 sm:w-10 bg-blue-600 dark:bg-sky-400 rounded-t-sm animate-bar-grow" style="height: 70%; animation-delay: 0s;"></div>
          <div class="w-8 sm:w-10 bg-blue-700 dark:bg-sky-500 rounded-t-sm animate-bar-grow" style="height: 50%; animation-delay: 0.1s;"></div>
          <div class="w-8 sm:w-10 bg-blue-800 dark:bg-sky-600 rounded-t-sm animate-bar-grow" style="height: 90%; animation-delay: 0.2s;"></div>
          <div class="w-8 sm:w-10 bg-blue-600 dark:bg-sky-400 rounded-t-sm animate-bar-grow" style="height: 40%; animation-delay: 0.3s;"></div>
          <div class="w-8 sm:w-10 bg-blue-700 dark:bg-sky-500 rounded-t-sm animate-bar-grow" style="height: 60%; animation-delay: 0.4s;"></div>
        </div>
      </div>

      <div class="absolute bottom-0 left-0 right-0 h-px bg-blue-400 dark:bg-blue-600"></div>
      <div class="absolute top-0 bottom-0 left-4 w-px bg-blue-400 dark:bg-blue-600"></div>
      
      <div class="absolute bottom-0 left-0 right-0 flex justify-around text-xs text-blue-700 dark:text-blue-300 pt-2 pb-1">
        <span>Food</span>
        <span>Water</span>
        <span>Shelter</span>
        <span>Health</span>
        <span>Educ.</span>
      </div>
    </div>
  </div>

  <div class="mt-6 text-center">
    <button class="px-6 py-2 bg-blue-700 hover:bg-blue-800 text-white dark:bg-blue-600 dark:hover:bg-blue-700 rounded-md font-semibold transition-colors duration-200 border border-blue-900 dark:border-blue-400 shadow-md font-mono">
      Generate Report
    </button>
  </div>
</div>

<style>
  @keyframes bar-grow {
    from { height: 0%; transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0%); opacity: 1; }
  }
  .animate-bar-grow {
    animation: bar-grow 0.8s ease-out forwards;
  }
</style>

Property Listing Card - Swiss Pastel

A simple, clean, and responsive property listing card with a Swiss/International typography style and a pastel color scheme, suitable for real estate platforms. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 bg-rose-50 dark:bg-zinc-800 rounded-lg shadow-md max-w-sm mx-auto transition-colors duration-300">
  <div class="relative mb-4 overflow-hidden rounded-md">
    <img src="https://picsum.photos/400/250?random=10" alt="Property Image" class="w-full h-48 object-cover rounded-md transition-transform duration-300 hover:scale-105">
    <div class="absolute bottom-2 left-2 bg-rose-200 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200 px-3 py-1 rounded-full text-xs font-semibold uppercase opacity-90">
      For Sale
    </div>
  </div>
  <h3 class="text-xl sm:text-2xl font-bold text-zinc-800 dark:text-rose-100 mb-2 truncate">
    Modern City Apartment
  </h3>
  <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-3 truncate">
    123 Main St, Anytown, CA 90210
  </p>

  <div class="grid grid-cols-2 gap-y-2 text-zinc-700 dark:text-zinc-300 text-sm mb-4">
    <div class="flex items-center">
      <svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-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="M8 14v3m4-3v3m4-3v3M3 21h18M3 10L6 7l9 4 6-3v11H3V10z"></path></svg>
      3 Beds
    </div>
    <div class="flex items-center">
      <svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-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="M20.25 15.3A4.5 4.5 0 0115.75 21H12a2.25 2.25 0 00-2.25 2.25h-1.5A2.25 2.25 0 016 21H3.75A2.25 2.25 0 011.5 18.75V9A2.25 2.25 0 013.75 6.75h1.5A2.25 2.25 0 007.5 4.5h9A2.25 2.25 0 0119.5 6.75h1.5A2.25 2.25 0 0122.5 9v9.75A4.5 4.5 0 0120.25 15.3z"></path></svg>
      2 Baths
    </div>
    <div class="flex items-center">
      <svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-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="M16 12V4zm-4 4V4zm-4 4V4zm-4 4v7h16v-7c0-2-1-4-3-4H7c-2 0-3 2-3 4z"></path></svg>
      1,200 sqft
    </div>
    <div class="flex items-center">
      <svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
      Central
    </div>
  </div>

  <div class="flex items-center justify-between">
    <p class="text-xl sm:text-2xl font-extrabold text-zinc-900 dark:text-rose-200">
      $350,000
    </p>
    <a href="#" class="inline-flex items-center px-4 py-2 bg-rose-400 dark:bg-rose-600 text-white rounded-md hover:bg-rose-500 dark:hover:bg-rose-700 transition-colors duration-200 text-sm sm:text-base font-semibold">
      Details
      <svg class="w-4 h-4 ml-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="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"></path></svg>
    </a>
  </div>
</div>

Cyberpunk_User_Profiles_Component

A complex, responsive user profiles component with a cyberpunk aesthetic and a warm sunset color scheme, suitable for travel/tourism websites. Features dark mode support, neon accents, and interactive elements.

Open Preview

                <div class="min-h-screen bg-gray-900 text-orange-200 p-4 sm:p-8 dark:bg-gray-950">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Left Column: User Profile -->
    <div class="md:col-span-1 bg-gradient-to-br from-indigo-900 to-purple-900 rounded-3xl shadow-xl border border-purple-700 transform hover:scale-105 transition-all duration-300 dark:from-purple-950 dark:to-gray-900">
      <div class="p-6 sm:p-8 text-center relative">
        <div class="absolute top-4 right-4 flex space-x-2">
          <span class="relative flex h-3 w-3">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
          </span>
          <span class="text-xs font-mono text-orange-400">STATUS: ONLINE</span>
        </div>
        <img class="w-32 h-32 rounded-full mx-auto border-4 border-orange-500 shadow-lg glow-effect-orange mb-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
        <h2 class="text-3xl font-bold text-orange-400 mb-2 font-mono">AURORA_SKYWALKER</h2>
        <p class="text-sm text-purple-300 mb-4">Cyber-Explorer | Data-Nomad | Pixel-Poet</p>
        <div class="flex justify-center space-x-4 mb-6">
          <a href="#" class="text-orange-400 hover:text-orange-300 transition-colors duration-200"><i class="fas fa-envelope"></i></a>
          <a href="#" class="text-orange-400 hover:text-orange-300 transition-colors duration-200"><i class="fab fa-twitter"></i></a>
          <a href="#" class="text-orange-400 hover:text-orange-300 transition-colors duration-200"><i class="fab fa-instagram"></i></a>
        </div>
        <div class="text-left space-y-3">
          <div class="border-t border-purple-800 pt-4 flex items-center space-x-2">
            <i class="fas fa-map-marker-alt text-orange-500"></i>
            <span class="text-sm text-indigo-300">Location: Neo-Vegas Sector 7</span>
          </div>
          <div class="flex items-center space-x-2">
            <i class="fas fa-calendar-alt text-orange-500"></i>
            <span class="text-sm text-indigo-300">Member Since: 2077.01.15</span>
          </div>
          <div class="flex items-center space-x-2">
            <i class="fas fa-star text-orange-500"></i>
            <span class="text-sm text-indigo-300">Rating: 4.8 / 5.0 (2,104 reviews)</span>
          </div>
        </div>
        <button class="mt-8 px-6 py-3 bg-orange-600 text-white rounded-full text-lg font-bold uppercase tracking-wider shadow-lg transform hover:scale-105 hover:bg-orange-700 transition-all duration-300 glow-button-orange focus:outline-none focus:ring-4 focus:ring-orange-500 focus:ring-opacity-75">
          Edit Profile
        </button>
      </div>
    </div>

    <!-- Right Column: Stats & Activity -->
    <div class="md:col-span-2 space-y-8">
      <!-- Navigation Tabs -->
      <div class="bg-gradient-to-r from-red-800 to-orange-800 rounded-3xl p-2 shadow-xl border border-red-700 dark:from-red-950 dark:to-orange-900">
        <div class="flex flex-wrap justify-around text-sm sm:text-base font-bold font-mono">
          <a href="#" class="px-4 py-2 text-white glow-text-white-active rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105 active:bg-orange-900 active:ring-2 active:ring-orange-500">Dashboard</a>
          <a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Bookings</a>
          <a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Trips</a>
          <a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Reviews</a>
          <a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Settings</a>
        </div>
      </div>

      <!-- Stats Section -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-orange-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
          <i class="fas fa-plane-departure text-orange-400 text-3xl mb-3 glow-effect-orange-sm"></i>
          <p class="text-2xl font-bold font-mono text-orange-300">17</p>
          <p class="text-sm text-gray-400">Total Expeditions</p>
        </div>
        <div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-purple-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
          <i class="fas fa-map-marked-alt text-purple-400 text-3xl mb-3 glow-effect-purple-sm"></i>
          <p class="text-2xl font-bold font-mono text-purple-300">5</p>
          <p class="text-sm text-gray-400">Planetary Zones</p>
        </div>
        <div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-red-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
          <i class="fas fa-hourglass-half text-red-400 text-3xl mb-3 glow-effect-red-sm"></i>
          <p class="text-2xl font-bold font-mono text-red-300">234</p>
          <p class="text-sm text-gray-400">Hours Logged</p>
        </div>
        <div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-green-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
          <i class="fas fa-users text-green-400 text-3xl mb-3 glow-effect-green-sm"></i>
          <p class="text-2xl font-bold font-mono text-green-300">12</p>
          <p class="text-sm text-gray-400">Travel Buddies</p>
        </div>
      </div>

      <!-- Recent Activity / Upcoming Bookings -->
      <div class="bg-gradient-to-br from-gray-800 to-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl border border-gray-700 dark:from-gray-900 dark:to-gray-900">
        <h3 class="text-2xl font-bold font-mono text-orange-400 mb-6 glow-text-orange">RECENT SYNAPSE LOGS</h3>
        <div class="space-y-6">
          <!-- Activity Item 1 -->
          <div class="flex items-center bg-gray-700 p-4 rounded-xl border border-gray-600 transition-transform duration-200 hover:scale-[1.02] dark:bg-gray-800">
            <div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 border-orange-500 shadow-md glow-effect-orange-sm">
              <img src="https://picsum.photos/id/1040/80/80" alt="Destination" class="w-full h-full object-cover">
            </div>
            <div class="flex-grow ml-4">
              <p class="text-lg font-semibold text-orange-300 mb-1">Trip to Kepler-186f: Red Canopy Forests</p>
              <p class="text-sm text-gray-400">Departure: 2083.05.20 <span class="text-purple-400">//</span> Status: <span class="text-green-400">COMPLETED</span></p>
              <p class="text-xs text-gray-500">Booking ID: #KX93F-AX7</p>
            </div>
            <button class="ml-4 px-4 py-2 bg-purple-600 text-white rounded-full text-sm font-bold shadow-md hover:bg-purple-700 transition-colors duration-200 glow-button-purple focus:outline-none focus:ring-2 focus:ring-purple-500">
              View Details
            </button>
          </div>
          <!-- Activity Item 2 -->
          <div class="flex items-center bg-gray-700 p-4 rounded-xl border border-gray-600 transition-transform duration-200 hover:scale-[1.02] dark:bg-gray-800">
            <div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 border-purple-500 shadow-md glow-effect-purple-sm">
              <img src="https://picsum.photos/id/1043/80/80" alt="Destination" class="w-full h-full object-cover">
            </div>
            <div class="flex-grow ml-4">
              <p class="text-lg font-semibold text-purple-300 mb-1">Lunar Base Alpha: Gravity Chamber Training</p>
              <p class="text-sm text-gray-400">Departure: 2084.01.10 <span class="text-orange-400">//</span> Status: <span class="text-red-400">PENDING APPROVAL</span></p>
              <p class="text-xs text-gray-500">Booking ID: #LBX2C-Y-4</p>
            </div>
            <button class="ml-4 px-4 py-2 bg-orange-600 text-white rounded-full text-sm font-bold shadow-md hover:bg-orange-700 transition-colors duration-200 glow-button-orange focus:outline-none focus:ring-2 focus:ring-orange-500">
              Modify Booking
            </button>
          </div>
          <!-- Activity Item 3 -->
          <div class="flex items-center bg-gray-700 p-4 rounded-xl border border-gray-600 transition-transform duration-200 hover:scale-[1.02] dark:bg-gray-800">
            <div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 border-red-500 shadow-md glow-effect-red-sm">
              <img src="https://picsum.photos/id/1051/80/80" alt="Destination" class="w-full h-full object-cover">
            </div>
            <div class="flex-grow ml-4">
              <p class="text-lg font-semibold text-red-300 mb-1">Mars Colonization Project: Phase 3 Briefing</p>
              <p class="text-sm text-gray-400">Departure: 2085.03.15 <span class="text-indigo-400">//</span> Status: <span class="text-yellow-400">CONFIRMED</span></p>
              <p class="text-xs text-gray-500">Booking ID: #MCP7E-Z1</p>
            </div>
            <button class="ml-4 px-4 py-2 bg-indigo-600 text-white rounded-full text-sm font-bold shadow-md hover:bg-indigo-700 transition-colors duration-200 glow-button-indigo focus:outline-none focus:ring-2 focus:ring-indigo-500">
              View Itinerary
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Custom Glow Effects (using pseudo-elements or custom classes) -->
  <style>
    .glow-effect-orange {
      box-shadow: 0 0 15px rgba(255, 165, 0, 0.7), 0 0 30px rgba(255, 140, 0, 0.5);
    }
    .glow-effect-orange-sm {
      filter: drop-shadow(0 0 5px rgba(255, 165, 0, 0.6));
    }
    .glow-button-orange {
      box-shadow: 0 0 8px rgba(255, 165, 0, 0.7);
    }
    .glow-button-orange:hover {
      box-shadow: 0 0 15px rgba(255, 165, 0, 0.9);
    }

    .glow-effect-purple-sm {
      filter: drop-shadow(0 0 5px rgba(128, 0, 128, 0.6));
    }
    .glow-button-purple {
      box-shadow: 0 0 8px rgba(128, 0, 128, 0.7);
    }
    .glow-button-purple:hover {
      box-shadow: 0 0 15px rgba(128, 0, 128, 0.9);
    }

    .glow-effect-red-sm {
      filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.6));
    }
    .glow-button-red {
      box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
    }

    .glow-button-indigo {
      box-shadow: 0 0 8px rgba(79, 70, 229, 0.7);
    }
    .glow-button-indigo:hover {
      box-shadow: 0 0 15px rgba(79, 70, 229, 0.9);
    }

    .glow-effect-green-sm {
      filter: drop-shadow(0 0 5px rgba(0, 128, 0, 0.6));
    }

    .glow-text-orange {
      text-shadow: 0 0 8px rgba(255, 165, 0, 0.8);
    }
    .glow-text-white-active {
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    }
  </style>

  <!-- Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</div>

Wishlist Component

A minimalist and responsive wishlist component with a multi-color gradient rainbow theme, suitable for news or journalism websites. Includes dark mode support and interactive elements.

Open Preview

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

  <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 mb-6 sm:mb-8 lg:mb-10 text-center dark:from-red-400 dark:via-yellow-400 dark:to-green-400">
    Your Reading List
  </h1>

  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

    <!-- Wishlist Item 1 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-l-4 border-pink-500 dark:border-pink-600">
      <img src="https://picsum.photos/400/250?random=1" alt="Article thumbnail" class="w-full h-48 object-cover object-center">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">The Future of AI in Journalism: A Deep Dive into Ethical Considerations</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-3">Explore the ethical dilemmas and opportunities presented by artificial intelligence in the evolving landscape of news reporting and editorial processes.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <img class="w-7 h-7 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar">
          <span>Jane Doe</span>
          <span class="mx-2">•</span>
          <span>Mar 10, 2023</span>
        </div>
        <div class="flex justify-between items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item 2 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-l-4 border-purple-500 dark:border-purple-600">
      <img src="https://picsum.photos/400/250?random=2" alt="Article thumbnail" class="w-full h-48 object-cover object-center">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">The Comeback of Investigative Reporting: Why It Matters Now More Than Ever</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-3">In an era of misinformation, a renewed focus on deep, investigative journalism is crucial for a well-informed public and accountable institutions.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <img class="w-7 h-7 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author Avatar">
          <span>John Smith</span>
          <span class="mx-2">•</span>
          <span>Feb 28, 2023</span>
        </div>
        <div class="flex justify-between items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item 3 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-l-4 border-blue-500 dark:border-blue-600">
      <img src="https://picsum.photos/400/250?random=3" alt="Article thumbnail" class="w-full h-48 object-cover object-center">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Interactive Storytelling: Engaging Audiences in the Digital Age</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-3">How news outlets are using immersive technologies and data visualizations to create compelling, interactive narratives that captivate readers.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <img class="w-7 h-7 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Author Avatar">
          <span>Emily White</span>
          <span class="mx-2">•</span>
          <span>Jan 15, 2023</span>
        </div>
        <div class="flex justify-between items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item 4 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-l-4 border-green-500 dark:border-green-600">
      <img src="https://picsum.photos/400/250?random=4" alt="Article thumbnail" class="w-full h-48 object-cover object-center">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Local News Revival: Strategies for Sustaining Community Journalism</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-3">Examining successful models and innovative approaches to reinvigorate local news organizations, ensuring vital information reaches communities.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <img class="w-7 h-7 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Author Avatar">
          <span>David Lee</span>
          <span class="mx-2">•</span>
          <span>Jan 01, 2023</span>
        </div>
        <div class="flex justify-between items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item 5 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-l-4 border-yellow-500 dark:border-yellow-600">
      <img src="https://picsum.photos/400/250?random=5" alt="Article thumbnail" class="w-full h-48 object-cover object-center">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">The Psychology of Clickbait: Deconstructing Sensational Headlines</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-3">An analytical look into the psychological triggers behind clickbait headlines and their impact on journalistic integrity and reader trust.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <img class="w-7 h-7 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Author Avatar">
          <span>Sarah Chen</span>
          <span class="mx-2">•</span>
          <span>Dec 18, 2022</span>
        </div>
        <div class="flex justify-between items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item 6 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-l-4 border-red-500 dark:border-red-600">
      <img src="https://picsum.photos/400/250?random=6" alt="Article thumbnail" class="w-full h-48 object-cover object-center">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Fact-Checking in the Digital Age: Tools and Techniques for Journalists</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-3">A guide to essential resources and methodologies for verifying information and combating the spread of disinformation in online environments.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <img class="w-7 h-7 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/6.jpg" alt="Author Avatar">
          <span>Michael Brown</span>
          <span class="mx-2">•</span>
          <span>Nov 05, 2022</span>
        </div>
        <div class="flex justify-between items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
          </button>
        </div>
      </div>
    </div>

  </div>
</div>

GradientSepiaBadges

A responsive music/audio specific badge component with sepia/brown gradient transitions, suitable for displaying genres, moods, or artist categories. Includes dark mode support.

Open Preview

                <div class="p-6 sm:p-8 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-neutral-900 dark:to-neutral-800 min-h-screen font-sans antialiased">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-stone-800 dark:text-stone-100 mb-8 sm:mb-12 text-center">
      Explore Music Categories
    </h2>

    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 sm:gap-6">

      <!-- Badge 1: Jazz -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1049/300/200" alt="Jazz music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Jazz</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Smooth & Serene</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Badge 2: Rock -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/15/300/200" alt="Rock music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Rock</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Energetic & Bold</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Badge 3: Electronic -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1084/300/200" alt="Electronic music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Electronic</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Pulsing & Modern</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Badge 4: Classical -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/123/300/200" alt="Classical music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Classical</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Timeless & Grand</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Badge 5: Hip Hop -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1025/300/200" alt="Hip Hop music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Hip Hop</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Rhythmic & Urban</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Badge 6: Country -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1069/300/200" alt="Country music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Country</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Rustic & Soulful</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Badge 7: Pop -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1012/300/200" alt="Pop music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Pop</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Catchy & Mainstream</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Badge 8: R&B -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/152/300/200" alt="R&B music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">R&B</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Smooth & Soulful</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Badge 9: Indie -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/40/300/200" alt="Indie music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Indie</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Alternative & Unique</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Badge 10: Folk -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/29/300/200" alt="Folk music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Folk</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Acoustic & Storytelling</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

    </div>

    <div class="mt-12 text-center">
      <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm 
      bg-gradient-to-r from-amber-600 to-orange-700 text-white 
      hover:from-amber-700 hover:to-orange-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500
      dark:from-amber-700 dark:to-orange-800 dark:hover:from-amber-800 dark:hover:to-orange-900 dark:focus:ring-amber-600
      transition-all duration-300 ease-in-out">
        View All Genres
        <svg class="ml-2 -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.414L13.586 11H4a1 1 0 110-2h9.586l-3.293-3.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>

Feedback Components Component

A simple, responsive feedback component suitable for consulting/services websites, featuring a triadic color scheme and microinteraction design principles. Includes dark mode support.

Open Preview

                <div class="font-sans antialiased text-gray-900 bg-white dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center p-4">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="p-6 sm:p-8 space-y-6">
      <h2 class="text-2xl sm:text-3xl font-bold text-center text-indigo-700 dark:text-indigo-400 mb-4 tracking-tight">
        We Value Your Feedback!
      </h2>
      <p class="text-center text-gray-600 dark:text-gray-300 leading-relaxed">
        Help us improve our services by sharing your thoughts.
      </p>

      <form class="space-y-6">
        <div>
          <label for="feedback-type" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
            What type of feedback is this?
          </label>
          <div class="relative">
            <select id="feedback-type" name="feedback-type" class="block w-full py-2 px-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm appearance-none transition-colors duration-200">
              <option value="general">General Feedback</option>
              <option value="suggestion">Suggestion</option>
              <option value="bug">Bug Report</option>
              <option value="compliment">Compliment</option>
              <option value="other">Other</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
              <svg class="h-4 w-4" 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>
            </div>
          </div>
        </div>

        <div>
          <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
            Your Message
          </label>
          <textarea id="message" name="message" rows="4" class="block w-full py-2 px-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500 sm:text-sm transition-colors duration-200 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Tell us what's on your mind..."></textarea>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">How would you rate your experience?</label>
          <div class="flex justify-center space-x-2">
            <button type="button" class="rating-btn group flex flex-col items-center justify-center p-2 rounded-lg transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-orange-400 dark:hover:border-orange-600">
              <span class="text-2xl lg:text-3xl transition-transform duration-200 group-hover:-translate-y-1 group-active:translate-y-0">😡</span>
              <span class="text-xs text-gray-500 dark:text-gray-400 group-hover:text-orange-600 dark:group-hover:text-orange-400 mt-1">Poor</span>
            </button>
            <button type="button" class="rating-btn group flex flex-col items-center justify-center p-2 rounded-lg transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-orange-400 dark:hover:border-orange-600">
              <span class="text-2xl lg:text-3xl transition-transform duration-200 group-hover:-translate-y-1 group-active:translate-y-0">😐</span>
              <span class="text-xs text-gray-500 dark:text-gray-400 group-hover:text-orange-600 dark:group-hover:text-orange-400 mt-1">Okay</span>
            </button>
            <button type="button" class="rating-btn group flex flex-col items-center justify-center p-2 rounded-lg transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-orange-400 dark:hover:border-orange-600">
              <span class="text-2xl lg:text-3xl transition-transform duration-200 group-hover:-translate-y-1 group-active:translate-y-0">😊</span>
              <span class="text-xs text-gray-500 dark:text-gray-400 group-hover:text-orange-600 dark:group-hover:text-orange-400 mt-1">Good</span>
            </button>
          </div>
        </div>

        <button type="submit" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-all duration-200 transform hover:-translate-y-0.5 active:translate-y-0 active:scale-98">
          <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <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-4z" clip-rule="evenodd" />
          </svg>
          Submit Feedback
        </button>
      </form>
    </div>
  </div>
</div>

Media Embed Component - Crypto/Blockchain

A simple, responsive media embed component designed for cryptocurrency or blockchain applications, featuring sepia/brown tones and dark mode support to reduce eye strain.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-xl rounded-lg shadow-xl overflow-hidden bg-stone-200 dark:bg-stone-800 transition-colors duration-300 transform">
    <!-- Header -->
    <div class="flex items-center justify-between p-4 sm:p-5 border-b border-stone-300 dark:border-stone-700">
      <div class="flex items-center">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-stone-700 dark:text-stone-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="M9.75 17L9 20l-1 1h8l-1-1l-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
        </svg>
        <h3 class="ml-2 text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-200">Decentralized Insights</h3>
      </div>
      <button class="p-2 rounded-full hover:bg-stone-300 dark:hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-400 dark:focus:ring-offset-stone-800 dark:focus:ring-stone-600 transition-colors duration-200">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-stone-600 dark:text-stone-400" 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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Media Placeholder -->
    <div class="relative w-full overflow-hidden" style="padding-top: 56.25%;">
      <!-- 16:9 Aspect Ratio -->
      <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

    <!-- Content -->
    <div class="p-4 sm:p-5">
      <h4 class="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100 mb-2 leading-tight">Understanding Bitcoin Halving: A Deep Dive</h4>
      <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300 mb-4">
        Explore the mechanisms and historical impact of Bitcoin halving events on its supply, scarcity, and market dynamics.
        Essential knowledge for every crypto enthusiast.
      </p>
      <div class="flex items-center text-sm sm:text-base text-stone-600 dark:text-stone-400">
        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Author Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-stone-400 dark:border-stone-600">
        <div>
          <span class="font-medium text-stone-700 dark:text-stone-300">Crypto Insights Hub</span>
          <span class="block text-stone-500 dark:text-stone-400 text-xs sm:text-sm">Published 2 days ago</span>
        </div>
      </div>
    </div>

    <!-- Footer/Actions -->
    <div class="p-4 sm:p-5 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between">
      <button class="flex items-center text-stone-700 dark:text-stone-300 hover:text-brown-700 dark:hover:text-brown-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brown-400 dark:focus:ring-offset-stone-800 dark:focus:ring-brown-600 transition-colors duration-200">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
        </svg>
        <span class="text-sm sm:text-base">Like</span>
      </button>
      <button class="px-4 py-2 bg-amber-700 dark:bg-amber-600 text-white rounded-md text-sm sm:text-base font-semibold shadow-md hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-800 dark:focus:ring-amber-400 transition-colors duration-200">
        Share to DApp
      </button>
    </div>
  </div>
</div>

1 ... 71 72 73 74 75 ... 335