Search Components

All Components

Browse all available Tailwind CSS components

Neumorphic_Product_Reviews_Component_High_Contrast

A complex, high-contrast neumorphic product reviews component with booking/reservation features, designed for responsiveness and dark mode, offering a rich, interactive user interface.

Open Preview

                <div class="min-h-screen p-4 sm:p-6 md:p-8 flex items-center justify-center bg-gray-200 dark:bg-gray-800 font-sans">
  <div class="w-full max-w-4xl bg-gray-200 dark:bg-gray-800 p-6 rounded-3xl shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-300 ease-in-out">
    
    <!-- Header -->
    <div class="flex items-center justify-between mb-8 pb-4 border-b border-gray-300 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100">Customer Reviews</h2>
      <button class="flex items-center px-4 py-2 bg-gray-200 dark:bg-gray-800 rounded-xl text-gray-800 dark:text-gray-100 shadow-neumorphic-btn-light hover:shadow-neumorphic-btn-light-hover dark:shadow-neumorphic-btn-dark dark:hover:shadow-neumorphic-btn-dark-hover transition-all duration-200 ease-in-out">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
        <span class="hidden sm:inline">Write a Review</span>
      </button>
    </div>

    <!-- Average Rating and Summary -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
      <div class="md:col-span-1 flex flex-col items-center justify-center">
        <div class="text-6xl font-extrabold text-indigo-600 dark:text-indigo-400 mb-2">4.8</div>
        <div class="flex text-yellow-500 mb-2">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
          <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
        </div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Based on 1,234 reviews</p>
      </div>
      <div class="md:col-span-2 space-y-3">
        <!-- Star rating breakdown -->
        <div class="flex items-center">
          <span class="text-gray-800 dark:text-gray-100 w-8">5 <span class="hidden sm:inline">star</span></span>
          <div class="relative flex-grow h-3 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark mx-2 overflow-hidden">
            <div class="absolute top-0 left-0 h-full bg-green-500 rounded-full shadow-neumorphic-inset" style="width: 90%;"></div>
          </div>
          <span class="text-gray-600 dark:text-gray-300 w-10 text-right">90%</span>
        </div>
        <div class="flex items-center">
          <span class="text-gray-800 dark:text-gray-100 w-8">4 <span class="hidden sm:inline">star</span></span>
          <div class="relative flex-grow h-3 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark mx-2 overflow-hidden">
            <div class="absolute top-0 left-0 h-full bg-blue-500 rounded-full shadow-neumorphic-inset" style="width: 7%;"></div>
          </div>
          <span class="text-gray-600 dark:text-gray-300 w-10 text-right">7%</span>
        </div>
        <div class="flex items-center">
          <span class="text-gray-800 dark:text-gray-100 w-8">3 <span class="hidden sm:inline">star</span></span>
          <div class="relative flex-grow h-3 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark mx-2 overflow-hidden">
            <div class="absolute top-0 left-0 h-full bg-yellow-500 rounded-full shadow-neumorphic-inset" style="width: 2%;"></div>
          </div>
          <span class="text-gray-600 dark:text-gray-300 w-10 text-right">2%</span>
        </div>
        <div class="flex items-center">
          <span class="text-gray-800 dark:text-gray-100 w-8">2 <span class="hidden sm:inline">star</span></span>
          <div class="relative flex-grow h-3 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark mx-2 overflow-hidden">
            <div class="absolute top-0 left-0 h-full bg-orange-500 rounded-full shadow-neumorphic-inset" style="width: 0.5%;"></div>
          </div>
          <span class="text-gray-600 dark:text-gray-300 w-10 text-right">0.5%</span>
        </div>
        <div class="flex items-center">
          <span class="text-gray-800 dark:text-gray-100 w-8">1 <span class="hidden sm:inline">star</span></span>
          <div class="relative flex-grow h-3 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark mx-2 overflow-hidden">
            <div class="absolute top-0 left-0 h-full bg-red-500 rounded-full shadow-neumorphic-inset" style="width: 0.5%;"></div>
          </div>
          <span class="text-gray-600 dark:text-gray-300 w-10 text-right">0.5%</span>
        </div>
      </div>
    </div>

    <!-- Review Filters/Sort -->
    <div class="flex flex-col sm:flex-row items-center justify-between mb-8 space-y-4 sm:space-y-0">
      <div class="relative w-full sm:w-auto">
        <select class="block appearance-none w-full bg-gray-200 dark:bg-gray-800 border-none text-gray-800 dark:text-gray-100 py-3 pl-4 pr-10 rounded-xl shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-200 ease-in-out">
          <option>Most Recent</option>
          <option>Highest Rated</option>
          <option>Lowest Rated</option>
          <option>With Photos</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="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 6.757 7.586 5.343 9z"/></svg>
        </div>
      </div>
      <div class="relative w-full sm:w-auto">
        <input type="text" placeholder="Search reviews..." class="block w-full bg-gray-200 dark:bg-gray-800 border-none text-gray-800 dark:text-gray-100 py-3 pl-4 pr-10 rounded-xl shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-200 ease-in-out">
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-700 dark:text-gray-200">
          <svg class="fill-current h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.35zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
        </div>
      </div>
    </div>

    <!-- Review List -->
    <div class="space-y-8">

      <!-- Review Item 1 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark transition-all duration-300 ease-in-out">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 shadow-neumorphic-avatar-light dark:shadow-neumorphic-avatar-dark" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Jane Doe</p>
            <div class="flex text-yellow-500 text-sm">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
            </div>
          </div>
          <p class="ml-auto text-sm text-gray-500 dark:text-gray-400">2 days ago</p>
        </div>
        <p class="text-gray-700 dark:text-gray-200 mb-4">"Absolutely fantastic experience! The process was smooth, and the results exceeded my expectations. Highly recommend!"</p>
        <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-4">
          <img class="w-full h-24 object-cover rounded-xl shadow-neumorphic-image-light dark:shadow-neumorphic-image-dark" src="https://picsum.photos/300/200?random=1" alt="Review photo 1">
          <img class="w-full h-24 object-cover rounded-xl shadow-neumorphic-image-light dark:shadow-neumorphic-image-dark" src="https://picsum.photos/300/200?random=11" alt="Review photo 2">
          <img class="w-full h-24 object-cover rounded-xl shadow-neumorphic-image-light dark:shadow-neumorphic-image-dark hidden sm:block" src="https://picsum.photos/300/200?random=12" alt="Review photo 3">
        </div>
        <div class="flex items-center space-x-4">
          <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18.784 7.216A2 2 0 0017 6H9.7l2.846-5.69c.14-.28.093-.61-.122-.843a.997.997 0 00-1.22-.19l-7 4A1 1 0 003.5 5.5v9A1.5 1.5 0 005 16h8a2 2 0 002-2V9.382l3.784-2.166zM15 14H5v-7.882l5.77-3.297L15 6.07V14z"></path></svg>
            <span>Helpful (12)</span>
          </button>
          <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
            <span>Reply</span>
          </button>
        </div>
      </div>

      <!-- Review Item 2 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark transition-all duration-300 ease-in-out">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 shadow-neumorphic-avatar-light dark:shadow-neumorphic-avatar-dark" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">John Smith</p>
            <div class="flex text-yellow-500 text-sm">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
            </div>
          </div>
          <p class="ml-auto text-sm text-gray-500 dark:text-gray-400">1 week ago</p>
        </div>
        <p class="text-gray-700 dark:text-gray-200 mb-4">"Good service, but communication could be a little quicker. Overall satisfied with the appointment."</p>
        <div class="flex items-center space-x-4">
          <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18.784 7.216A2 2 0 0017 6H9.7l2.846-5.69c.14-.28.093-.61-.122-.843a.997.997 0 00-1.22-.19l-7 4A1 1 0 003.5 5.5v9A1.5 1.5 0 005 16h8a2 2 0 002-2V9.382l3.784-2.166zM15 14H5v-7.882l5.77-3.297L15 6.07V14z"></path></svg>
            <span>Helpful (5)</span>
          </button>
          <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
            <span>Reply</span>
          </button>
        </div>
      </div>

      <!-- Review Item 3 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark transition-all duration-300 ease-in-out">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 shadow-neumorphic-avatar-light dark:shadow-neumorphic-avatar-dark" src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Emily White</p>
            <div class="flex text-yellow-500 text-sm">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
            </div>
          </div>
          <p class="ml-auto text-sm text-gray-500 dark:text-gray-400">3 weeks ago</p>
        </div>
        <p class="text-gray-700 dark:text-gray-200 mb-4">"Flawless! From start to finish, everything was perfect. Made a reservation for next month already."</p>
        <div class="flex items-center space-x-4">
          <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18.784 7.216A2 2 0 0017 6H9.7l2.846-5.69c.14-.28.093-.61-.122-.843a.997.997 0 00-1.22-.19l-7 4A1 1 0 003.5 5.5v9A1.5 1.5 0 005 16h8a2 2 0 002-2V9.382l3.784-2.166zM15 14H5v-7.882l5.77-3.297L15 6.07V14z"></path></svg>
            <span>Helpful (19)</span>
          </button>
          <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
            <span>Reply</span>
          </button>
        </div>
      </div>

    </div>

    <!-- Pagination -->
    <div class="flex justify-center mt-8 space-x-2">
      <button class="w-10 h-10 flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out"><<</button>
      <button class="w-10 h-10 flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out"><</button>
      <button class="w-10 h-10 flex items-center justify-center bg-indigo-600 dark:bg-indigo-700 text-white font-bold rounded-lg shadow-neumorphic-btn-active-light dark:shadow-neumorphic-btn-active-dark transition-all duration-200 ease-in-out">1</button>
      <button class="w-10 h-10 flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">2</button>
      <button class="w-10 h-10 flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">3</button>
      <button class="w-10 h-10 flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">></button>
      <button class="w-10 h-10 flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">>></button>
    </div>

  </div>
</div>

<style>
  /* Base Neumorphic Shadow Styles */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #2e2e2e, -8px -8px 16px #444444;
  }

  /* Button Shadow Styles */
  .shadow-neumorphic-btn-light {
    box-shadow: 4px 4px 8px #a3b1c6, -4px -4px 8px #ffffff;
  }
  .shadow-neumorphic-btn-light:hover {
    box-shadow: inset 2px 2px 5px #a3b1c6, inset -2px -2px 5px #ffffff;
  }
  .dark .shadow-neumorphic-btn-dark {
    box-shadow: 4px 4px 8px #2e2e2e, -4px -4px 8px #444444;
  }
  .dark .shadow-neumorphic-btn-dark:hover {
    box-shadow: inset 2px 2px 5px #2e2e2e, inset -2px -2px 5px #444444;
  }

  /* Small Button Shadow Styles */
  .shadow-neumorphic-btn-small-light {
    box-shadow: 2px 2px 4px #a3b1c6, -2px -2px 4px #ffffff;
  }
  .shadow-neumorphic-btn-small-light:hover {
    box-shadow: inset 1px 1px 3px #a3b1c6, inset -1px -1px 3px #ffffff;
  }
  .dark .shadow-neumorphic-btn-small-dark {
    box-shadow: 2px 2px 4px #2e2e2e, -2px -2px 4px #444444;
  }
  .dark .shadow-neumorphic-btn-small-dark:hover {
    box-shadow: inset 1px 1px 3px #2e2e2e, inset -1px -1px 3px #444444;
  }

  /* Active Button Shadow Styles */
  .shadow-neumorphic-btn-active-light {
    box-shadow: inset 4px 4px 8px #8850c1, inset -4px -4px 8px #6c329b;
  }
  .dark .shadow-neumorphic-btn-active-dark {
    box-shadow: inset 4px 4px 8px #4a276b, inset -4px -4px 8px #7a469f;
  }

  /* Card Shadow Styles */
  .shadow-neumorphic-card-light {
    box-shadow: 6px 6px 12px #a3b1c6, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-card-dark {
    box-shadow: 6px 6px 12px #2e2e2e, -6px -6px 12px #444444;
  }

  /* Avatar Shadow Styles */
  .shadow-neumorphic-avatar-light {
    box-shadow: 3px 3px 6px #a3b1c6, -3px -3px 6px #ffffff;
  }
  .dark .shadow-neumorphic-avatar-dark {
    box-shadow: 3px 3px 6px #2e2e2e, -3px -3px 6px #444444;
  }

  /* Image Shadow Styles */
  .shadow-neumorphic-image-light {
    box-shadow: 4px 4px 8px #a3b1c6, -4px -4px 8px #ffffff;
  }
  .dark .shadow-neumorphic-image-dark {
    box-shadow: 4px 4px 8px #2e2e2e, -4px -4px 8px #444444;
  }

  /* Inner Shadow for Progress Bars/Inputs */
  .shadow-inner-neumorphic-light {
    box-shadow: inset 2px 2px 5px #a3b1c6, inset -2px -2px 5px #ffffff;
  }
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 2px 2px 5px #2e2e2e, inset -2px -2px 5px #444444;
  }

  /* Inset shadow for active progress bar fill */
  .shadow-neumorphic-inset {
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2), inset -1px -1px 3px rgba(255,255,255,0.4);
  }
</style>

Login/Signup Component - Earth Tones Gradient

A responsive login/signup component designed for job/career platforms, featuring earth tone gradients and smooth transitions. Includes dark mode support and semantic HTML.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-stone-100 to-amber-50 dark:from-stone-900 dark:to-orange-950 transition-all duration-500">
  <div class="w-full max-w-md rounded-2xl shadow-xl overflow-hidden bg-white dark:bg-stone-800 transition-all duration-500 transform hover:scale-[1.01]">
    <div class="relative p-8 sm:p-10 bg-gradient-to-tr from-stone-400 to-amber-600 dark:from-stone-700 dark:to-orange-800 text-white">
      <h2 id="form-title" class="text-3xl sm:text-4xl font-extrabold text-center drop-shadow-md leading-tight">
        Welcome,
        <br class="sm:hidden"/> 
        Future Talent!
      </h2>
      <p class="mt-3 text-center opacity-90 text-sm sm:text-base">
        Find your dream job or connect with top employers.
      </p>
      <div class="absolute inset-0 z-0 opacity-20">
        <img src="https://picsum.photos/600/400?random=1" alt="Abstract background" class="w-full h-full object-cover" />
      </div>
    </div>

    <div class="p-8 sm:p-10">
      <div class="flex mb-6 rounded-lg overflow-hidden bg-stone-100 dark:bg-stone-700 shadow-inner">
        <button
          id="login-tab"
          class="flex-1 py-3 px-4 text-center text-lg font-semibold rounded-lg
          bg-gradient-to-r from-amber-600 to-orange-700 text-white shadow-md
          dark:from-orange-700 dark:to-stone-600 transition-all duration-300 transform scale-105"
          aria-controls="login-form" role="tab" aria-selected="true"
        >
          Login
        </button>
        <button
          id="signup-tab"
          class="flex-1 py-3 px-4 text-center text-lg font-medium text-stone-600 rounded-lg
          dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-300 hover:bg-stone-50 dark:hover:bg-stone-600"
          aria-controls="signup-form" role="tab" aria-selected="false"
        >
          Sign Up
        </button>
      </div>

      <form id="login-form" class="space-y-6" aria-labelledby="form-title" role="tabpanel">
        <div>
          <label for="login-email" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Email Address</label>
          <input
            type="email"
            id="login-email"
            name="email"
            autocomplete="email"
            required
            class="w-full px-4 py-3 border border-stone-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500
            dark:bg-stone-700 dark:border-stone-600 dark:text-white dark:focus:ring-amber-400 dark:focus:border-amber-400 transition-all duration-200"
            placeholder="[email protected]"
          />
        </div>
        <div>
          <label for="login-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Password</label>
          <input
            type="password"
            id="login-password"
            name="password"
            autocomplete="current-password"
            required
            class="w-full px-4 py-3 border border-stone-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500
            dark:bg-stone-700 dark:border-stone-600 dark:text-white dark:focus:ring-amber-400 dark:focus:border-amber-400 transition-all duration-200"
            placeholder="********"
          />
        </div>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input
              id="remember-me"
              name="remember-me"
              type="checkbox"
              class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-stone-300 rounded dark:text-amber-500 dark:focus:ring-amber-400 dark:border-stone-600"
            />
            <label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-200">Remember me</label>
          </div>
          <a href="#" class="text-sm font-medium text-amber-600 hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-300 transition-colors duration-200">Forgot password?</a>
        </div>
        <button
          type="submit"
          class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-semibold text-white
          bg-gradient-to-r from-amber-600 to-orange-700 hover:from-amber-700 hover:to-orange-800
          dark:from-orange-800 dark:to-orange-900 dark:hover:from-orange-900 dark:hover:to-stone-900
          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-800 dark:focus:ring-orange-600
          transition-all duration-300 transform hover:scale-[1.01] active:scale-[0.99]"
        >
          Login
        </button>
      </form>

      <form id="signup-form" class="space-y-6 hidden" aria-labelledby="form-title" role="tabpanel">
        <div>
          <label for="signup-name" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Full Name</label>
          <input
            type="text"
            id="signup-name"
            name="name"
            autocomplete="name"
            required
            class="w-full px-4 py-3 border border-stone-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500
            dark:bg-stone-700 dark:border-stone-600 dark:text-white dark:focus:ring-amber-400 dark:focus:border-amber-400 transition-all duration-200"
            placeholder="John Doe"
          />
        </div>
        <div>
          <label for="signup-email" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Email Address</label>
          <input
            type="email"
            id="signup-email"
            name="email"
            autocomplete="email"
            required
            class="w-full px-4 py-3 border border-stone-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500
            dark:bg-stone-700 dark:border-stone-600 dark:text-white dark:focus:ring-amber-400 dark:focus:border-amber-400 transition-all duration-200"
            placeholder="[email protected]"
          />
        </div>
        <div>
          <label for="signup-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Password</label>
          <input
            type="password"
            id="signup-password"
            name="password"
            autocomplete="new-password"
            required
            class="w-full px-4 py-3 border border-stone-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500
            dark:bg-stone-700 dark:border-stone-600 dark:text-white dark:focus:ring-amber-400 dark:focus:border-amber-400 transition-all duration-200"
            placeholder="Minimum 8 characters"
          />
        </div>
        <button
          type="submit"
          class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-semibold text-white
          bg-gradient-to-r from-amber-600 to-orange-700 hover:from-amber-700 hover:to-orange-800
          dark:from-orange-800 dark:to-orange-900 dark:hover:from-orange-900 dark:hover:to-stone-900
          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-800 dark:focus:ring-orange-600
          transition-all duration-300 transform hover:scale-[1.01] active:scale-[0.99]"
        >
          Sign Up
        </button>
      </form>

      <div class="mt-8 text-center">
        <p class="text-sm text-stone-600 dark:text-stone-400">
          Or continue with
        </p>
        <div class="mt-4 flex justify-center space-x-4">
          <button class="p-3 rounded-full bg-stone-100 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors shadow flex items-center justify-center">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12.0003 12.721C14.0506 12.721 15.6565 12.0299 16.7909 10.9234L19.4636 13.5961C17.7533 15.2259 15.2891 16.2737 12.0003 16.2737C7.4 16.2737 3.5332 13.2981 1.9996 9.27856L5.37482 6.67139C6.20817 8.8951 8.878 10.2737 12.0003 10.2737C13.2514 10.2737 14.4093 10.0245 15.4206 9.61056L18.8094 12.2797C17.4786 12.637 15.7009 12.721 12.0003 12.721Z" fill="#EA4335"/>
              <path d="M23.6393 12.0003C23.6393 11.1017 23.5701 10.4284 23.4184 9.7712L12.0003 9.7712L12.0003 14.281L18.3754 14.281C18.0487 15.7531 17.1504 16.9404 15.9381 17.7471L19.313 20.3542C21.4116 18.2307 22.8711 15.3409 23.6393 12.0003Z" fill="#4285F4"/>
              <path d="M12.0003 23.639C15.2891 23.639 18.0818 22.5694 20.0883 20.7381L16.7136 18.1309C15.8236 18.7303 14.5492 19.1678 12.0003 19.1678C8.80877 19.1678 6.13883 17.5517 4.90849 14.9446L1.5332 17.5517C3.39167 21.0506 7.4 23.639 12.0003 23.639Z" fill="#34A853"/>
              <path d="M4.90849 14.9446C4.46048 13.7918 4.22559 12.4497 4.22559 11.0002C4.22559 9.5507 4.46048 8.20857 4.90849 7.05574L1.5332 4.44856C0.540866 6.3106 0 8.5804 0 11.0002C0 13.4199 0.540866 15.6897 1.5332 17.5517L4.90849 14.9446Z" fill="#FBBC04"/>
            </svg>
          </button>
          <button class="p-3 rounded-full bg-stone-100 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors shadow flex items-center justify-center">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M19.0303 1.25H4.96963C3.06748 1.25 1.5 2.81748 1.5 4.71963V19.0303C1.5 20.9325 3.06748 22.5 4.96963 22.5H19.0303C20.9325 22.5 22.5 20.9325 22.5 19.0303V4.96963C22.5 3.06748 20.9325 1.5 19.0303 1.5V1.25ZM11.9999 18.0002C8.70992 18.0002 6 15.2903 6 11.9999C6 8.70992 8.70992 6 11.9999 6C15.2903 6 18.0002 8.70992 18.0002 11.9999C18.0002 15.2903 15.2903 18.0002 11.9999 18.0002ZM19.5 7.275C18.8407 7.275 18.3 6.73427 18.3 6.075C18.3 5.41573 18.8407 4.875 19.5 4.875C20.1593 4.875 20.7 5.41573 20.7 6.075C20.7 6.73427 20.1593 7.275 19.5 7.275ZM11.9999 16.5C14.4852 16.5 16.5002 14.4852 16.5002 11.9999C16.5002 9.5146 14.4852 7.5 11.9999 7.5C9.5146 7.5 7.5 9.5146 7.5 11.9999C7.5 14.4852 9.5146 16.5 11.9999 16.5Z" fill="#C13584"/>
            </svg>
          </button>
          <button class="p-3 rounded-full bg-stone-100 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors shadow flex items-center justify-center">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M22.28 6.02C21.69 5.09 20.59 4.34 19.34 4.08C17.76 3.75 12 3.75 12 3.75C12 3.75 6.24 3.75 4.66 4.08C3.41 4.34 2.31 5.09 1.72 6.02C1.29 6.64 1.05 7.42 1.05 8.23C1.05 9.04 1.29 9.82 1.72 10.45L12 19.64L22.28 10.45C22.71 9.82 22.95 9.04 22.95 8.23C22.95 7.42 22.71 6.64 22.28 6.02Z" fill="#FF0000"/>
              <path d="M9.75 15.22L7.31 12.78L6.2 13.91L9.75 17.45L17.81 9.39L16.7 8.28L9.75 15.22Z" fill="#FFFFFF"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  const loginTab = document.getElementById('login-tab');
  const signupTab = document.getElementById('signup-tab');
  const loginForm = document.getElementById('login-form');
  const signupForm = document.getElementById('signup-form');

  loginTab.addEventListener('click', () => {
    loginTab.classList.remove('bg-stone-100', 'dark:bg-stone-700', 'text-stone-600', 'dark:text-stone-300', 'hover:text-amber-800', 'dark:hover:text-amber-300', 'hover:bg-stone-50', 'dark:hover:bg-stone-600', 'font-medium');
    loginTab.classList.add('bg-gradient-to-r', 'from-amber-600', 'to-orange-700', 'text-white', 'shadow-md', 'dark:from-orange-700', 'dark:to-stone-600', 'font-semibold', 'scale-105');
    loginTab.setAttribute('aria-selected', 'true');

    signupTab.classList.remove('bg-gradient-to-r', 'from-amber-600', 'to-orange-700', 'text-white', 'shadow-md', 'dark:from-orange-700', 'dark:to-stone-600', 'font-semibold', 'scale-105');
    signupTab.classList.add('bg-stone-100', 'dark:bg-stone-700', 'text-stone-600', 'dark:text-stone-300', 'hover:text-amber-800', 'dark:hover:text-amber-300', 'hover:bg-stone-50', 'dark:hover:bg-stone-600', 'font-medium');
    signupTab.setAttribute('aria-selected', 'false');

    loginForm.classList.remove('hidden');
    signupForm.classList.add('hidden');
  });

  signupTab.addEventListener('click', () => {
    signupTab.classList.remove('bg-stone-100', 'dark:bg-stone-700', 'text-stone-600', 'dark:text-stone-300', 'hover:text-amber-800', 'dark:hover:text-amber-300', 'hover:bg-stone-50', 'dark:hover:bg-stone-600', 'font-medium');
    signupTab.classList.add('bg-gradient-to-r', 'from-amber-600', 'to-orange-700', 'text-white', 'shadow-md', 'dark:from-orange-700', 'dark:to-stone-600', 'font-semibold', 'scale-105');
    signupTab.setAttribute('aria-selected', 'true');

    loginTab.classList.remove('bg-gradient-to-r', 'from-amber-600', 'to-orange-700', 'text-white', 'shadow-md', 'dark:from-orange-700', 'dark:to-stone-600', 'font-semibold', 'scale-105');
    loginTab.classList.add('bg-stone-100', 'dark:bg-stone-700', 'text-stone-600', 'dark:text-stone-300', 'hover:text-amber-800', 'dark:hover:text-amber-300', 'hover:bg-stone-50', 'dark:hover:bg-stone-600', 'font-medium');
    loginTab.setAttribute('aria-selected', 'false');

    signupForm.classList.remove('hidden');
    loginForm.classList.add('hidden');
  });

  // Initial state for dark mode (if system prefers dark mode)
  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.documentElement.classList.add('dark');
  }
</script>

E-commerce Heat Map Component - Watercolor Neon

A responsive e-commerce heat map component with a watercolor/artistic style and a neon/electric color scheme, supporting dark mode. It represents product interest or sales data using a grid of glowing cells.

Open Preview

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

  <!-- Component Title -->
  <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 via-pink-500 to-yellow-400 dark:from-purple-400 dark:via-pink-300 dark:to-yellow-200 mb-8 text-center drop-shadow-lg leading-tight">
    Product Interest Heatmap
  </h2>
  <p class="text-center text-lg text-gray-700 dark:text-gray-300 mb-12 max-w-2xl mx-auto opacity-90">
    Visualize customer engagement and popular items with this artistic heatmap of product categories. Each 'glow' represents a higher level of user interaction.
  </p>

  <!-- Heatmap Grid Container -->
  <div class="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8 p-4 bg-gradient-to-br from-indigo-100 to-purple-100 dark:from-gray-800 dark:to-gray-950 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden relative border border-purple-200 dark:border-indigo-700">

    <!-- Background artistic elements (optional, can be simplified for pure Tailwind) -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
      <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
        <defs>
          <filter id="watercolorBlur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
            <feComposite in="SourceGraphic" in2="blur" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
          </filter>
        </defs>
        <circle cx="10" cy="10" r="8" fill="#f06" filter="url(#watercolorBlur)" />
        <circle cx="90" cy="20" r="12" fill="#0cf" filter="url(#watercolorBlur)" />
        <circle cx="30" cy="80" r="10" fill="#6f0" filter="url(#watercolorBlur)" />
        <circle cx="70" cy="90" r="15" fill="#ff0" filter="url(#watercolorBlur)" />
      </svg>
    </div>

    <!-- Individual Heatmap Cells -->
    <!-- Cell 1: High Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-pink-300 dark:hover:border-pink-600 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-60 group-hover:opacity-80"
        style="box-shadow: 0 0 40px #ff00ff, 0 0 80px #ff00ff;"></div>
      <img src="https://picsum.photos/seed/heatmap1/300/200" alt="Electronics" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-pink-300 dark:border-pink-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Electronics</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">12,000+ views</p>
    </div>

    <!-- Cell 2: Medium Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-lime-200 dark:hover:border-lime-500 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-40 group-hover:opacity-60"
        style="box-shadow: 0 0 30px #00ff00, 0 0 60px #00ff00;"></div>
      <img src="https://picsum.photos/seed/heatmap2/300/200" alt="Apparel" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-lime-300 dark:border-lime-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Apparel</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">8,900+ views</p>
    </div>

    <!-- Cell 3: High Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-blue-300 dark:hover:border-blue-600 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-70 group-hover:opacity-90"
        style="box-shadow: 0 0 50px #00bfff, 0 0 100px #00bfff;"></div>
      <img src="https://picsum.photos/seed/heatmap3/300/200" alt="Home Goods" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-blue-300 dark:border-blue-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Home Goods</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">15,500+ views</p>
    </div>

    <!-- Cell 4: Medium Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-purple-300 dark:hover:border-purple-600 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-50 group-hover:opacity-70"
        style="box-shadow: 0 0 35px #8a2be2, 0 0 70px #8a2be2;"></div>
      <img src="https://picsum.photos/seed/heatmap4/300/200" alt="Books & Media" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-purple-300 dark:border-purple-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Books & Media</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">9,800+ views</p>
    </div>

    <!-- Cell 5: Low Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-yellow-200 dark:hover:border-yellow-500 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-20 group-hover:opacity-40"
        style="box-shadow: 0 0 20px #ffff00, 0 0 40px #ffff00;"></div>
      <img src="https://picsum.photos/seed/heatmap5/300/200" alt="Sports Gear" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-yellow-300 dark:border-yellow-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Sports Gear</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">4,100+ views</p>
    </div>

    <!-- Cell 6: High Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-rose-300 dark:hover:border-rose-600 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-65 group-hover:opacity-85"
        style="box-shadow: 0 0 45px #ff1493, 0 0 90px #ff1493;"></div>
      <img src="https://picsum.photos/seed/heatmap6/300/200" alt="Beauty Products" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-rose-300 dark:border-rose-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Beauty Products</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">11,200+ views</p>
    </div>

    <!-- Cell 7: Medium Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-cyan-300 dark:hover:border-cyan-600 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-45 group-hover:opacity-65"
        style="box-shadow: 0 0 32px #00ffff, 0 0 64px #00ffff;"></div>
      <img src="https://picsum.photos/seed/heatmap7/300/200" alt="Kids & Toys" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-cyan-300 dark:border-cyan-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Kids & Toys</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">7,500+ views</p>
    </div>

    <!-- Cell 8: Low Interest -->
    <div class="z-10 relative group bg-white dark:bg-gray-800 p-3 sm:p-5 rounded-2xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-transparent hover:border-emerald-200 dark:hover:border-emerald-500 overflow-hidden">
      <div class="absolute inset-0 rounded-2xl -z-10 transition-all duration-500 opacity-25 group-hover:opacity-45"
        style="box-shadow: 0 0 25px #3cb371, 0 0 50px #3cb371;"></div>
      <img src="https://picsum.photos/seed/heatmap8/300/200" alt="Pet Supplies" class="w-full h-28 sm:h-36 object-cover rounded-xl mb-3 border border-emerald-300 dark:border-emerald-600 shadow-inner group-hover:shadow-lg">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Pet Supplies</h3>
      <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 opacity-90">3,200+ views</p>
    </div>

  </div>
</div>

Artistic_Sepia_Pagination_Component

A complex, artistic pagination component with sepia/brown tones, inspired by watercolor textures, suitable for CRM/Business Tools. Fully responsive with dark mode support.

Open Preview

                <nav class="flex items-center justify-between px-4 sm:px-6 lg:px-8 py-3 bg-gradient-to-br from-amber-50 to-amber-100 dark:from-stone-900 dark:to-stone-950 rounded-2xl shadow-xl font-sans text-stone-800 dark:text-stone-300 relative overflow-hidden" aria-label="Pagination">
  
  <!-- Background texture overlay -->
  <div class="absolute inset-0 opacity-20 dark:opacity-10" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZmlsdGVyIGlkPSJlZmZlY3QiPgogICAgPGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsdE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjA1IiBudW1PY3RhdmVzPSIxIiBzdGl0Y2hUYWlscz0icmFnd2VkIiBzdGl0Y2hUYWlscz0icmFnd2VkIiByZXN1bHQ9InR1cmJ1bGVuY2UiLz4KICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz4KICAgIDxmZUNvbXBvc2l0ZSBpbj0iU291cmNlQWxwaGEiIGluMj0idHVyYnVsZW5jZSIgb3BlcmF0b3I9ImluIiByZXN1bHQ9ImJsdXJlZF9ub2lzZSIvPgogICAgPGZlQmxlbmQgaW49IldhdGVybWFyayIgJmlubzI9ImJsdXJlZF9ub2lzZSIgbW9kZT0ibXVsdGlwbHkiLz4KICA8L2ZpbHRlcj4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJyZ2JhKDIxNywgMTk5LCAxNjgsIDAuMzUpIiBmaWx0ZXI9InVybCgjZWZmZWN0KSIgLz4KPC9zdmc+')"></div>

  <div class="flex-1 flex justify-between items-center">
    <!-- Previous Button -->
    <div class="w-auto md:w-1/3 order-1">
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-stone-300 dark:border-stone-700 bg-stone-200 hover:bg-stone-300 dark:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 ease-in-out text-stone-700 dark:text-stone-300 shadow-sm group">
        <svg class="h-5 w-5 mr-2 -ml-1 text-stone-600 dark:text-stone-400 group-hover:text-stone-800 dark:group-hover:text-stone-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 010 1.06L9.56 10l3.23 3.71a.75.75 0 11-1.06 1.06l-3.75-3.75a.75.75 0 010-1.06l3.75-3.75a.75.75 0 011.06 0z" clip-rule="evenodd" />
        </svg>
        <span class="hidden sm:inline">Previous</span>
        <span class="sm:hidden">Prev</span>
      </a>
    </div>

    <!-- Page Numbers (Desktop/Tablet) -->
    <div class="hidden md:flex justify-center flex-1 order-2 space-x-2">
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-transparent text-stone-600 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-200 ease-in-out">
        1
      </a>
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-transparent text-stone-600 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-200 ease-in-out">
        2
      </a>
      <a href="#" aria-current="page" class="relative z-10 inline-flex items-center px-4 py-2 text-sm font-semibold rounded-full border border-amber-400 dark:border-amber-600 bg-amber-300 dark:bg-amber-700 text-stone-900 dark:text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-amber-50">3</a>
      <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-stone-500 dark:text-stone-500 rounded-full">
        ...
      </span>
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-transparent text-stone-600 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-200 ease-in-out">
        10
      </a>
    </div>

    <!-- Page Status (Mobile) -->
    <div class="flex md:hidden flex-1 justify-center order-2 text-sm font-medium text-stone-700 dark:text-stone-300">
      Page <span class="font-semibold mx-1">3</span> of <span class="font-semibold mx-1">10</span>
    </div>

    <!-- Next Button -->
    <div class="w-auto md:w-1/3 order-3 flex justify-end">
      <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-full border border-stone-300 dark:border-stone-700 bg-stone-200 hover:bg-stone-300 dark:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 ease-in-out text-stone-700 dark:text-stone-300 shadow-sm group">
        <span class="hidden sm:inline">Next</span>
        <span class="sm:hidden">Next</span>
        <svg class="h-5 w-5 ml-2 -mr-1 text-stone-600 dark:text-stone-400 group-hover:text-stone-800 dark:group-hover:text-stone-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 010-1.06L10.44 10 7.21 6.29a.75.75 0 111.06-1.06l3.75 3.75a.75.75 0 010 1.06l-3.75 3.75a.75.75 0 01-1.06 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>

  <!-- Entries label (Desktop Only) -->
  <div class="absolute hidden lg:flex left-8 top-1/2 -translate-y-1/2 text-sm text-stone-600 dark:text-stone-400">
    <p class="mr-2">Showing</p>
    <p class="font-semibold text-stone-800 dark:text-stone-200 inline-block">1</p>
    <p class="mx-1">to</p>
    <p class="font-semibold text-stone-800 dark:text-stone-200 inline-block">10</p>
    <p class="ml-1">of</p>
    <p class="font-semibold text-stone-800 dark:text-stone-200 inline-block ml-1">97</p>
    <p class="ml-1">entries</p>
  </div>

  <!-- Dropdown for Results per Page (Desktop Only) -->
  <div class="absolute hidden lg:flex right-8 top-1/2 -translate-y-1/2 text-sm text-stone-600 dark:text-stone-400 items-center">
    <label for="results-per-page" class="mr-2">Results Per Page:</label>
    <select id="results-per-page" name="results-per-page" class="block w-auto py-1.5 pl-3 pr-8 rounded-full border border-stone-300 dark:border-stone-700 bg-stone-100 dark:bg-stone-800 text-stone-800 dark:text-stone-300 sm:text-sm shadow-sm focus:border-amber-500 focus:ring-amber-500 transition-colors duration-200 ease-in-out cursor-pointer">
      <option value="10" selected>10</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>
  </div>

</nav>

Skeuomorphic_Farm_Video_Player

A skeuomorphic video player component designed for agricultural and farming websites, featuring black and white with a bright accent color, responsive layout, and dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-4xl bg-gray-200 dark:bg-gray-800 rounded-3xl shadow-xl border-4 border-gray-300 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000">
    <!-- Top Bezel / Screen Area -->
    <div class="relative bg-black rounded-xl overflow-hidden shadow-inner-lg shadow-gray-400/30 dark:shadow-black/50 aspect-video mb-6">
      <img src="https://picsum.photos/1280/720?random=1" alt="Video Thumbnail" class="object-cover w-full h-full" />
      <!-- Play Button Overlay -->
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30">
        <button class="w-24 h-24 rounded-full bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-4 focus:ring-green-400 focus:ring-opacity-75 transition-all duration-300 transform active:scale-95 shadow-lg shadow-green-500/50 flex items-center justify-center group">
          <svg class="w-12 h-12 text-white group-hover:scale-110 transition-transform duration-300" 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>
        </button>
      </div>
    </div>

    <!-- Controls Area -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- Left Controls: Playback & Volume -->
      <div class="flex justify-around items-center bg-gray-300 dark:bg-gray-700 rounded-2xl p-4 shadow-inner shadow-gray-400/40 dark:shadow-black/60">
        <button class="p-3 rounded-full bg-gray-400 dark:bg-gray-600 shadow-md shadow-gray-500/50 dark:shadow-black/70 hover:bg-gray-500 dark:hover:bg-gray-500 transition-colors active:scale-95 transform">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a1 1 0 011-1h4a1 1 0 110 2H6v10a1 1 0 11-2 0V4zm10 0a1 1 0 011-1h4a1 1 0 110 2h-3v10a1 1 0 11-2 0V4z" clip-rule="evenodd"></path></svg>
        </button>
        <button class="p-3 rounded-full bg-green-500 dark:bg-green-600 shadow-md shadow-green-500/40 dark:shadow-green-700/60 hover:bg-green-600 dark:hover:bg-green-700 transition-colors active:scale-95 transform">
          <svg class="w-8 h-8 text-white" 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>
        </button>
        <button class="p-3 rounded-full bg-gray-400 dark:bg-gray-600 shadow-md shadow-gray-500/50 dark:shadow-black/70 hover:bg-gray-500 dark:hover:bg-gray-500 transition-colors active:scale-95 transform">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a1 1 0 011-1h4a1 1 0 110 2H6v10a1 1 0 11-2 0V4zm10 0a1 1 0 011-1h4a1 1 0 110 2h-3v10a1 1 0 11-2 0V4z" clip-rule="evenodd"></path></svg>
        </button>
      </div>

      <!-- Right Controls: Progress Bar & More Options -->
      <div class="flex flex-col justify-between bg-gray-300 dark:bg-gray-700 rounded-2xl p-4 shadow-inner shadow-gray-400/40 dark:shadow-black/60">
        <div class="relative w-full h-4 bg-gray-400 dark:bg-gray-600 rounded-full mb-4 shadow-inset-sm shadow-gray-500/30 dark:shadow-black/40">
          <div class="absolute h-full w-3/4 bg-green-500 rounded-full shadow-md shadow-green-500/50 dark:shadow-green-700/60"></div>
          <div class="absolute h-6 w-6 -right-1 top-1/2 -translate-y-1/2 bg-white dark:bg-gray-200 rounded-full border-2 border-green-500 dark:border-green-600 shadow-lg shadow-black/30 dark:shadow-black/50 cursor-pointer"></div>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-gray-700 dark:text-gray-300 text-sm font-semibold mr-2">0:45 / 2:30</span>
          <button class="p-2 rounded-full bg-gray-400 dark:bg-gray-600 shadow-md shadow-gray-500/50 dark:shadow-black/70 hover:bg-gray-500 dark:hover:bg-gray-500 transition-colors active:scale-95 transform">
            <svg class="w-5 h-5 text-gray-800 dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 00-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM17 4a1 1 0 00-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4z"></path></svg>
          </button>
          <button class="p-2 rounded-full bg-gray-400 dark:bg-gray-600 shadow-md shadow-gray-500/50 dark:shadow-black/70 hover:bg-gray-500 dark:hover:bg-gray-500 transition-colors active:scale-95 transform">
            <svg class="w-5 h-5 text-gray-800 dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.546 15.58a.75.75 0 01.442.263l6.5-6.5a.75.75 0 011.06 1.06l-6.208 6.207a2.25 2.25 0 01-3.182 0l-4.25-4.25a.75.75 0 011.06-1.06l4.25 4.25a.75.75 0 001.06 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.5 10.5a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H5.25a.75.75 0 01-.75-.75z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom shadow utilities for skeuomorphism */
  .shadow-inner-lg {
    box-shadow: inset 0 6px 12px -2px rgba(0, 0, 0, 0.4), inset 0 -6px 12px -2px rgba(255, 255, 255, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  .dark .shadow-inner-lg {
    box-shadow: inset 0 6px 12px -2px rgba(0, 0, 0, 0.6), inset 0 -6px 12px -2px rgba(255, 255, 255, 0.05), inset 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  .shadow-inset-sm {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 -1px 2px rgba(255, 255, 255, 0.1);
  }
  .dark .shadow-inset-sm {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 -1px 2px rgba(255, 255, 255, 0.05);
  }
  /* Perspective for a slight 3D tilt */
  .perspective-1000 {
    transform: rotateX(2deg) rotateY(0deg);
  }
  @media (max-width: 639px) {
    .perspective-1000 {
      transform: none; /* Disable perspective on small screens */
    }
  }
</style>

Real Estate Listing Card - Watercolor/Neon

A complex real estate listing card with a watercolor/artistic soft background and a neon/electric color scheme. Features property details, agent info, and price, with full responsiveness and dark mode support.

Open Preview

                <div class="font-sans antialiased bg-stone-50 dark:bg-zinc-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="w-full max-w-4xl bg-white dark:bg-zinc-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] dark:shadow-zinc-800/50 relative p-0 group">
    <!-- Artistic Background Overlay -->
    <div class="absolute inset-0 bg-gradient-to-br from-purple-200 via-pink-100 to-blue-200 dark:from-zinc-700 dark:via-zinc-800 dark:to-zinc-700 opacity-70 rounded-3xl z-0 group-hover:opacity-80 transition-opacity duration-300"></div>
    <div class="absolute inset-0 filter blur-3xl opacity-30 dark:opacity-20 z-0 bg-[url('https://www.transparenttextures.com/patterns/natural-paper.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/dark-mosaic.png')] group-hover:blur-2xl transition-all duration-300"></div>

    <div class="relative z-10 flex flex-col md:flex-row p-4 sm:p-8 lg:p-12 gap-6 sm:gap-8 lg:gap-10">

      <!-- Image Section -->
      <div class="flex-shrink-0 w-full md:w-2/5 aspect-video md:aspect-square overflow-hidden rounded-2xl shadow-lg border-2 border-fuchsia-400 dark:border-cyan-600 group-hover:border-lime-400 dark:group-hover:border-fuchsia-600 transition-all duration-300">
        <img src="https://picsum.photos/id/1015/800/600" alt="Modern House" class="w-full h-full object-cover transform scale-105 group-hover:scale-100 transition-transform duration-500 ease-in-out">
      </div>

      <!-- Content Section -->
      <div class="flex flex-col flex-grow">
        <header class="mb-4 sm:mb-6">
          <div class="flex items-center justify-between mb-2">
            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-indigo-700 dark:text-orange-300 leading-tight group-hover:text-fuchsia-600 dark:group-hover:text-lime-400 transition-colors duration-300 tracking-tight">
              Luxury Waterfront Villa
            </h2>
            <span class="text-2xl sm:text-3xl font-bold px-4 py-2 bg-gradient-to-br from-lime-400 to-teal-400 text-purple-900 rounded-full shadow-lg dark:from-cyan-500 dark:to-blue-700 dark:text-white transform rotate-3 transition-transform duration-300 group-hover:rotate-0 group-hover:scale-105">
              $1,850,000
            </span>
          </div>
          <p class="text-lg text-stone-600 dark:text-zinc-400 mt-1 flex items-center">
            <svg class="w-5 h-5 mr-2 text-fuchsia-500 dark:text-cyan-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            Miami Beach, FL 33139
          </p>
        </header>

        <div class="grid grid-cols-2 gap-y-3 gap-x-6 mb-6 sm:mb-8 text-stone-700 dark:text-zinc-300">
          <div class="flex items-center text-lg">
            <svg class="w-6 h-6 mr-2 text-cyan-500 dark:text-lime-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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h2a1 1 0 001-1m-6 0v-4a1 1 0 011-1h2a1 1 0 011 1v4m-6 0h6"></path></svg>
            <span class="font-semibold">5</span> Beds
          </div>
          <div class="flex items-center text-lg">
            <svg class="w-6 h-6 mr-2 text-fuchsia-500 dark:text-blue-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="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"></path></svg>
            <span class="font-semibold">6</span> Baths
          </div>
          <div class="flex items-center text-lg">
            <svg class="w-6 h-6 mr-2 text-teal-500 dark:text-purple-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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4m0-10h.01"></path></svg>
            <span class="font-semibold">7,200</span> sqft
          </div>
          <div class="flex items-center text-lg">
            <svg class="w-6 h-6 mr-2 text-orange-500 dark:text-pink-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="M9 20l-5 5V9l5-5 5 5v7.21l-3 3M15 15l-3 3-3-3m-2 4h6m-1 0v-3m2 3v-3"></path></svg>
            <span class="font-semibold">Built 2021</span>
          </div>
        </div>

        <p class="text-stone-700 dark:text-zinc-300 text-base sm:text-lg mb-6 leading-relaxed">
          Discover unparalleled luxury in this stunning waterfront estate. Featuring panoramic ocean views, a private dock, and state-of-the-art smart home technology. Perfect for discerning buyers seeking an exquisite lifestyle.
        </p>

        <!-- Agent Info -->
        <div class="flex items-center mt-auto pt-4 border-t border-purple-200 dark:border-zinc-700">
          <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Agent Name" class="w-14 h-14 rounded-full mr-4 border-2 border-lime-400 dark:border-cyan-500 shadow-md group-hover:border-fuchsia-500 dark:group-hover:border-lime-300 transition-all duration-300">
          <div>
            <p class="font-semibold text-lg text-emerald-800 dark:text-orange-200 group-hover:text-purple-600 dark:group-hover:text-yellow-300 transition-colors duration-300">Michael Scott</p>
            <p class="text-sm text-stone-500 dark:text-zinc-400">Senior Real Estate Agent</p>
          </div>
          <a href="#" class="ml-auto bg-gradient-to-br from-purple-500 to-indigo-600 hover:from-purple-600 hover:to-indigo-700 dark:from-cyan-600 dark:to-blue-700 dark:hover:from-cyan-700 dark:hover:to-blue-800 text-white font-bold py-3 px-6 rounded-full shadow-lg transform transition-all duration-300 tracking-wide text-sm sm:text-base hover:scale-105 active:scale-95 ease-out flex items-center group-hover:from-fuchsia-500 group-hover:to-pink-600 dark:group-hover:from-lime-500 dark:group-hover:to-emerald-600">
            <svg class="w-5 h-5 mr-2 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg>
            Contact Agent
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

OAuth Buttons Component

A set of OAuth buttons with an industrial, earth-toned design, suitable for government/public service websites. Features exposed elements and utilitarian aesthetics, with full responsiveness and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-stone-100 dark:bg-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md p-6 sm:p-8 bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl border border-stone-300 dark:border-stone-700 overflow-hidden relative">
    <div class="absolute inset-0 border-4 border-stone-400 dark:border-stone-600 pointer-events-none rounded-lg"></div>
    <div class="absolute inset-0 bg-gradient-to-br from-stone-300/30 via-transparent to-stone-400/30 dark:from-stone-700/30 dark:via-transparent dark:to-stone-600/30 opacity-50"></div>

    <h2 class="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-200 mb-6 text-center tracking-wide uppercase relative z-10">
      <span class="relative inline-block pb-1">
        Sign In Via
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-amber-700 dark:bg-orange-400"></span>
      </span>
    </h2>

    <div class="space-y-4 relative z-10">
      <button class="w-full flex items-center justify-center px-4 py-3 border border-stone-400 dark:border-stone-600 rounded-md shadow-sm text-sm sm:text-base font-medium text-stone-800 dark:text-stone-200 hover:bg-stone-300 dark:hover:bg-stone-700 transition duration-300 ease-in-out transform hover:scale-105 active:scale-100 focus:outline-none focus:ring-2 focus:ring-amber-800 dark:focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-800 bg-gradient-to-b from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-750">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 mr-3 text-amber-900 dark:text-orange-300" fill="currentColor" viewBox="0 0 24 24">
          <path d="M22.016 12.000C22.016 17.523 17.523 22.016 12.000 22.016C6.477 22.016 1.984 17.523 1.984 12.000C1.984 6.477 6.477 1.984 12.000 1.984C17.523 1.984 22.016 6.477 22.016 12.000ZM4.896 12.000C4.896 15.932 8.068 19.104 12.000 19.104C15.932 19.104 19.104 15.932 19.104 12.000C19.104 8.068 15.932 4.896 12.000 4.896C8.068 4.896 4.896 8.068 4.896 12.000Z"/>
          <path d="M12.062 14.887L12.062 17.072H14.887L14.887 14.887H12.062ZM12.062 7.072L12.062 9.257H14.887L14.887 7.072H12.062ZM7.072 12.062L7.072 14.887H9.257L9.257 12.062H7.072ZM7.072 7.072L7.072 9.257H9.257L9.257 7.072H7.072ZM12.062 9.257L12.062 12.000H14.887L14.887 9.257H12.062Z"/>
        </svg>
        <span>Sign in with Government ID</span>
      </button>

      <button class="w-full flex items-center justify-center px-4 py-3 border border-stone-400 dark:border-stone-600 rounded-md shadow-sm text-sm sm:text-base font-medium text-stone-800 dark:text-stone-200 hover:bg-stone-300 dark:hover:bg-stone-700 transition duration-300 ease-in-out transform hover:scale-105 active:scale-100 focus:outline-none focus:ring-2 focus:ring-amber-800 dark:focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-800 bg-gradient-to-b from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-750">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 mr-3 text-amber-900 dark:text-orange-300" fill="currentColor" viewBox="0 0 24 24">
          <path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z"/>
        </svg>
        <span>Sign in with Email & Password</span>
      </button>

      <div class="relative flex py-5 items-center">
        <div class="flex-grow border-t border-stone-400 dark:border-stone-600"></div>
        <span class="flex-shrink mx-4 text-stone-600 dark:text-stone-400 text-sm sm:text-base font-medium uppercase">OR</span>
        <div class="flex-grow border-t border-stone-400 dark:border-stone-600"></div>
      </div>

      <button class="w-full flex items-center justify-center px-4 py-3 border border-stone-400 dark:border-stone-600 rounded-md shadow-sm text-sm sm:text-base font-medium text-stone-800 dark:text-stone-200 hover:bg-stone-300 dark:hover:bg-stone-700 transition duration-300 ease-in-out transform hover:scale-105 active:scale-100 focus:outline-none focus:ring-2 focus:ring-amber-800 dark:focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-800 bg-gradient-to-b from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-750">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 mr-3 text-amber-900 dark:text-orange-300" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 8h-2.5v2.871h2.361c-.139 1.956-1.921 3.208-4.361 3.208-3.038 0-5.5-2.462-5.5-5.5s2.462-5.5 5.5-5.5c1.474 0 2.802.584 3.791 1.523l1.768-1.768c-1.464-1.398-3.414-2.255-5.559-2.255-4.971 0-9 4.029-9 9s4.029 9 9 9 9-4.029 9-9h-9zm0 0h5m-5 0v5m5 0v-5m-5 5v-5h5v5h-5z"/>
        </svg>
        <span>Sign in with other Service</span>
      </button>
    </div>

    <p class="mt-6 text-xs sm:text-sm text-center text-stone-600 dark:text-stone-400 relative z-10">
      By signing in, you agree to our
      <a href="#" class="font-semibold text-amber-800 dark:text-orange-400 hover:text-amber-900 dark:hover:text-orange-500 underline transition duration-200">Terms of Service</a>
      and
      <a href="#" class="font-semibold text-amber-800 dark:text-orange-400 hover:text-amber-900 dark:hover:text-orange-500 underline transition duration-200">Privacy Policy</a>.
    </p>
  </div>
</div>

3D_Gradient_Rainbow_Accordion_Sports_Fitness

A simple, responsive accordion component with a 3D design and gradient rainbow color scheme, suitable for sports/fitness applications. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center font-sans">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
    <div class="text-center py-6 px-4 sm:px-6 bg-gradient-to-r from-red-500 via-yellow-500 via-green-500 via-blue-500 to-purple-500 dark:from-red-700 dark:via-yellow-700 dark:via-green-700 dark:via-blue-700 dark:to-purple-700 text-white">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight">Fitness FAQs</h2>
      <p class="mt-2 text-sm sm:text-base opacity-90">Your guide to a healthier, stronger you!</p>
    </div>

    <div class="p-4 sm:p-6 space-y-4">

      <!-- Accordion Item 1 -->
      <details class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden outline-none cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 focus-visible:ring-blue-500 hover:shadow-xl transform transition duration-300 ease-in-out hover:-translate-y-1 hover:scale-[1.01]">
        <summary class="flex items-center justify-between p-4 sm:p-5 bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-700 dark:to-blue-800 text-white font-semibold text-lg sm:text-xl rounded-lg group-open:rounded-b-none group-open:bg-gradient-to-br group-open:from-blue-600 group-open:to-indigo-500 relative z-10">
          <span>How often should I work out?</span>
          <svg class="w-6 h-6 transform transition-transform duration-300 group-open:rotate-180" 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>
        </summary>
        <div class="relative p-4 sm:p-5 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 transition-all duration-300 ease-in-out pb-6">
          <p class="text-base leading-relaxed">For general fitness, aim for 3-5 days a week, combining cardio and strength training. Listen to your body and allow for rest days!</p>
          <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-b from-transparent to-gray-200 dark:to-gray-800"></div>
        </div>
      </details>

      <!-- Accordion Item 2 -->
      <details class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden outline-none cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 focus-visible:ring-purple-500 hover:shadow-xl transform transition duration-300 ease-in-out hover:-translate-y-1 hover:scale-[1.01]">
        <summary class="flex items-center justify-between p-4 sm:p-5 bg-gradient-to-br from-purple-500 to-pink-600 dark:from-purple-700 dark:to-pink-800 text-white font-semibold text-lg sm:text-xl rounded-lg group-open:rounded-b-none group-open:bg-gradient-to-br group-open:from-pink-600 group-open:to-purple-500 relative z-10">
          <span>What's the best diet for muscle gain?</span>
          <svg class="w-6 h-6 transform transition-transform duration-300 group-open:rotate-180" 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>
        </summary>
        <div class="relative p-4 sm:p-5 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 transition-all duration-300 ease-in-out pb-6">
          <p class="text-base leading-relaxed">Focus on a high-protein diet with complex carbohydrates and healthy fats. Ensure you're in a caloric surplus for effective muscle growth.</p>
          <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-b from-transparent to-gray-200 dark:to-gray-800"></div>
        </div>
      </details>

      <!-- Accordion Item 3 -->
      <details class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden outline-none cursor-pointer focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 focus-visible:ring-green-500 hover:shadow-xl transform transition duration-300 ease-in-out hover:-translate-y-1 hover:scale-[1.01]">
        <summary class="flex items-center justify-between p-4 sm:p-5 bg-gradient-to-br from-green-500 to-teal-600 dark:from-green-700 dark:to-teal-800 text-white font-semibold text-lg sm:text-xl rounded-lg group-open:rounded-b-none group-open:bg-gradient-to-br group-open:from-teal-600 group-open:to-green-500 relative z-10">
          <span>How important is stretching?</span>
          <svg class="w-6 h-6 transform transition-transform duration-300 group-open:rotate-180" 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>
        </summary>
        <div class="relative p-4 sm:p-5 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 transition-all duration-300 ease-in-out pb-6">
          <p class="text-base leading-relaxed">Stretching improves flexibility, reduces injury risk, and enhances post-workout recovery. Incorporate dynamic stretches before and static stretches after workouts.</p>
          <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-b from-transparent to-gray-200 dark:to-gray-800"></div>
        </div>
      </details>

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

Neon_Glow_Search_Box

A simple, responsive search box component with neon glow effects featuring electric blue and hot pink for Technology/SaaS applications, including dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-900 min-h-screen flex items-center justify-center dark:bg-gray-950">
  <div class="w-full max-w-lg">
    <div class="relative flex items-center w-full max-w-md mx-auto rounded-full shadow-lg dark:shadow-xl group transition-all duration-300 ease-in-out
                bg-gradient-to-r from-gray-800 to-gray-900 border border-gray-700
                dark:from-gray-900 dark:to-black dark:border-gray-800
                focus-within:border-blue-500 focus-within:shadow-blue-500/50 dark:focus-within:border-pink-500 dark:focus-within:shadow-pink-500/50">

      <!-- Neon Glow Border Effect -->
      <div class="absolute inset-0 rounded-full blur-sm opacity-0 group-hover:opacity-60 dark:group-hover:opacity-70
                  bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 dark:from-blue-600 dark:via-purple-600 dark:to-pink-600
                  transition-opacity duration-500 ease-in-out"></div>
      <div class="absolute inset-0 rounded-full blur-md opacity-0 group-hover:opacity-40 dark:group-hover:opacity-50
                  bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 dark:from-blue-500 dark:via-purple-500 dark:to-pink-500
                  transition-opacity duration-500 ease-in-out delay-100"></div>
      <div class="absolute inset-0 rounded-full blur-lg opacity-0 group-hover:opacity-20 dark:group-hover:opacity-30
                  bg-gradient-to-r from-blue-300 via-purple-300 to-pink-300 dark:from-blue-400 dark:via-purple-400 dark:to-pink-400
                  transition-opacity duration-500 ease-in-out delay-200"></div>

      <!-- Inner content and input -->
      <div class="relative z-10 flex items-center w-full rounded-full overflow-hidden">
        <input type="text" placeholder="Search for anything..." class="flex-grow py-3 pl-6 pr-2 text-white bg-transparent outline-none rounded-l-full
                      placeholder-gray-400 dark:placeholder-gray-500
                      font-medium text-lg leading-tight
                      focus:ring-0 appearance-none
                      transition-colors duration-300 ease-in-out
                      dark:text-gray-100">

        <button type="submit" class="flex-shrink-0 p-3 pr-6 rounded-r-full
                        bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-700 dark:to-purple-700
                        hover:from-blue-700 hover:to-purple-700 dark:hover:from-blue-800 dark:hover:to-purple-800
                        transition-all duration-300 ease-in-out
                        transform hover:scale-105 active:scale-95
                        focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-pink-500 dark:focus:ring-offset-gray-900
                        shadow-md hover:shadow-lg dark:shadow-xl
                        group-hover:shadow-blue-500/40 dark:group-hover:shadow-pink-500/40">
          <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Monospace_Developer_Reaction_Buttons

A simple, responsive like/reaction buttons component inspired by monospace/developer aesthetics with a retro/vintage color scheme, suitable for news and journalism websites. Includes dark mode support.

Open Preview

                <div class="flex flex-wrap cursor-pointer font-mono text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-900 p-4 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm">
  <button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
    <span class="text-orange-500 dark:text-orange-400">&#9654;</span>
    <span class="hidden sm:inline">Upvote</span>
    <span class="text-xs ml-1 dark:text-gray-400">123</span>
  </button>

  <button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
    <span class="text-blue-500 dark:text-blue-400">&#9733;</span>
    <span class="hidden sm:inline">Bookmark</span>
    <span class="text-xs ml-1 dark:text-gray-400">45</span>
  </button>

  <button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
    <span class="text-green-600 dark:text-green-500">&#9600;</span>
    <span class="hidden sm:inline">Approve</span>
    <span class="text-xs ml-1 dark:text-gray-400">89</span>
  </button>

  <button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
    <span class="text-purple-600 dark:text-purple-500">&#x22C6;</span>
    <span class="hidden sm:inline">Favorite</span>
    <span class="text-xs ml-1 dark:text-gray-400">32</span>
  </button>

  <button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
    <span class="text-red-500 dark:text-red-400">&#x2717;</span>
    <span class="hidden sm:inline">Disagree</span>
    <span class="text-xs ml-1 dark:text-gray-400">7</span>
  </button>
</div>

1 ... 45 46 47 48 49 ... 335

Search Components

Categories

All Components