Search Components

All Components

Browse all available Tailwind CSS components

Product Gallery Component

A responsive product gallery component designed for music and audio platforms, featuring a dark UI with a forest/green color palette and full dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-950 text-gray-100 p-4 sm:p-8 dark:bg-gray-950 dark:text-gray-100">
  <div class="max-w-7xl mx-auto py-8">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-emerald-400 mb-4 tracking-tight">Featured Albums</h2>
    <p class="text-lg sm:text-xl text-gray-400 mb-12">Explore our curated collection of new releases and timeless classics.</p>

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

      <!-- Product Card 1 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1043/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">The Serene Symphony</h3>
          <p class="text-sm text-gray-400 mb-3">Artist Name</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$12.99</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Ambient</span>
            <span>2023</span>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1044/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Echoes of the Forest</h3>
          <p class="text-sm text-gray-400 mb-3">The Green Leaves</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$14.50</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Folk</span>
            <span>2022</span>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1005/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Deep Woods Beats</h3>
          <p class="text-sm text-gray-400 mb-3">DJ Mossy</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$11.75</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Electronic</span>
            <span>2023</span>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1020/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Nature's Melody</h3>
          <p class="text-sm text-gray-400 mb-3">Calm Rivers</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$9.99</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Classical</span>
            <span>2021</span>
          </div>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1040/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Undergrowth Rhythms</h3>
          <p class="text-sm text-gray-400 mb-3">The Root Band</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$13.25</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Indie</span>
            <span>2023</span>
          </div>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1018/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Mystic Pond Sounds</h3>
          <p class="text-sm text-gray-400 mb-3">Aqua Echoes</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$10.50</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Chillwave</span>
            <span>2022</span>
          </div>
        </div>
      </div>

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

Crypto_Blockchain_Cards_Component

A set of responsive cards designed for cryptocurrency and blockchain applications, featuring a warm neutral color scheme, Material-inspired shadows, and dark mode support.

Open Preview

                <div class="bg-stone-50 dark:bg-stone-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">

    <!-- Card 1: Asset Overview -->
    <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden perspective group">
      <div class="p-6 relative z-10">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100">Bitcoin (BTC)</h3>
          <span class="text-stone-500 dark:text-stone-400 text-sm">Your Balance</span>
        </div>
        <div class="flex items-center space-x-3 mb-2">
          <img class="w-8 h-8 rounded-full shadow-md" src="https://picsum.photos/id/1043/40/40" alt="Bitcoin Logo">
          <p class="text-3xl font-bold text-stone-900 dark:text-stone-50">0.05 BTC</p>
        </div>
        <p class="text-stone-600 dark:text-stone-300 text-lg mb-6">$ 3,450.78 <span class="text-emerald-600 dark:text-emerald-400 text-base font-semibold">+1.2%</span></p>
        <div class="flex justify-between items-center text-sm">
          <span class="text-stone-500 dark:text-stone-400">24h Change:</span>
          <span class="text-emerald-600 dark:text-emerald-400 font-medium">+ $45.21</span>
        </div>
        <div class="flex justify-end mt-4">
          <button class="px-4 py-2 bg-amber-600 text-white rounded-md shadow-md hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-200">
            View Details
          </button>
        </div>
      </div>
    </div>

    <!-- Card 2: Recent Transactions -->
    <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden perspective group">
      <div class="p-6 relative z-10">
        <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Recent Transactions</h3>
        <ul class="space-y-4">
          <li class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <div class="bg-emerald-100 dark:bg-emerald-900 p-2 rounded-full">
                <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-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="M7 11c.902-1.705 2.128-3.037 3.551-4L15 8l-3 4m0 0l3 4m-3-4c-1.423.963-2.649 2.295-3.551 4"></path></svg>
              </div>
              <div>
                <p class="text-stone-800 dark:text-stone-100 font-medium">Received ETH</p>
                <p class="text-stone-500 dark:text-stone-400 text-sm">From: 0x...abc</p>
              </div>
            </div>
            <span class="text-emerald-600 dark:text-emerald-400 font-semibold">+0.15 ETH</span>
          </li>
          <li class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <div class="bg-rose-100 dark:bg-rose-900 p-2 rounded-full">
                <svg class="w-5 h-5 text-rose-600 dark:text-rose-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="M17 13l-5 5m0 0l-5-5m5 5V6"></path></svg>
              </div>
              <div>
                <p class="text-stone-800 dark:text-stone-100 font-medium">Sent BTC</p>
                <p class="text-stone-500 dark:text-stone-400 text-sm">To: 0x...def</p>
              </div>
            </div>
            <span class="text-rose-600 dark:text-rose-400 font-semibold">-0.002 BTC</span>
          </li>
          <li class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <div class="bg-blue-100 dark:bg-blue-900 p-2 rounded-full">
                <svg class="w-5 h-5 text-blue-600 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="M9 7h6m-3 2v4m-3 3h6m-3-6h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </div>
              <div>
                <p class="text-stone-800 dark:text-stone-100 font-medium">Staked ADA</p>
                <p class="text-stone-500 dark:text-stone-400 text-sm">Pool: CardanoStake</p>
              </div>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">+50 ADA</span>
          </li>
        </ul>
        <div class="flex justify-end mt-4">
          <button class="px-4 py-2 border border-stone-300 dark:border-stone-600 text-stone-700 dark:text-stone-300 rounded-md hover:bg-stone-100 dark:hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-75 transition duration-200">
            View All
          </button>
        </div>
      </div>
    </div>

    <!-- Card 3: Blockchain News / Updates -->
    <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden perspective group">
      <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
        <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/29/600/400" alt="Blockchain News">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900 to-transparent opacity-75"></div>
        <div class="absolute bottom-0 left-0 p-4 w-full">
          <span class="text-xs font-semibold text-stone-200 dark:text-stone-400 uppercase tracking-wide">News</span>
          <h3 class="text-lg font-semibold text-white dark:text-stone-50 leading-tight">Ethereum 'Merge' Success: A New Era for Crypto</h3>
        </div>
      </div>
      <div class="p-6 relative z-10">
        <p class="text-stone-700 dark:text-stone-300 mb-4 text-sm leading-relaxed">The highly anticipated Ethereum 'Merge' has been successfully completed, transitioning the network to Proof-of-Stake. This marks a significant milestone...</p>
        <div class="flex items-center justify-between text-xs text-stone-500 dark:text-stone-400">
          <span>September 15, 2023</span>
          <a href="#" class="text-amber-600 hover:underline dark:text-amber-500">Read more</a>
        </div>
      </div>
    </div>

  </div>
</div>

Memphis_Social_Media_Feedback_Component

A simple, responsive social media feedback component with Memphis design influence using warm neutrals, featuring a like button and a comment indicator. Supports dark mode.

Open Preview

                <div class="p-4 md:p-6 lg:p-8 bg-amber-50 dark:bg-gray-800 rounded-lg shadow-md max-w-sm mx-auto font-sans relative overflow-hidden">

  <!-- Memphis-style geometric elements -->
  <div class="absolute top-0 left-0 w-24 h-24 bg-amber-200 dark:bg-gray-700 transform -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-lg opacity-70"></div>
  <div class="absolute bottom-0 right-0 w-16 h-16 bg-red-200 dark:bg-gray-600 transform translate-x-1/3 translate-y-1/3 rounded-full opacity-70"></div>
  <div class="absolute top-1/4 right-0 w-12 h-12 bg-emerald-200 dark:bg-gray-700 transform translate-x-1/2 rounded-md opacity-70"></div>

  <div class="relative z-10 flex items-center justify-between text-gray-800 dark:text-gray-200">
    <!-- Like Button -->
    <button class="flex items-center space-x-2 p-2 rounded-full transition-all duration-300 transform active:scale-95
                   bg-red-300 dark:bg-red-700 hover:bg-red-400 dark:hover:bg-red-600
                   text-white dark:text-gray-100 shadow-sm">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
      </svg>
      <span class="font-medium text-sm">Like</span>
    </button>

    <!-- Comment Count -->
    <div class="flex items-center space-x-2 text-gray-600 dark:text-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7l-7-7V3a1 1 0 011-1h10a1 1 0 011 1v7zm-5-.05A3.001 3.001 0 0010 7a3.001 3.001 0 00-3 3c0 .828.324 1.572.85 2.12L7 14h6l.15-1.15A3.001 3.001 0 0013 9.95z" clip-rule="evenodd" />
      </svg>
      <span class="font-medium text-sm">12 Comments</span>
    </div>
  </div>
</div>

File Viewer Component

A complex, responsive file viewer component with a Bauhaus-inspired design using analogous colors, suitable for job boards and career development platforms. Includes dark mode support.

Open Preview

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

    <!-- Left Sidebar (File Explorer Tree) -->
    <div class="col-span-1 border-r-4 border-yellow-500 dark:border-yellow-700 bg-yellow-200 dark:bg-yellow-900 p-4 overflow-y-auto max-h-[80vh] flex flex-col">
      <h3 class="text-lg font-bold mb-4 text-yellow-800 dark:text-yellow-100 uppercase tracking-wider">Files & Folders</h3>
      <ul class="space-y-1 text-yellow-700 dark:text-yellow-200 text-sm flex-grow">
        <li>
          <a href="#" class="flex items-center p-2 rounded-md hover:bg-yellow-300 dark:hover:bg-yellow-800 transition-colors duration-200">
            <svg class="w-5 h-5 mr-2 text-yellow-600 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path></svg>
            My Documents
          </a>
          <ul class="ml-4 mt-1 space-y-1">
            <li>
              <a href="#" class="flex items-center p-2 rounded-md hover:bg-yellow-300 dark:hover:bg-yellow-800 transition-colors duration-200 group">
                <svg class="w-4 h-4 mr-2 text-yellow-500 dark:text-yellow-400 group-hover:text-yellow-600 dark:group-hover:text-yellow-200" fill="currentColor" viewBox="0 0 20 20"><path d="M4 4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-3.293l-1.414-1.414A2 2 0 009.828 2H5C3.895 2 3 2.895 3 4z"></path></svg>
                Resumes
              </a>
              <ul class="ml-4 mt-1 space-y-1">
                <li><a href="#" class="flex items-center px-2 py-1 rounded-md hover:bg-yellow-300 dark:hover:bg-yellow-800 transition-colors duration-200 text-yellow-600 dark:text-yellow-300 current-file">
                  <svg class="w-4 h-4 mr-2 text-red-500 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0113 2.586L16.414 6A2 2 0 0117 7.414V16a2 2 0 01-2 2H5a2 2 0 01-2-2V4zm5 2V4.586L13.414 9H9V6zm-.952 9.07c.07.243.208.463.399.645l.965.965a.5.5 0 00.707 0l.965-.965a.5.5 0 00.106-.475l-.462-1.385a.5.5 0 00-.476-.325h-1a.5.5 0 00-.475.325l-.463 1.385a.5.5 0 00.106.475z" clip-rule="evenodd"></path></svg>
                  My_Resume_2023.pdf
                </a></li>
                <li><a href="#" class="flex items-center px-2 py-1 rounded-md hover:bg-yellow-300 dark:hover:bg-yellow-800 transition-colors duration-200 text-yellow-600 dark:text-yellow-300">
                  <svg class="w-4 h-4 mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0113 2.586L16.414 6A2 2 0 0117 7.414V16a2 2 0 01-2 2H5a2 2 0 01-2-2V4zm5 2V4.586L13.414 9H9V6zm1 8a1 1 0 100-2h-3a1 1 0 100 2h3z" clip-rule="evenodd"></path></svg>
                  Cover_Letter_Template.docx
                </a></li>
              </ul>
            </li>
            <li><a href="#" class="flex items-center p-2 rounded-md hover:bg-yellow-300 dark:hover:bg-yellow-800 transition-colors duration-200">
              <svg class="w-4 h-4 mr-2 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" ><path d="M4 4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-3.293l-1.414-1.414A2 2 0 009.828 2H5C3.895 2 3 2.895 3 4z"></path></svg>
              Certificates
            </a></li>
            <li><a href="#" class="flex items-center p-2 rounded-md hover:bg-yellow-300 dark:hover:bg-yellow-800 transition-colors duration-200">
              <svg class="w-4 h-4 mr-2 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" ><path d="M4 4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-3.293l-1.414-1.414A2 2 0 009.828 2H5C3.895 2 3 2.895 3 4z"></path></svg>
              Projects
            </a></li>
          </ul>
        </li>
        <li>
          <a href="#" class="flex items-center p-2 rounded-md hover:bg-yellow-300 dark:hover:bg-yellow-800 transition-colors duration-200">
            <svg class="w-5 h-5 mr-2 text-yellow-600 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path></svg>
            Archived Jobs
          </a>
        </li>
      </ul>
      <button class="mt-4 w-full bg-orange-500 dark:bg-orange-700 text-white py-2 px-4 rounded-md text-sm hover:bg-orange-600 dark:hover:bg-orange-800 transition-colors duration-200 flex items-center justify-center">
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
        Upload File
      </button>
    </div>

    <!-- Main Content (File Viewer) -->
    <div class="col-span-1 md:col-span-2 lg-col-span-2 flex flex-col p-4 bg-gray-50 dark:bg-gray-700 min-h-full">
      <div class="flex justify-between items-center mb-4 pb-2 border-b-2 border-orange-400 dark:border-orange-600">
        <h2 class="text-xl md:text-2xl font-extrabold text-orange-700 dark:text-orange-200">My_Resume_2023.pdf</h2>
        <div class="flex space-x-2">
          <button class="p-2 rounded-full bg-orange-100 dark:bg-orange-800 text-orange-600 dark:text-orange-300 hover:bg-orange-200 dark:hover:bg-orange-700 transition-colors duration-200">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
          <button class="p-2 rounded-full bg-orange-100 dark:bg-orange-800 text-orange-600 dark:text-orange-300 hover:bg-orange-200 dark:hover:bg-orange-700 transition-colors duration-200">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
          </button>
          <button class="p-2 rounded-full bg-orange-100 dark:bg-orange-800 text-orange-600 dark:text-orange-300 hover:bg-orange-200 dark:hover:bg-orange-700 transition-colors duration-200">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"></path></svg>
          </button>
        </div>
      </div>

      <div class="flex-grow overflow-hidden flex items-center justify-center p-2 bg-gray-200 dark:bg-gray-700 border-2 border-orange-300 dark:border-orange-500 rounded-md shadow-inner">
        <!-- Placeholder for PDF Viewer / Image Preview -->
        <img src="https://picsum.photos/600/800?random=1" alt="Resume Preview" class="max-w-full max-h-full object-contain border-2 border-indigo-500 dark:border-indigo-600 shadow-md transform hover:scale-105 transition-transform duration-300">
      </div>

      <div class="mt-4 flex justify-between items-center text-sm md:text-base text-gray-700 dark:text-gray-300">
        <div class="flex space-x-4">
          <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-indigo-500 dark:text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> Last Modified: 2023-10-26</span>
          <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-indigo-500 dark:text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M5 8a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"></path><path fill-rule="evenodd" d="M2 5a2 2 0 012-2h4.586A2 2 0 0111 3.414L15.414 8A2 2 0 0116 9.414V16a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm5 6a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg> Pages: 2</span>
        </div>
        <span>Size: 1.2 MB</span>
      </div>
    </div>

    <!-- Right Sidebar (File Details & Actions) -->
    <div class="col-span-1 lg:col-span-1 border-l-4 border-yellow-500 dark:border-yellow-700 bg-blue-100 dark:bg-blue-900 p-4 overflow-y-auto max-h-[80vh] flex flex-col">
      <h3 class="text-lg font-bold mb-4 text-blue-800 dark:text-blue-100 uppercase tracking-wider">Details & Actions</h3>

      <div class="mb-6 p-4 bg-blue-200 dark:bg-blue-800 rounded-md shadow-sm border border-blue-300 dark:border-blue-700">
        <h4 class="text-md font-semibold mb-2 text-blue-700 dark:text-blue-200">File Information</h4>
        <p class="text-sm text-blue-600 dark:text-blue-300"><strong class="block">Type:</strong> PDF Document</p>
        <p class="text-sm text-blue-600 dark:text-blue-300"><strong class="block">Created:</strong> 2023-01-15</p>
        <p class="text-sm text-blue-600 dark:text-blue-300"><strong class="block">Owner:</strong>
          <a href="#" class="flex items-center hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200">
            <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2 border border-blue-400 dark:border-blue-600">
            John Doe
          </a>
        </p>
      </div>

      <div class="mb-6 p-4 bg-blue-200 dark:bg-blue-800 rounded-md shadow-sm border border-blue-300 dark:border-blue-700">
        <h4 class="text-md font-semibold mb-2 text-blue-700 dark:text-blue-200">Collaborators</h4>
        <div class="flex -space-x-2 overflow-hidden mb-2">
          <img class="inline-block h-8 w-8 rounded-full ring-2 ring-blue-300 dark:ring-blue-700" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Collaborator 1">
          <img class="inline-block h-8 w-8 rounded-full ring-2 ring-blue-300 dark:ring-blue-700" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Collaborator 2">
          <img class="inline-block h-8 w-8 rounded-full ring-2 ring-blue-300 dark:ring-blue-700" src="https://randomuser.me/api/portraits/women/8.jpg" alt="Collaborator 3">
          <span class="flex h-8 w-8 rounded-full ring-2 ring-blue-300 dark:ring-blue-700 bg-blue-400 dark:bg-blue-600 text-white items-center justify-center text-xs font-semibold">+2</span>
        </div>
        <button class="w-full bg-blue-600 dark:bg-blue-700 text-white py-2 px-4 rounded-md text-sm hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors duration-200 flex items-center justify-center">
          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM12 10a4 4 0 01-4 4H3a2 2 0 00-2 2v1a2 2 0 002 2h10a2 2 0 002-2v-1a2 2 0 00-2-2h-3z"></path></svg>
          Share Document
        </button>
      </div>

      <div class="flex-grow p-4 bg-blue-200 dark:bg-blue-800 rounded-md shadow-sm border border-blue-300 dark:border-blue-700">
        <h4 class="text-md font-semibold mb-2 text-blue-700 dark:text-blue-200">Version History</h4>
        <ul class="space-y-2 text-sm text-blue-600 dark:text-blue-300">
          <li class="hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200 flex items-center justify-between">
            <span>v1.2 (Latest)</span>
            <span class="text-xs text-blue-500 dark:text-blue-400">Oct 26, 2023, 10:30 AM</span>
          </li>
          <li class="hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200 flex items-center justify-between">
            <span>v1.1</span>
            <span class="text-xs text-blue-500 dark:text-blue-400">Oct 20, 2023, 09:00 AM</span>
          </li>
          <li class="hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200 flex items-center justify-between">
            <span>v1.0</span>
            <span class="text-xs text-blue-500 dark:text-blue-400">Jan 15, 2023, 02:00 PM</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Registration Form Component

A responsive registration form component with a neumorphism design style and neon/electric color scheme, supporting dark mode. Designed for consulting/services.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-black flex items-center justify-center font-sans">
  <div class="w-full max-w-md mx-auto p-6 sm:p-8 md:p-10 rounded-3xl
    bg-gradient-to-br from-gray-100 to-gray-200
    dark:from-gray-800 dark:to-gray-900
    shadow-neumorphism-light dark:shadow-neumorphism-dark
    border border-solid border-transparent dark:border-gray-700
    transition-all duration-500 ease-in-out
    relative overflow-hidden
    before:content-[''] before:absolute before:inset-0
    before:rounded-3xl before:opacity-5 before:z-0
    before:bg-gradient-to-br before:from-blue-500 before:via-purple-500 before:to-pink-500
    dark:before:from-blue-700 dark:before:via-purple-700 dark:before:to-pink-700
    before:blur-lg before:pointer-events-none
    ">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-6 sm:mb-8 md:mb-10
      bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500
      dark:from-blue-400 dark:via-purple-400 dark:to-pink-400
      drop-shadow-lg
      relative z-10
      ">
      Register for Services
    </h2>
    <form class="space-y-4 sm:space-y-6 relative z-10">
      <div>
        <label for="full-name" class="block text-sm font-medium mb-2
          text-gray-700 dark:text-gray-300
          relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-blue-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
          ">
          Full Name
        </label>
        <input type="text" id="full-name" name="full-name" placeholder="John Doe"
          class="w-full p-3 rounded-xl
            text-gray-800 dark:text-gray-100
            bg-gray-50 dark:bg-gray-700
            shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
            dark:focus:ring-blue-400
            transition-all duration-300 ease-in-out
            peer
            group
            "
          required>
      </div>

      <div>
        <label for="email" class="block text-sm font-medium mb-2
          text-gray-700 dark:text-gray-300
          relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-purple-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
          ">
          Email Address
        </label>
        <input type="email" id="email" name="email" placeholder="[email protected]"
          class="w-full p-3 rounded-xl
            text-gray-800 dark:text-gray-100
            bg-gray-50 dark:bg-gray-700
            shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
            focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75
            dark:focus:ring-purple-400
            transition-all duration-300 ease-in-out
            "
          required>
      </div>

      <div>
        <label for="phone" class="block text-sm font-medium mb-2
          text-gray-700 dark:text-gray-300
          relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-pink-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
          ">
          Phone Number (Optional)
        </label>
        <input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567"
          class="w-full p-3 rounded-xl
            text-gray-800 dark:text-gray-100
            bg-gray-50 dark:bg-gray-700
            shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
            focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75
            dark:focus:ring-pink-400
            transition-all duration-300 ease-in-out
            ">
      </div>

      <div>
        <label for="service" class="block text-sm font-medium mb-2
          text-gray-700 dark:text-gray-300
          relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-blue-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
          ">
          Interested Service
        </label>
        <select id="service" name="service"
          class="w-full p-3 rounded-xl appearance-none
            text-gray-800 dark:text-gray-100
            bg-gray-50 dark:bg-gray-700
            shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
            dark:focus:ring-blue-400
            transition-all duration-300 ease-in-out
            cursor-pointer
            ">
          <option value="" disabled selected class="text-gray-400 dark:text-gray-500">Select a service</option>
          <option value="strategy" class="bg-gray-50 dark:bg-gray-800">Business Strategy</option>
          <option value="marketing" class="bg-gray-50 dark:bg-gray-800">Digital Marketing</option>
          <option value="tech" class="bg-gray-50 dark:bg-gray-800">Technology Consulting</option>
          <option value="hr" class="bg-gray-50 dark:bg-gray-800">HR & Talent Management</option>
          <option value="finance" class="bg-gray-50 dark:bg-gray-800">Financial Advisory</option>
        </select>
      </div>

      <div>
        <label for="message" class="block text-sm font-medium mb-2
          text-gray-700 dark:text-gray-300
          relative before:content-[''] before:absolute before:w-full before:h-px before:-bottom-1 before:left-0 before:bg-gradient-to-r before:from-transparent before:via-purple-300 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
          ">
          Your Message (Optional)
        </label>
        <textarea id="message" name="message" rows="4" placeholder="Tell us about your needs..."
          class="w-full p-3 rounded-xl
            text-gray-800 dark:text-gray-100
            bg-gray-50 dark:bg-gray-700
            shadow-neumorphism-inset-light dark:shadow-neumorphism-inset-dark
            focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75
            dark:focus:ring-purple-400
            transition-all duration-300 ease-in-out
            resize-y
            "></textarea>
      </div>

      <button type="submit"
        class="w-full py-3 px-6 rounded-full font-bold text-lg
          text-white
          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
          shadow-neumorphism-button dark:shadow-neumorphism-button-dark
          hover:shadow-neumorphism-button-hover dark:hover:shadow-neumorphism-button-hover-dark
          focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-blue-300 dark:focus:ring-blue-700
          focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900
          transition-all duration-300 ease-in-out
          transform hover:-translate-y-0.5 hover:scale-105
          active:translate-y-0 active:scale-100 active:shadow-neumorphism-button-active dark:active:shadow-neumorphism-button-active-dark
          relative group
          overflow-hidden
          before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-white before:to-transparent before:opacity-0 before:scale-0 before:transition-transform before:duration-500 before:ease-out
          hover:before:scale-125 hover:before:opacity-20
          ">
        <span class="relative z-10">Submit Registration</span>
      </button>

      <p class="text-center text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-4">
        By registering, you agree to our <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 transition-colors duration-300">Terms of Service</a> and <a href="#" class="text-purple-500 hover:text-purple-600 dark:text-purple-400 dark:hover:text-purple-500 transition-colors duration-300">Privacy Policy</a>.
      </p>
    </form>
  </div>
</div>

<style>
  /* Base Neu-shadows - Customize these values */
  .shadow-neumorphism-light {
    box-shadow: 8px 8px 16px #cdd4df, -8px -8px 16px #ffffff;
  }

  .dark .shadow-neumorphism-dark {
    box-shadow: 8px 8px 16px #22252a, -8px -8px 16px #3e4249;
  }

  /* Inset Neu-shadows */
  .shadow-neumorphism-inset-light {
    box-shadow: inset 5px 5px 10px #cad1db, inset -5px -5px 10px #ffffff;
  }

  .dark .shadow-neumorphism-inset-dark {
    box-shadow: inset 5px 5px 10px #22252a, inset -5px -5px 10px #444951;
  }

  /* Button Neu-shadows */
  .shadow-neumorphism-button {
    box-shadow: 6px 6px 12px #9ba4ae, -6px -6px 12px #ffffff;
  }

  .dark .shadow-neumorphism-button-dark {
    box-shadow: 6px 6px 12px #181a1e, -6px -6px 12px #444951;
  }

  .shadow-neumorphism-button-hover {
    box-shadow: 8px 8px 16px #9ba4ae, -8px -8px 16px #ffffff;
  }

  .dark .shadow-neumorphism-button-hover-dark {
    box-shadow: 8px 8px 16px #181a1e, -8px -8px 16px #444951;
  }

  .shadow-neumorphism-button-active {
    box-shadow: inset 5px 5px 10px #9da6b0, inset -5px -5px 10px #e0e6ec;
  }

  .dark .shadow-neumorphism-button-active-dark {
    box-shadow: inset 5px 5px 10px #1c1f24, inset -5px -5px 10px #3a3d43;
  }

  /* Custom styles for select arrow */
  select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath 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'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem; /* Make space for the arrow */
  }

  .dark select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath 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'%3E%3C/path%3E%3C/svg%3E"); /* Dark mode arrow color */
    filter: invert(1);
  }

</style>

Two-Factor Authentication Component

A simple, industrial-themed two-factor authentication component with a gradient rainbow accent, suitable for business/corporate websites. Features responsiveness and dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 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 border border-gray-200 dark:border-gray-700">
    <div class="p-6 space-y-6">
      <div class="flex items-center justify-center mb-4">
        <div class="w-16 h-16 bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 dark:from-red-600 dark:via-yellow-600 dark:to-green-600 rounded-full flex items-center justify-center shadow-lg">
          <svg class="w-8 h-8 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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
          </svg>
        </div>
      </div>
      <h2 class="text-2xl font-extrabold text-center text-gray-900 dark:text-gray-100 uppercase tracking-wide">Two-Factor Authentication</h2>
      <p class="text-center text-gray-600 dark:text-gray-400 text-sm">
        Please enter the 6-digit code from your authenticator app.
      </p>
      <form class="space-y-4">
        <div class="flex justify-center space-x-2">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 1" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 2" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 3" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 4" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 5" oninput="this.value=this.value.replace(/[^0-9]/g,''); if(this.value.length===this.maxLength) this.nextElementSibling.focus();">
          <input type="text" maxlength="1" class="w-12 h-14 text-center text-2xl font-bold bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-200 ease-in-out sm:w-14 sm:h-16"
          aria-label="Digit 6" oninput="this.value=this.value.replace(/[^0-9]/g,'');">
        </div>
        <button type="submit" class="w-full py-3 px-4 rounded-lg text-white font-semibold shadow-md
        bg-gradient-to-r from-purple-600 via-pink-500 to-red-500
        hover:from-purple-700 hover:via-pink-600 hover:to-red-600
        focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500
        dark:focus:ring-offset-gray-900 transition-all duration-300 ease-in-out text-lg">
          Verify Code
        </button>
      </form>
      <div class="text-center">
        <a href="#" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200">
          Having trouble? Try another method
        </a>
      </div>
    </div>
  </div>
</div>

Login Form Component

A responsive login form component with Bauhaus-inspired design, warm neutral color scheme, and dark mode support, suitable for finance and banking applications.

Open Preview

                <div class="min-h-screen bg-stone-100 flex items-center justify-center p-4 dark:bg-stone-900 font-sans">
  <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden max-w-lg w-full transform transition-all duration-300 sm:scale-100 md:scale-95 lg:scale-90">
    <div class="px-8 py-6 bg-stone-200 dark:bg-stone-700 relative">
      <div class="absolute top-0 left-0 w-8 h-8 md:w-12 md:h-12 bg-amber-400"></div>
      <div class="absolute bottom-0 right-0 w-8 h-8 md:w-12 md:h-12 bg-red-400"></div>
      <h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 text-center relative z-10 py-4">Login to Your Account</h2>
    </div>
    <form class="p-8 space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Email Address</label>
        <input type="email" id="email" name="email" autocomplete="email" required class="block w-full px-4 py-3 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-stone-50 dark:bg-stone-700 text-stone-900 dark:text-stone-100 transition-colors duration-200 text-base sm:text-lg">
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Password</label>
        <input type="password" id="password" name="password" autocomplete="current-password" required class="block w-full px-4 py-3 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm placeholder-stone-400 dark:placeholder-stone-500 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-stone-50 dark:bg-stone-700 text-stone-900 dark:text-stone-100 transition-colors duration-200 text-base sm:text-lg">
      </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 dark:border-stone-600 rounded dark:bg-stone-700">
          <label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-200">Remember me</label>
        </div>
        <div class="text-sm">
          <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300 transition-colors duration-200">Forgot your password?</a>
        </div>
      </div>
      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-400 transition-colors duration-200">
          Sign in
        </button>
      </div>
    </form>
    <div class="px-8 py-6 bg-stone-50 dark:bg-stone-900 border-t border-stone-200 dark:border-stone-700 text-center text-sm text-stone-600 dark:text-stone-400">
      Don't have an account? <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-400 dark:hover:text-amber-300 transition-colors duration-200">Sign up</a>
    </div>
  </div>
</div>

Add to Cart Button Component

A responsive 'Add to Cart' button with engaging microinteractions, sunset/warm tones, suitable for food/restaurant websites, featuring a subtle animation on hover/click and dark mode support.

Open Preview

                <div class="flex justify-center items-center p-4 bg-gray-50 dark:bg-gray-900 min-h-screen">
  <button class="group relative overflow-hidden h-12 w-48 rounded-full bg-gradient-to-r from-orange-500 to-red-500 text-white font-semibold text-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-4 focus:ring-red-400 focus:ring-opacity-75 dark:from-orange-600 dark:to-red-600 dark:hover:shadow-2xl dark:focus:ring-red-500">
    <span class="relative z-10 flex items-center justify-center space-x-2 transition-transform duration-300 group-hover:scale-105 group-active:scale-95">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
      </svg>
      <span>Add to Cart</span>
    </span>
    <span class="absolute inset-0 bg-white opacity-0 transition-opacity duration-300 group-hover:opacity-10 dark:bg-gray-800"></span>
    <span class="absolute inset-0 bg-white opacity-0 transition-opacity duration-300 group-active:opacity-20 dark:bg-gray-800"></span>
  </button>
</div>

Product Reviews Component - Playful Jewel Tones with Reservation Focus

A complex, playful product review component with a focus on booking/reservation. Features jewel tone colors, rounded elements, and full responsiveness with dark mode support.

Open Preview

                <div class="font-sans antialiased text-gray-800 bg-emerald-50 dark:bg-gray-900 transition-colors duration-300 p-4 sm:p-6 lg:p-8">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden animate-fade-in-up transform transition-all duration-500 scale-95 hover:scale-100 flex flex-col md:flex-row">
    
    <!-- Left Section: Overall Rating & Summary -->
    <div class="w-full md:w-1/3 p-6 sm:p-8 bg-emerald-600 dark:bg-emerald-800 text-white flex flex-col items-center justify-center text-center rounded-t-3xl md:rounded-l-3xl md:rounded-tr-none relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-emerald-700 to-emerald-500 opacity-20 dark:opacity-30"></div>
      <div class="relative z-10">
        <h2 class="text-4xl sm:text-5xl font-extrabold mb-2 leading-tight">4.8<span class="text-2xl">/5</span></h2>
        <div class="flex justify-center mb-4 text-yellow-300 dark:text-yellow-400">
          <svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
          <svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
          <svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
          <svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
          <svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 15.4V6L8.73 12.44L2 12.87L7.04 17.15L5.42 23L12 19L18.58 23L16.96 17.15L22 12.87L15.27 12.44L12 6Z"/></svg>
        </div>
        <p class="text-lg sm:text-xl font-semibold mb-6">Based on 128 Reviews</p>
        <button class="bg-white text-emerald-600 dark:bg-emerald-700 dark:text-white px-8 py-3 rounded-full font-bold text-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-500">
          Leave a Review
        </button>
      </div>
    </div>

    <!-- Right Section: Individual Reviews & Filter -->
    <div class="w-full md:w-2/3 p-6 sm:p-8 flex flex-col justify-between dark:text-gray-200">
      <div>
        <h3 class="text-2xl sm:text-3xl font-extrabold text-ruby-700 dark:text-ruby-400 mb-6">What our customers say</h3>
        
        <!-- Filter/Sorting -->
        <div class="flex flex-wrap gap-2 mb-6">
          <button class="flex-1 min-w-[120px] px-4 py-2 bg-sapphire-600 dark:bg-sapphire-800 text-white rounded-full text-sm font-semibold hover:bg-sapphire-700 dark:hover:bg-sapphire-700 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-sapphire-300 dark:focus:ring-sapphire-600">
            All Reviews (128)
          </button>
          <button class="flex-1 min-w-[120px] px-4 py-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-full text-sm font-semibold hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-500">
            5 Stars (98)
          </button>
          <button class="flex-1 min-w-[120px] px-4 py-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-full text-sm font-semibold hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-500">
            With Bookings
          </button>
          <button class="flex-1 min-w-[120px] px-4 py-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-full text-sm font-semibold hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-500">
            Most Recent
          </button>
        </div>

        <!-- Review Items (Scrollable) -->
        <div class="space-y-6 max-h-96 md:max-h-[calc(100vh-250px)] overflow-y-auto pr-2 scrollbar-thumb-emerald-500 scrollbar-track-emerald-200 dark:scrollbar-thumb-emerald-700 dark:scrollbar-track-emerald-900 scrollbar-w-2 scrollbar-thumb-rounded scrollbar-track-rounded">

          <!-- Review 1 -->
          <div class="flex items-start gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 transform hover:-translate-y-0.5">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-400 dark:border-emerald-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
            <div>
              <div class="flex items-center justify-between">
                <h4 class="font-bold text-gray-900 dark:text-gray-100">Elara Vance</h4>
                <div class="flex text-sm text-yellow-500 dark:text-yellow-400">
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                </div>
              </div>
              <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booked: <span class="font-semibold text-sapphire-600 dark:text-sapphire-400">Facial & Massage Package</span> on <time datetime="2023-10-26">Oct 26, 2023</time></p>
              <p class="text-gray-700 dark:text-gray-300 mt-2">"Absolutely loved my spa day! The facial left my skin glowing and the massage was incredibly relaxing. Highly recommend the staff, they were so friendly and professional!"</p>
            </div>
          </div>

          <!-- Review 2 -->
          <div class="flex items-start gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 transform hover:-translate-y-0.5">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-400 dark:border-emerald-500" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
            <div>
              <div class="flex items-center justify-between">
                <h4 class="font-bold text-gray-900 dark:text-gray-100">Marcus Thorne</h4>
                <div class="flex text-sm text-yellow-500 dark:text-yellow-400">
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current text-gray-300 dark:text-gray-500" viewBox="0 0 24 24"><path d="M12 15.4V6L8.73 12.44L2 12.87L7.04 17.15L5.42 23L12 19L18.58 23L16.96 17.15L22 12.87L15.27 12.44L12 6Z"/></svg>
                </div>
              </div>
              <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booked: <span class="font-semibold text-sapphire-600 dark:text-sapphire-400">Deep Tissue Massage</span> on <time datetime="2023-10-20">Oct 20, 2023</time></p>
              <p class="text-gray-700 dark:text-gray-300 mt-2">"Good massage, felt much relief. The booking process was smooth and easy. Would book again for sure!"</p>
            </div>
          </div>

          <!-- Review 3 -->
          <div class="flex items-start gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 transform hover:-translate-y-0.5">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-400 dark:border-emerald-500" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
            <div>
              <div class="flex items-center justify-between">
                <h4 class="font-bold text-gray-900 dark:text-gray-100">Sophia Lee</h4>
                <div class="flex text-sm text-yellow-500 dark:text-yellow-400">
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                </div>
              </div>
              <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booked: <span class="font-semibold text-sapphire-600 dark:text-sapphire-400">Aromatherapy Session</span> on <time datetime="2023-10-15">Oct 15, 2023</time></p>
              <p class="text-gray-700 dark:text-gray-300 mt-2">"Wonderful experience! The aromatherapy was exactly what I needed after a stressful week. The online booking was super user-friendly."</p>
            </div>
          </div>

           <!-- Review 4 -->
          <div class="flex items-start gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 transform hover:-translate-y-0.5">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-400 dark:border-emerald-500" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
            <div>
              <div class="flex items-center justify-between">
                <h4 class="font-bold text-gray-900 dark:text-gray-100">David Chen</h4>
                <div class="flex text-sm text-yellow-500 dark:text-yellow-400">
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
                  <svg class="w-4 h-4 fill-current text-gray-300 dark:text-gray-500" viewBox="0 0 24 24"><path d="M12 15.4V6L8.73 12.44L2 12.87L7.04 17.15L5.42 23L12 19L18.58 23L16.96 17.15L22 12.87L15.27 12.44L12 6Z"/></svg>
                </div>
              </div>
              <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booked: <span class="font-semibold text-sapphire-600 dark:text-sapphire-400">Sports Massage</span> on <time datetime="2023-10-08">Oct 08, 2023</time></p>
              <p class="text-gray-700 dark:text-gray-300 mt-2">"Very effective sports massage after my marathon. Professional and understanding. I appreciate the easy booking system!"</p>
            </div>
          </div>

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

<style>
/* For a more custom scrollbar aligned with the playful theme */
.scrollbar-w-2::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scrollbar-thumb-emerald-500::-webkit-scrollbar-thumb {
  background-color: var(--tw-bg-emerald-500);
  border-radius: 9999px;
}

.scrollbar-track-emerald-200::-webkit-scrollbar-track {
  background-color: var(--tw-bg-emerald-200);
  border-radius: 9999px;
}

.dark .scrollbar-thumb-emerald-700::-webkit-scrollbar-thumb {
  background-color: var(--tw-bg-emerald-700);
}

.dark .scrollbar-track-emerald-900::-webkit-scrollbar-track {
  background-color: var(--tw-bg-emerald-900);
}

/* Custom colors (optional: if you want to extend tailwind.config.js) */
/* If you were using a Tailwind config, these would be in 'theme.extend.colors' */
:root {
  --color-emerald-50: #ecfdf5;
  --color-emerald-200: #a7f3d0;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e40;
  
  --color-sapphire-400: #60a5fa; /* A vibrant blue */
  --color-sapphire-600: #2563eb;
  --color-sapphire-800: #1e40af;

  --color-ruby-400: #ef4444; /* A vibrant red */
  --color-ruby-700: #b91c1c;
}
.dark {
  --tw-bg-emerald-50: #1a202c;
  --tw-bg-gray-900: #1a202c;
}
</style>

Monospace_Developer_Autumn_Rating_System_Component

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

Open Preview

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

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

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

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

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

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

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

1 ... 23 24 25 26 27 ... 335

Search Components

Categories

All Components