Search Components

All Components

Browse all available Tailwind CSS components

Social Share Buttons Component

A responsive social share button component for food/restaurant websites, featuring a rainbow gradient, microinteractions on hover, and full dark mode support.

Open Preview

                <div class="flex items-center justify-center p-4 min-h-screen bg-gray-50 dark:bg-gray-900 font-sans">
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 max-w-sm w-full transition-all duration-300 ease-in-out transform hover:scale-105">
    <h2 class="text-2xl font-extrabold text-center mb-6 text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 dark:from-red-400 dark:via-yellow-400 dark:to-green-400">
      Share This Delicious Food!
    </h2>
    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
      <!-- Facebook Button -->
      <a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                  bg-gradient-to-r from-blue-600 to-blue-800 text-white
                  dark:from-blue-700 dark:to-blue-900">
        <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M17 2H7a5 5 0 00-5 5v10a5 5 0 005 5h10a5 5 0 005-5V7a5 5 0 00-5-5zm-1.8 7.2h-2.1v-1.7c0-.5.2-.8.8-.8h1.3V6.2h-2.1c-2.4 0-3 1.8-3 3v2.2H8.9v2.8h1.6V20h3.2v-5.8h1.6l.3-2.8h-1.9v-2c0-.7.3-1.1 1.2-1.1z" />
        </svg>
        <span class="sr-only">Share on Facebook</span>
      </a>

      <!-- Twitter Button -->
      <a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                  bg-gradient-to-r from-sky-400 to-cyan-600 text-white
                  dark:from-sky-500 dark:to-cyan-700">
        <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M18.24 3.7 C17.38 4.6 15.65 5.56 12.87 5.7 C11.3 4 9.17 3 6.78 3 c-3.57 0-6.49 2.92-6.49 6.5 S3.21 16 6.78 16 c1.79 0 3.44-.68 4.7-1.85 l.3 2.15 h-3.23 C5.06 16.3 3.6 17.76 3.6 19.5 s1.46 3.2 3.2 3.2 H14.6 c1.74 0 3.2-1.46 3.2-3.2 0-1.74-1.46-3.2-3.2-3.2 H11.4 L11 11.5 h5.2 c.72 0 1.28-.56 1.28-1.28 V8.4 c0-.72-.56-1.28-1.28-1.28 h-5.8 l-.5-1.95 C12.28 4.4 13.9 3.5 15.9 3.5 c1.18 0 2.27.35 3.16.94 L18.24 3.7 M6.78 5.7 c.73 0 1.4.16 2 .46 -.6-.26-1.28-.4-1.98-.4 c-3.13 0-5.69 2.56-5.69 5.7 S3.65 17 6.78 17 c1.36 0 2.6-.48 3.56-1.25 L9.6 14.8 c-.8 0-1.5-.16-2.1-.46 C6.7 14 6.2 13.7 5.8 13.2 l-.35-.35 c-.46-.46-1.07-.7-1.72-.7 -1.25 0-2.28 1.03-2.28 2.28 s1.03 2.28 2.28 2.28 c.83 0 1.58-.45 1.95-1.12 C6.2 15.9 6.5 15.6 6.78 15.6 L6.78 5.7 z" />
        </svg>
        <span class="sr-only">Share on Twitter</span>
      </a>

      <!-- WhatsApp Button -->
      <a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                  bg-gradient-to-r from-green-500 to-teal-500 text-white
                  dark:from-green-600 dark:to-teal-600">
        <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.04 2.2 C6.55 2.2 2.17 6.6 2.17 12.1 c0 1.7.45 3.3.13 4.1 L2 21.8 l5.1-.9 c.7.3 1.4.4 2.2.4 L12.04 22 c5.49 0 9.87-4.4 9.87-9.9 C21.91 6.6 17.53 2.2 12.04 2.2 M17 15.1 c-.2.1-.4.2-.6.2-.2 0-.4-.1-.5-.1-.2-.1-.5-.2-.7-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3s-.3-.2-.5-.3-.2-.1-.4-.2-.2-.1-.4-.2-.1-.1-.3-.2-.1-.1-.3-.1-.1-.1-.2-.1-.1-.1-.2-.1s-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1 0-.1 0-.1 0 0 0c-.1 0-.1 0 0 0-.1 0-.1 0 0 0h-.1s0-.1 0-.1c0-.1 0-.1 0-.1c-.1 0-.1 0-.1-.1s-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1c-.1-.1-.1-.1-.2-.1l-.1-.1c-.1-.1-.1-.1-.2-.1l-.1-.1c-.1 0-.1-.1-.2-.1s-.1-.1-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1-.1-.1-.1-.2-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1 0c-.1 0-.1 0-.1 0l-.1 0c-.1 0-.1 0-.1 0l-.1 0c-.1 0-.1 0-.1 0l-.1-.1c-.1 0-.1 0-.1 0l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1 0c-.1 0-.1 0-.1-.1l-.1-.1C4.4 17.5 4 15.8 4 14.1c0-2.8.9-5.1 2.3-6.9 1.4-1.8 3.3-2.8 5.4-2.8S15.1 5.4 16.5 7.2c1.4 1.8 2.3 4.1 2.3 6.9 0 2.8-.9 5.1-2.3 6.9-1.4 1.8-3.3 2.8-5.4 2.8-2.1 0-4.1-.9-5.4-2.8l-.1-.1-.1-.1-.2-.1-.2-.1-.2-.1-.2-.1-.2-.1.2-.2.2-.2c-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3s-.3-.2-.5-.3-.2-.1-.4-.2-.2-.1-.4-.2-.2-.1-.4-.2-.1-.1-.3-.1-.1-.1-.3-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1s-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1 0-.1 0-.1 0-.1-.1c-.1 0-.1 0-.1-.1-.1 0-.1 0-.1 0-.1 0-.1-.1-.2-.1-.1 0-.1 0-.1 0-.1 0-.1 0-.1-.1-.1 0-.1 0-.1 0-.1 0-.1 0-.1-.1-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0V11.2c0-.5.2-.8.5-.8h.1c.3.1.5.3.6.5.1.2.2.3.4.5.1.2.3.4.4.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5h.1c-.2-.1-.5-.2-.7-.3-.2-.1-.5-.2-.7-.3-.2-.1-.5-.2-.7-.3-.2-.1-.5-.2-.7-.3l-3.2-1.9c-.3-.2-.5-.3-.7-.4-.3-.1-.5-.2-.8-.3-.2-.1-.5-.2-.7-.3l-1.3-.8c-.1-.1-.3-.2-.4-.2-.2-.1-.4-.1-.6-.2-.2-.1-.4-.2-.6-.2-.2 0-.3-.1-.5-.1-.2-.1-.4-.1-.6-.1-.2 0-.4 0-.5-.1-.2-.1-.3-.1-.5-.1-.2 0-.4 0-.5-.1-.2-.1-.3-.1-.5-.1-.2 0-.4-.1-.5-.1C7.1 11 6.9 11 6.8 11.2c-.1.2-.1.4-.1.6s.1.4.2.6l1.3 2.2c.2.3.4.6.6.9.2.3.4.5.6.8.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.2.3.5.5.7.1.3.3.5.4.8.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.2.3.5.5.7.1.3.3.5.4.8.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9q.2-.3.4-.6c.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9v-.1c.1-.1.2-.3.3-.4l-.2-.3c.1-.1.2-.2.3-.3.1-.1.3-.2.4-.2.1-.1.3-.2.4-.3.1-.1.3-.2.4-.3.1-.1.3-.2.4-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3s.3-.2.5-.3a5.5 a5.5 0 00-.7-.4c-.2-.1-.4-.2-.5-.3z" />
        </svg>
        <span class="sr-only">Share on WhatsApp</span>
      </a>

      <!-- Email Button -->
      <a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                  bg-gradient-to-r from-orange-400 to-red-500 text-white
                  dark:from-orange-500 dark:to-red-600">
        <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M2.01 4.2 C1 4.8 1 5 1 5 c0 .6.2 1.2.6 1.6 l7.8 7.8 C10.1 16.5 11.2 17 12.5 17 s2.4-.5 3.5-.6 l.1-1.1 -.1-.1 c-.1-.1-.2-.2-.2-.2 C15.4 15.3 14 14.2 13 13 L6.7 6.7 c-.5-.5-.8-.7-1.3-.8 C4.9 5.8 4.6 5.8 4.2 5.8 c-.4 0-.8.1-1.2.2 C2.5 6 2.3 6.1 2.1 6.1 L2.1 4.2 M21.9 4.2 C20.9 4.8 20.9 5 20.9 5 c0 .6-.2 1.2-.6 1.6 l-7.8 7.8 C13.8 16.5 12.8 17 11.5 17 s-2.4-.5-3.5-.6 l-.1-1.1 .1-.1 c.1-.1.2-.2.2-.2 C8.5 15.3 10 14.2 11 13 l6.3-6.3 c.5-.5.8-.7 1.3-.8 C19.1 5.8 19.4 5.8 19.8 5.8 c.4 0 .8.1 1.2.2 C21.4 6 21.6 6.1 21.8 6.1 L21.9 4.2 M2.01 4.2 C1 4.8 1 5 1 5 c0 .6.2 1.2.6 1.6 l7.8 7.8 C10.1 16.5 11.2 17 12.5 17 s2.4-.5 3.5-.6 l.1-1.1 -.1-.1 c-.1-.1-.2-.2-.2-.2 C15.4 15.3 14 14.2 13 13 L6.7 6.7 c-.5-.5-.8-.7-1.3-.8 C4.9 5.8 4.6 5.8 4.2 5.8 c-.4 0-.8.1-1.2.2 L2.1 6.1 L2.1 4.2 M21.9 4.2 C20.9 4.8 20.9 5 20.9 5 c0 .6-.2 1.2-.6 1.6 l-7.8 7.8 C13.8 16.5 12.8 17 11.5 17 s-2.4-.5-3.5-.6 l-.1-1.1 .1-.1 c.1-.1.2-.2.2-.2 C8.5 15.3 10 14.2 11 13 l6.3-6.3 c.5-.5.8-.7 1.3-.8 C19.1 5.8 19.4 5.8 19.8 5.8 c.4 0 .8.1 1.2.2 C21.4 6 21.6 6.1 21.8 6.1 L21.9 4.2" />
        </svg>
        <span class="sr-only">Share via Email</span>
      </a>

      <!-- Pinterest Button -->
      <a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                  bg-gradient-to-r from-red-600 to-red-800 text-white
                  dark:from-red-700 dark:to-red-900">
        <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.01 2.2 C6.53 2.2 2.15 6.6 2.15 12.1 c0 1.7.45 3.3.13 4.1 L2 21.8 l5.1-.9 c.7.3 1.4.4 2.2.4 L12.01 22 c5.48 0 9.87-4.4 9.87-9.9 C21.88 6.6 17.5 2.2 12.01 2.2 M17.7 10.4 c-.4 1.7-.5 2.5-.9 3.8-1.1 3.5-3.5 5.5-6.6 5.5-2.2 0-3.6-1.1-4.2-2.1-.8-1.3-.9-2.5-.9-3.8 0-1.2.2-2.3.6-3.4 1-2.9 3.5-5 6.7-5 2.5 0 4.1.8 4.7 1.9.7 1.1.9 2.5.4 4.1zm-4.7-2.7c-1.2 0-2.2.4-2.8 1.1-.6.7-.8 1.6-.8 2.5s.2 1.8.8 2.5c.6.7 1.6 1.1 2.8 1.1 1.2 0 2.2-.4 2.8-1.1.6-.7.8-1.6.8-2.5s-.2-1.8-.8-2.5c-.6-.7-1.6-1.1-2.8-1.1z" />
        </svg>
        <span class="sr-only">Share on Pinterest</span>
      </a>

      <!-- Link Copy Button -->
      <button type="button" aria-label="Copy link" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                  bg-gradient-to-r from-purple-500 to-indigo-600 text-white
                  dark:from-purple-600 dark:to-indigo-700">
        <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 4 C8.68 4 6 6.68 6 10 s2.68 6 6 6 c.5 0 .9-.4 1-.9.1-.5-.2-1-.7-1.1-.3-.1-.5-.1-.7-.1-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4c0 1.1-.5 2.1-1.3 2.8-.4.4-.4 1-.1 1.4.3.4.9.5 1.3.2 1.1-1 1.8-2.5 1.8-4.4 C18 6.68 15.32 4 12 4 M12 20 c-3.32 0-6-2.68-6-6 s2.68-6 6-6 c.5 0 .9.4 1 .9.1.5-.2 1-.7 1.1-.3.1-.5.1-.7.1-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4c0-1.1-.5-2.1-1.3-2.8-.4-.4-.4-1-.1-1.4.3-.4.9-.5 1.3-.2 1.1 1 1.8 2.5 1.8 4.4 C18 17.32 15.32 20 12 20 z" />
        </svg>
        <span class="sr-only">Copy link</span>
      </button>
    </div>
  </div>
</div>

360_viewer_component

A complex 360° product viewer component with microinteractions, a purple/violet color scheme, and dark mode support, suitable for business/corporate websites.

Open Preview

                
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-6xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="grid grid-cols-1 lg:grid-cols-2 min-h-[400px]">

      <!-- Left Section: 360 Viewer Area -->
      <div class="relative bg-gradient-to-br from-purple-100 to-indigo-200 dark:from-purple-900 dark:to-indigo-950 flex items-center justify-center p-4 min-h-[300px]">
        <div class="absolute inset-0 bg-contain bg-center bg-no-repeat opacity-20 dark:opacity-10" style="background-image: url('https://www.svgrepo.com/show/511397/sphere-3d-rotate.svg');"></div>

        <!-- Main 360 Image Placeholder -->
        <div class="relative w-full max-w-lg aspect-square bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden border border-purple-300 dark:border-purple-600 shadow-lg group">
          <img src="https://picsum.photos/600/600?random=1" alt="360 Product View" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">

          <!-- Interactive Overlay - Mimics Rotation -->
          <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-30 dark:bg-opacity-50">
            <p class="text-white text-lg sm:text-xl font-bold tracking-wide animate-pulse">Rotate 360°</p>
          </div>

          <!-- Rotation Indicator -->
          <div class="absolute right-2 bottom-2 text-white bg-purple-600 dark:bg-purple-800 px-2 py-1 rounded-full text-xs opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300">
            Drag to spin
          </div>
        </div>

        <!-- Controls Placeholder -->
        <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2">
          <button aria-label="Previous View" class="p-2 rounded-full bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 text-white shadow-md transition-all duration-200 transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-purple-400">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
          </button>
          <button aria-label="Next View" class="p-2 rounded-full bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 text-white shadow-md transition-all duration-200 transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-purple-400">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>

      <!-- Right Section: Details & Interaction -->
      <div class="p-6 sm:p-8 lg:p-10 flex flex-col justify-between">
        <div>
          <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-3 leading-tight">
            Quantum 5000
          </h2>
          <p class="text-purple-600 dark:text-purple-400 font-semibold text-lg sm:text-xl mb-4">
            Next-Gen Interstellar Hub
          </p>
          <p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg leading-relaxed mb-6">
            Explore the future with the Quantum 5000. Its innovative design and advanced features provide an unparalleled experience for any corporate venture. Precision engineering meets limitless possibilities.
          </p>

          <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Key Features:</h3>
            <ul class="space-y-2 text-gray-600 dark:text-gray-400 text-sm sm:text-base">
              <li class="flex items-center group">
                <svg class="w-5 h-5 mr-2 text-purple-500 dark:text-purple-400 transform group-hover:scale-110 group-hover:rotate-6 transition-transform duration-200" 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 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                <span class="transition-colors duration-200 group-hover:text-purple-700 dark:group-hover:text-purple-300">Enhanced Modular Design</span>
              </li>
              <li class="flex items-center group">
                <svg class="w-5 h-5 mr-2 text-purple-500 dark:text-purple-400 transform group-hover:scale-110 group-hover:rotate-6 transition-transform duration-200" 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 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                <span class="transition-colors duration-200 group-hover:text-purple-700 dark:group-hover:text-purple-300">AI-Powered Decision Matrix</span>
              </li>
              <li class="flex items-center group">
                <svg class="w-5 h-5 mr-2 text-purple-500 dark:text-purple-400 transform group-hover:scale-110 group-hover:rotate-6 transition-transform duration-200" 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 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                <span class="transition-colors duration-200 group-hover:text-purple-700 dark:group-hover:text-purple-300">Galactic Connectivity Protocol</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- Call to Action / Pricing -->
        <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between mt-6 gap-4">
          <div class="sm:text-right text-gray-900 dark:text-white">
            <p class="text-sm text-gray-500 dark:text-gray-400">Starting from</p>
            <p class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400">$7,999<span class="text-xl font-normal">/unit</span></p>
          </div>
          <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 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-purple-500 dark:focus:ring-offset-gray-800">
            <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 15.422 4.26 16 5 16h11a1 1 0 100-2H5l1-1h10a1 1 0 00.894-.553l3-6A1 1 0 0019 4H9.68L8.174 1.67A1 1 0 007.05 1H3zM6 17a2 2 0 11-4 0 2 2 0 014 0zM16 17a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            Request a Demo
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Playful Autumn Fashion Carousel

A playful and fun carousel slider component for fashion and beauty brands, featuring cheerful aesthetics, rounded elements, and an autumn color scheme. Supports responsiveness and dark mode.

Open Preview

                <section class="bg-orange-50 dark:bg-gray-900 py-12 sm:py-16 lg:py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl font-extrabold text-orange-900 dark:text-orange-200 text-center mb-10 sm:mb-12 lg:mb-16 font-serif tracking-tight leading-tight">
      Autumn Trends on Repeat!
    </h2>
    
    <!-- Carousel Container -->
    <div class="relative flex items-center justify-center">
      <!-- Navigation Buttons (hidden, for illustrative purposes of interactivity) -->
      <button aria-label="Previous Slide" class="absolute left-0 top-1/2 -translate-y-1/2 bg-white/70 dark:bg-gray-800/70 p-3 rounded-full shadow-lg z-10 hidden md:block focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600 transition duration-300 transform hover:scale-105">
        <svg class="h-6 w-6 text-orange-700 dark:text-orange-300 transform rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </button>
      <button aria-label="Next Slide" class="absolute right-0 top-1/2 -translate-y-1/2 bg-white/70 dark:bg-gray-800/70 p-3 rounded-full shadow-lg z-10 hidden md:block focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600 transition duration-300 transform hover:scale-105">
        <svg class="h-6 w-6 text-orange-700 dark:text-orange-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </button>

      <!-- Carousel Slides (Illustrative - In a real scenario, this would be JS-driven) -->
      <div class="relative w-full overflow-hidden">
        <div class="flex space-x-6 lg:space-x-8 px-4 sm:px-0 snap-x snap-mandatory overflow-x-auto pb-4 scrollbar-hide">
          <!-- Slide 1 -->
          <div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
            <div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
              <img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1015/600/400" alt="Cozy Autumn Sweater">
              <div class="p-2">
                <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Sunset Comfort Sweater</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Wrap yourself in warmth and style. Perfect for chilly evenings.</p>
                <span class="inline-block bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">New Collection</span>
                <div class="flex justify-between items-center">
                  <span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$79.99</span>
                  <button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
                    Snag Yours!
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Slide 2 -->
          <div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
            <div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
              <img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1018/600/400" alt="Autumn Forest Boots">
              <div class="p-2">
                <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Wanderlust Trail Boots</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Adventure awaits with these durable and stylish boots.</p>
                <span class="inline-block bg-brown-100 dark:bg-brown-900 text-brown-700 dark:text-brown-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">Best Seller</span>
                <div class="flex justify-between items-center">
                  <span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$120.00</span>
                  <button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
                    Grab a Pair!
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Slide 3 -->
          <div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
            <div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
              <img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1020/600/400" alt="Autumn Scarf">
              <div class="p-2">
                <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Fireside Plaid Scarf</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">A touch of tartan charm for your autumn ensemble.</p>
                <span class="inline-block bg-burgundy-100 dark:bg-burgundy-900 text-burgundy-700 dark:text-burgundy-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">Limited Edition</span>
                <div class="flex justify-between items-center">
                  <span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$45.50</span>
                  <button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
                    Wrap it Up!
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Slide 4 -->
          <div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
            <div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
              <img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1025/600/400" alt="Autumn Handbag">
              <div class="p-2">
                <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Harvest Moon Handbag</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Carry your essentials in elegant seasonal style.</p>
                <span class="inline-block bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">New Arrival</span>
                <div class="flex justify-between items-center">
                  <span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$95.00</span>
                  <button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
                    Add to Cart!
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Indicator Dots (Illustrative) -->
      <div class="absolute bottom-0 translate-y-full flex space-x-2 pt-4 sm:pt-6">
        <span class="block w-3 h-3 rounded-full bg-orange-400 dark:bg-orange-500 opacity-75"></span>
        <span class="block w-3 h-3 rounded-full bg-orange-300 dark:bg-orange-600 opacity-50"></span>
        <span class="block w-3 h-3 rounded-full bg-orange-300 dark:bg-orange-600 opacity-50"></span>
        <span class="block w-3 h-3 rounded-full bg-orange-300 dark:bg-orange-600 opacity-50"></span>
      </div>
    </div>
  </div>
</section>

<style>
  /* Hide scrollbar for Chrome, Safari and Opera */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
</style>

Skeuomorphic_Dating_Carousel

A simple, responsive carousel slider component with skeuomorphic design elements and an analogous color scheme, suitable for dating or social platforms. Includes dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-300 via-pink-300 to-red-300 dark:from-purple-900 dark:via-pink-900 dark:to-red-900 p-4 font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-gradient-to-br from-white to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-3xl shadow-xl border-4 border-gray-200 dark:border-gray-700 overflow-hidden" style="box-shadow: inset 0px 4px 8px rgba(0,0,0,0.1), inset 0px -4px 8px rgba(255,255,255,0.7), 0px 10px 20px rgba(0,0,0,0.2);">
    <div class="p-6 sm:p-8 md:p-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-tight" style="text-shadow: 1px 1px 2px rgba(255,255,255,0.6), -1px -1px 2px rgba(0,0,0,0.2);">
        Find Your Match
      </h2>

      <!-- Carousel Item (static for this HTML-only example, would be dynamic with JS) -->
      <div class="flex flex-col items-center text-center">
        <div class="relative w-48 h-48 sm:w-64 sm:h-64 md:w-72 md:h-72 rounded-full overflow-hidden mb-6 filter drop-shadow-lg" style="box-shadow: inset 0px 2px 4px rgba(0,0,0,0.1), inset 0px -2px 4px rgba(255,255,255,0.7), 0px 6px 12px rgba(0,0,0,0.2);">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile Picture" class="w-full h-full object-cover border-4 border-white dark:border-gray-800 rounded-full grayscale hover:grayscale-0 transition-all duration-300 ease-in-out">
          <div class="absolute inset-0 rounded-full border-4 border-purple-400 dark:border-purple-600 animate-pulse" style="filter: blur(2px);"></div>
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-50 mb-2" style="text-shadow: 1px 1px 2px rgba(255,255,255,0.4), -1px -1px 2px rgba(0,0,0,0.1);">
          Jessica, 28
        </h3>
        <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 mb-4 px-4">
          Passionate traveler, dog lover, and always up for an adventure! Looking for someone to share laughs with.
        </p>
      </div>

      <!-- Navigation Buttons (skeuomorphic design) -->
      <div class="flex justify-between items-center mt-8 px-4" role="group" aria-label="Carousel Navigation">
        <button class="relative p-3 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-700 dark:text-gray-200 shadow-lg transform active:scale-95 transition-all duration-150 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700" style="box-shadow: inset 0px 2px 4px rgba(255,255,255,0.7), inset 0px -2px 4px rgba(0,0,0,0.15), 0px 4px 8px rgba(0,0,0,0.15);">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
          </svg>
          <span class="sr-only">Previous Profile</span>
        </button>

        <button class="relative p-3 rounded-full bg-gradient-to-br from-green-300 to-green-500 dark:from-green-600 dark:to-green-800 text-white shadow-lg transform active:scale-95 transition-all duration-150 ease-in-out focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700" style="box-shadow: inset 0px 2px 4px rgba(255,255,255,0.7), inset 0px -2px 4px rgba(0,0,0,0.15), 0px 4px 8px rgba(0,0,0,0.15);">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 sm:h-9 sm:w-9" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" />
          </svg>
          <span class="sr-only">Add to Favorites</span>
        </button>

        <button class="relative p-3 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-700 dark:text-gray-200 shadow-lg transform active:scale-95 transition-all duration-150 ease-in-out focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-700" style="box-shadow: inset 0px 2px 4px rgba(255,255,255,0.7), inset 0px -2px 4px rgba(0,0,0,0.15), 0px 4px 8px rgba(0,0,0,0.15);">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
          </svg>
          <span class="sr-only">Next Profile</span>
        </button>
      </div>

      <!-- Indicators (Skeuomorphic dots) -->
      <div class="flex justify-center space-x-2 mt-8">
        <div class="w-3 h-3 rounded-full bg-purple-500 dark:bg-purple-700 shadow-md" style="box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1), inset 0px -1px 2px rgba(255,255,255,0.4);"></div>
        <div class="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 shadow-md" style="box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1), inset 0px -1px 2px rgba(255,255,255,0.4);"></div>
        <div class="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 shadow-md" style="box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1), inset 0px -1px 2px rgba(255,255,255,0.4);"></div>
      </div>
    </div>
  </div>
</div>

Material Design Tooltip Component - Booking/Reservation

A complex, responsive Material Design-inspired tooltip component for booking/reservation systems, featuring muted/desaturated colors, depth effects, and dark mode support. It provides detailed information upon hover/focus.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">

  <div class="relative group">
    <button class="relative z-10 px-6 py-3 rounded-lg text-lg font-medium 
                   bg-blue-600 hover:bg-blue-700 text-white 
                   focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
                   transition duration-300 ease-in-out
                   dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">
      View Reservation Details
    </button>

    <!-- Tooltip Container -->
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 
                  w-80 md:w-96 lg:w-[420px] 
                  p-0 rounded-xl 
                  shadow-xl 
                  transform scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 
                  group-focus-within:scale-100 group-focus-within:opacity-100 
                  transition-all duration-300 ease-in-out 
                  origin-bottom 
                  pointer-events-none group-hover:pointer-events-auto group-focus-within:pointer-events-auto
                  overflow-hidden 
                  bg-white dark:bg-gray-800 
                  border border-gray-200 dark:border-gray-700">

      <!-- Material Design Header -->
      <div class="relative px-5 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-700 dark:to-indigo-700 
                  text-white rounded-t-xl overflow-hidden">
        <div class="absolute inset-0 bg-pattern-dots opacity-10"></div>
        <h3 class="text-xl font-bold mb-1">Reservation #A1B2C3D4</h3>
        <p class="text-sm opacity-90">Your upcoming booking details</p>

        <!-- Avatar or Icon -->
        <div class="absolute top-4 right-5">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white/50 shadow-md">
        </div>
      </div>

      <!-- Tooltip Content -->
      <div class="p-5 text-gray-700 dark:text-gray-300 text-sm">

        <div class="grid grid-cols-2 gap-y-3 gap-x-4 mb-4">
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Service</p>
            <p class="text-base">Dental Check-up</p>
          </div>
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Provider</p>
            <p class="text-base">Dr. Emily White</p>
          </div>
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Date</p>
            <p class="text-base">Oct 26, 2024</p>
          </div>
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Time</p>
            <p class="text-base">10:15 AM - 11:00 AM</p>
          </div>
          <div class="col-span-2">
            <p class="font-semibold text-gray-500 dark:text-gray-400">Location</p>
            <p class="text-base">123 Health Dr, C<ctrl61>linic City</p>
          </div>
        </div>

        <hr class="my-4 border-gray-200 dark:border-gray-700">

        <div class="flex justify-between items-center mb-4">
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Status</p>
            <span class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">
              Confirmed
            </span>
          </div>
          <div class="text-right">
            <p class="font-semibold text-gray-500 dark:text-gray-400">Attendees</p>
            <div class="flex -space-x-2 justify-end mt-1">
              <img class="w-7 h-7 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Attendee 1">
              <img class="w-7 h-7 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Attendee 2">
              <div class="w-7 h-7 rounded-full border-2 border-white dark:border-gray-800 bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-xs text-gray-600 dark:text-gray-300">+1</div>
            </div>
          </div>
        </div>

        <!-- Call to Action Buttons -->
        <div class="pt-4 border-t border-gray-100 dark:border-gray-700 flex justify-end space-x-2">
          <button class="px-4 py-2 rounded-lg text-sm font-medium 
                         text-gray-600 hover:text-gray-900 hover:bg-gray-100 
                         focus:outline-none focus:ring-2 focus:ring-gray-300 
                         dark:text-gray-300 dark:hover:text-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
            Reschedule
          </button>
          <button class="px-4 py-2 rounded-lg text-sm font-medium 
                         bg-blue-500 hover:bg-blue-600 text-white 
                         focus:outline-none focus:ring-2 focus:ring-blue-400 
                         dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-500">
            Manage Booking
          </button>
        </div>
      </div>

      <!-- Tail for the tooltip -->
      <div class="absolute top-full left-1/2 -ml-2 w-0 h-0 border-x-8 border-x-transparent border-t-8 border-t-white 
                  dark:border-t-gray-800 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-300"></div>

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

<!-- Custom pattern for header (can be placed in a style block or external CSS if allowed) -->
<style>
  .bg-pattern-dots {
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 8px 8px;
  }
</style>

Checkout Form Component - Healthcare/Medical

A complex, responsive checkout form component with a soft, artistic watercolor design theme, warm neutral color scheme, and dark mode support, suitable for healthcare and medical applications.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-rose-50 to-orange-50 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden relative">
    <!-- Artistic Overlay -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10 pointer-events-none" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1000 1000\'><filter id=\'blur\'><feGaussianBlur in=\'SourceGraphic\' stdDeviation=\'50\'/></filter><rect fill=\'rgb(240,240,240)\' width=\'100%\' height=\'100%\'/><path fill=\'rgb(230,220,210)\' d=\'M0,500 C150,700 300,300 500,450 C700,600 850,200 1000,400 L1000,0 L0,0 Z\' filter=\'url(%23blur)\' opacity=\'0.5\'/><path fill=\'rgb(245,235,225)\' d=\'M0,300 C100,200 200,400 350,300 C500,200 600,500 750,400 C900,300 1000,500 1000,500 L1000,0 L0,0 Z\' filter=\'url(%23blur)\' opacity=\'0.7\'/></svg>'); background-size: cover;"></div>

    <div class="relative z-10 p-6 sm:p-10 lg:p-12">
      <header class="mb-8 text-center">
        <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-orange-100 mb-2 leading-tight tracking-tight drop-shadow-sm">Complete Your Order</h1>
        <p class="text-lg text-gray-600 dark:text-gray-300">Secure and confidential checkout for your healthcare needs.</p>
      </header>

      <form class="grid grid-cols-1 lg:grid-cols-2 gap-x-10 gap-y-8">

        <!-- Shipping Information -->
        <section class="bg-gray-50 dark:bg-gray-700 rounded-2xl p-6 shadow-inner">
          <h2 class="text-2xl font-bold text-gray-700 dark:text-orange-200 mb-6 pb-2 border-b border-gray-200 dark:border-gray-600">Shipping Information</h2>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label for="first-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">First Name</label>
              <input type="text" id="first-name" name="first-name" autocomplete="given-name" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="Jane">
            </div>
            <div>
              <label for="last-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Last Name</label>
              <input type="text" id="last-name" name="last-name" autocomplete="family-name" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="Doe">
            </div>
            <div class="md:col-span-2">
              <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Address</label>
              <input type="text" id="address" name="address" autocomplete="street-address" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="123 Main St">
            </div>
            <div>
              <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">City</label>
              <input type="text" id="city" name="city" autocomplete="address-level2" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="Anytown">
            </div>
            <div>
              <label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">State / Province</label>
              <input type="text" id="state" name="state" autocomplete="address-level1" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="CA">
            </div>
            <div>
              <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">ZIP / Postal Code</label>
              <input type="text" id="zip" name="zip" autocomplete="postal-code" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="90210">
            </div>
            <div>
              <label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Country</label>
              <select id="country" name="country" autocomplete="country-name" class="mt-1 block w-full pl-3 pr-10 py-2 text-base bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-rose-500 focus:border-rose-500 sm:text-sm rounded-md text-gray-900 dark:text-gray-100">
                <option>United States</option>
                <option>Canada</option>
                <option>Mexico</option>
              </select>
            </div>
          </div>
        </section>

        <!-- Payment Information -->
        <section class="bg-gray-50 dark:bg-gray-700 rounded-2xl p-6 shadow-inner">
          <h2 class="text-2xl font-bold text-gray-700 dark:text-orange-200 mb-6 pb-2 border-b border-gray-200 dark:border-gray-600">Payment Information</h2>
          <div class="grid grid-cols-1 gap-6">
            <div>
              <label for="card-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Name on Card</label>
              <input type="text" id="card-name" name="card-name" autocomplete="cc-name" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="Jane Doe">
            </div>
            <div>
              <label for="card-number" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Card Number</label>
              <input type="text" id="card-number" name="card-number" autocomplete="cc-number" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="XXXX-XXXX-XXXX-XXXX">
            </div>
            <div class="grid grid-cols-3 gap-4">
              <div class="col-span-2">
                <label for="expiration-date" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Expiration Date</label>
                <input type="text" id="expiration-date" name="expiration-date" autocomplete="cc-exp" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="MM/YY">
              </div>
              <div>
                <label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">CVV</label>
                <input type="text" id="cvv" name="cvv" autocomplete="cc-csc" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="123">
              </div>
            </div>
            <div>
              <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Email Address</label>
              <input type="email" id="email" name="email" autocomplete="email" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="[email protected]">
            </div>
          </div>
        </section>

        <!-- Order Summary -->
        <section class="lg:col-span-2 bg-gray-50 dark:bg-gray-700 rounded-2xl p-6 shadow-inner">
          <h2 class="text-2xl font-bold text-gray-700 dark:text-orange-200 mb-6 pb-2 border-b border-gray-200 dark:border-gray-600">Order Summary</h2>
          <div class="space-y-4 mb-6">
            <div class="flex justify-between items-center">
              <span class="text-gray-600 dark:text-gray-300">Medical Consultation</span>
              <span class="font-semibold text-gray-900 dark:text-gray-100">$75.00</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-600 dark:text-gray-300">Lab Test Kit</span>
              <span class="font-semibold text-gray-900 dark:text-gray-100">$120.00</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-600 dark:text-gray-300">Shipping</span>
              <span class="font-semibold text-gray-900 dark:text-gray-100">$10.00</span>
            </div>
            <div class="border-t border-gray-200 dark:border-gray-600 pt-4 flex justify-between items-center">
              <span class="text-xl font-bold text-gray-800 dark:text-orange-100">Total</span>
              <span class="text-2xl font-extrabold text-rose-600 dark:text-rose-400">$205.00</span>
            </div>
          </div>
        </section>

        <!-- Terms and Conditions & Submit Button -->
        <div class="lg:col-span-2 flex flex-col sm:flex-row items-center justify-between mt-4">
          <div class="flex items-start mb-4 sm:mb-0">
            <input id="terms" name="terms" type="checkbox" class="h-4 w-4 text-rose-600 focus:ring-rose-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800 dark:checked:bg-rose-600">
            <label for="terms" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
              I agree to the <a href="#" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300">Terms of Service</a> and <a href="#" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300">Privacy Policy</a>.
            </label>
          </div>
          <button type="submit" class="w-full sm:w-auto px-8 py-3 bg-gradient-to-r from-rose-500 to-rose-700 hover:from-rose-600 hover:to-rose-800 text-white font-semibold rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            Place Order
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

RetroReservationCards

A responsive set of retro-themed booking/reservation cards with dark mode support, suitable for appointment or reservation systems. Features include muted vintage colors and a subtle 80s/90s aesthetic.

Open Preview

                <div class="min-h-screen bg-gray-100 p-4 font-sans dark:bg-gray-900 md:p-8">
  <div class="container mx-auto px-4 py-8">
    <h1 class="mb-8 text-center text-4xl font-bold uppercase tracking-wider text-gray-800 dark:text-gray-200 md:text-5xl">
      <span class="block animate-pulse text-red-600 dark:text-red-400">Book Your Slot!</span>
      <span class="block text-2xl normal-case text-gray-600 dark:text-gray-400">Pick Your Perfect Time</span>
    </h1>

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

      <!-- Card 1: Available Slot -->
      <div class="transform rounded-lg border-2 border-orange-400 bg-gradient-to-br from-yellow-200 to-orange-300 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-blue-600">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Morning Session</h2>
          <span class="rounded-full bg-green-500 px-3 py-1 text-sm font-semibold text-white">Available</span>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">Start your day right with a productive morning slot.</p>
        <div class="mb-4 text-gray-600 dark:text-gray-400">
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 26, 2023</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 09:00 AM - 10:30 AM</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 90 mins</p>
        </div>
        <div class="mb-4 flex items-center">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
            <p class="text-gray-700 dark:text-gray-300">Alex Johnson</p>
          </div>
        </div>
        <button class="w-full rounded-md bg-purple-600 px-4 py-3 font-bold uppercase text-white shadow-lg transition-colors duration-300 hover:bg-purple-700 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:bg-purple-500 dark:hover:bg-purple-600 dark:focus:ring-purple-700">
          Book Now!
        </button>
      </div>

      <!-- Card 2: Fully Booked Slot -->
      <div class="transform rounded-lg border-2 border-red-500 bg-gradient-to-br from-red-200 to-red-400 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-red-600">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Afternoon Deep Dive</h2>
          <span class="rounded-full bg-red-600 px-3 py-1 text-sm font-semibold text-white">Fully Booked</span>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">This popular slot is currently at full capacity.</p>
        <div class="mb-4 text-gray-600 dark:text-gray-400">
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 26, 2023</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 01:00 PM - 03:00 PM</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 120 mins</p>
        </div>
        <div class="mb-4 flex items-center">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
            <p class="text-gray-700 dark:text-gray-300">Maria Gomez</p>
          </div>
        </div>
        <button class="w-full rounded-md bg-gray-500 px-4 py-3 font-bold uppercase text-white shadow-lg cursor-not-allowed dark:bg-gray-600" disabled>
          Sold Out
        </button>
      </div>

      <!-- Card 3: Pending Confirmation Slot -->
      <div class="transform rounded-lg border-2 border-blue-500 bg-gradient-to-br from-blue-200 to-cyan-300 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-green-600">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Evening Chill</h2>
          <span class="rounded-full bg-yellow-500 px-3 py-1 text-sm font-semibold text-white">Pending</span>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">Awaiting confirmation for this twilight session.</p>
        <div class="mb-4 text-gray-600 dark:text-gray-400">
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 27, 2023</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 06:00 PM - 07:00 PM</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 60 mins</p>
        </div>
        <div class="mb-4 flex items-center">
          <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
            <p class="text-gray-700 dark:text-gray-300">David Lee</p>
          </div>
        </div>
        <button class="w-full rounded-md bg-gray-400 px-4 py-3 font-bold uppercase text-white shadow-lg cursor-not-allowed dark:bg-gray-500" disabled>
          Awaiting Conf.
        </button>
      </div>

      <!-- Card 4: Special Event Slot -->
      <div class="transform rounded-lg border-2 border-purple-500 bg-gradient-to-br from-purple-200 to-pink-300 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-orange-600">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Exclusive Workshop</h2>
          <span class="rounded-full bg-blue-600 px-3 py-1 text-sm font-semibold text-white">Special</span>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">A unique opportunity! Limited spots available.</p>
        <div class="mb-4 text-gray-600 dark:text-gray-400">
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 28, 2023</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 10:00 AM - 01:00 PM</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 180 mins</p>
        </div>
        <div class="mb-4 flex items-center">
          <img src="https://randomuser.me/api/portraits/women/7.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
            <p class="text-gray-700 dark:text-gray-300">Sophia Kim</p>
          </div>
        </div>
        <button class="w-full rounded-md bg-cyan-600 px-4 py-3 font-bold uppercase text-white shadow-lg transition-colors duration-300 hover:bg-cyan-700 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-500 dark:hover:bg-cyan-600 dark:focus:ring-cyan-700">
          Register Now!
        </button>
      </div>

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

E-commerce Product Badges Component

A complex e-commerce product badges component featuring heavy use of color gradients from a forest/green palette, smooth transitions, and a responsive design with dark mode support. Suitable for showcasing product status, offers, or categories.

Open Preview

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

  <!-- Component Title (Optional) -->
  <h2 class="text-2xl sm:text-3xl font-extrabold text-center mb-8 sm:mb-12 text-gray-900 dark:text-gray-100">
    Featured Product Badges
  </h2>

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

    <!-- Badge Card 1: New Arrival -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <img class="w-full h-48 sm:h-56 object-cover" src="https://picsum.photos/id/1018/600/400" alt="Forest Product">
      <div class="absolute top-4 left-4">
        <span class="px-4 py-2 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-emerald-500 to-green-600 shadow-md transform hover:scale-105 transition-transform duration-200 ease-in-out">
          🚀 New Arrival
        </span>
      </div>
      <div class="p-6">
        <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Organic Green Tea</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Premium hand-picked tea leaves from sustainable farms.</p>
        <div class="flex justify-between items-center">
          <span class="text-2xl font-extrabold text-emerald-600 dark:text-emerald-400">$19.99</span>
          <button class="px-5 py-2 rounded-lg bg-gradient-to-r from-lime-500 to-emerald-500 text-white font-medium shadow-md hover:from-lime-600 hover:to-emerald-600 transform hover:scale-105 transition-all duration-300 ease-in-out">
            Add to Cart
          </button>
        </div>
      </div>
    </div>

    <!-- Badge Card 2: Limited Stock / Sale -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <img class="w-full h-48 sm:h-56 object-cover" src="https://picsum.photos/id/1020/600/400" alt="Nature Product">
      <div class="absolute top-4 right-4">
        <span class="px-4 py-2 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-red-500 to-orange-500 shadow-md animate-pulse transform hover:scale-105 transition-transform duration-200 ease-in-out">
          🔥 Limited Stock
        </span>
      </div>
      <div class="absolute bottom-4 left-4">
        <span class="px-3 py-1 rounded-full text-xs font-semibold text-white bg-gradient-to-tr from-purple-500 to-pink-500 shadow-sm">
          Sale -20%
        </span>
      </div>
      <div class="p-6 pt-10">
        <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Bamboo Eco Toothbrush</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Sustainable alternative for your daily dental care.</p>
        <div class="flex justify-between items-center">
          <div>
            <span class="text-lg font-semibold line-through text-gray-400 dark:text-gray-500 mr-2">$9.99</span>
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$7.99</span>
          </div>
          <button class="px-5 py-2 rounded-lg bg-gradient-to-r from-emerald-600 to-teal-700 text-white font-medium shadow-md hover:from-emerald-700 hover:to-teal-800 transform hover:scale-105 transition-all duration-300 ease-in-out">
            Buy Now
          </button>
        </div>
      </div>
    </div>

    <!-- Badge Card 3: Bestseller / Eco-Friendly -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <img class="w-full h-48 sm:h-56 object-cover" src="https://picsum.photos/id/1025/600/400" alt="River Product">
      <div class="absolute top-0 right-0 p-4">
        <svg class="w-10 h-10 text-yellow-400 drop-shadow-lg" 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.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
      </div>
      <div class="absolute top-4 left-4">
        <span class="px-4 py-2 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-blue-500 to-indigo-600 shadow-md transform hover:scale-105 transition-transform duration-200 ease-in-out">
          🏆 Bestseller
        </span>
      </div>
      <div class="absolute bottom-4 right-4">
        <span class="px-3 py-1 rounded-full text-xs font-semibold text-white bg-gradient-to-tl from-green-400 to-blue-400 shadow-sm">
          🌱 Eco-Friendly
        </span>
      </div>
      <div class="p-6 pt-10">
        <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Reusable Water Bottle</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Durable, insulated, and stylish for everyday hydration.</p>
        <div class="flex justify-between items-center">
          <span class="text-2xl font-extrabold text-indigo-600 dark:text-indigo-400">$29.50</span>
          <button class="px-5 py-2 rounded-lg bg-gradient-to-r from-emerald-700 to-green-800 text-white font-medium shadow-md hover:from-emerald-800 hover:to-green-900 transform hover:scale-105 transition-all duration-300 ease-in-out">
            View Details
          </button>
        </div>
      </div>
    </div>

  </div>
</div>

3D_Vibrant_Simple_Job_Career_Navigation

A simple, vibrant, and responsive navigation component with subtle 3D effects, designed for job board and career development platforms. Includes dark mode support.

Open Preview

                <nav class="bg-gradient-to-r from-purple-500 to-indigo-600 dark:from-gray-800 dark:to-gray-900 shadow-xl relative z-10">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
    <div class="flex items-center justify-between h-16">
      <div class="flex-shrink-0">
        <a href="#" class="text-white text-3xl font-extrabold tracking-tight relative">
          <span class="relative block px-1 pb-1 transform -skew-x-6 bg-yellow-400 dark:bg-teal-500 rounded-lg shadow-md hover:scale-105 transition duration-300 ease-in-out">
            <span class="block transform skew-x-6 text-indigo-800 dark:text-gray-900">JOB<span class="text-purple-700 dark:text-gray-200">HUB</span></span>
          </span>
          <span class="absolute top-1 left-1 block w-full h-full bg-blue-600 dark:bg-gray-700 rounded-lg filter blur-sm opacity-50 -z-10"></span>
        </a>
      </div>
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-6">
          <a href="#" class="relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-lg font-semibold transform hover:scale-105 transition duration-300 ease-in-out group">
            Find Jobs
            <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-red-600 dark:bg-red-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
          </a>
          <a href="#" class="relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-lg font-semibold transform hover:scale-105 transition duration-300 ease-in-out group">
            Companies
            <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-green-600 dark:bg-green-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
          </a>
          <a href="#" class="relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-lg font-semibold transform hover:scale-105 transition duration-300 ease-in-out group">
            Careers
            <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-blue-600 dark:bg-blue-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
          </a>
          <a href="#" class="relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-lg font-semibold transform hover:scale-105 transition duration-300 ease-in-out group">
            Post Job
            <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-orange-600 dark:bg-orange-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
          </a>
        </div>
      </div>

      <div class="-mr-2 flex md:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-yellow-200 hover:text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-800 focus:ring-white dark:hover:bg-gray-700 dark:focus:ring-offset-gray-900" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <svg class="block h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!-- Icon when menu is open. -->
          <svg class="hidden h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 animate-slide-down delay-150 duration-500 ease-out">
      <a href="#" class="block relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-base font-medium transform hover:scale-105 transition duration-300 ease-in-out group">
        Find Jobs
        <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-red-600 dark:bg-red-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
      </a>
      <a href="#" class="block relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-base font-medium transform hover:scale-105 transition duration-300 ease-in-out group">
        Companies
        <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-green-600 dark:bg-green-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
      </a>
      <a href="#" class="block relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-base font-medium transform hover:scale-105 transition duration-300 ease-in-out group">
        Careers
        <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-blue-600 dark:bg-blue-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
      </a>
      <a href="#" class="block relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-base font-medium transform hover:scale-105 transition duration-300 ease-in-out group">
        Post Job
        <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-orange-600 dark:bg-orange-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
      </a>
    </div>
  </div>
</nav>

Cyberpunk_Retro_Food_Navbar

A simple, responsive navigation bar with cyberpunk-retro aesthetics, designed for food/restaurant websites. Features dark background, muted accent colors, and dark mode support.

Open Preview

                <nav class="bg-zinc-900 shadow-lg p-4 font-mono dark:bg-zinc-950">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-orange-400 text-2xl font-bold tracking-wider uppercase hover:text-orange-300 transition-colors duration-300 transform hover:scale-105">
      <span class="text-teal-400">&lt;</span>Bite<span class="text-teal-400">/&gt;</span>Stream
    </a>

    <!-- Mobile Menu Button -->
    <div class="md:hidden">
      <button class="text-gray-300 hover:text-orange-400 focus:outline-none focus:text-orange-400 dark:text-gray-400 dark:hover:text-orange-300">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors duration-300 text-lg">
        Menu
      </a>
      <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors duration-300 text-lg">
        Orders
      </a>
      <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors duration-300 text-lg">
        About
      </a>
      <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors duration-300 text-lg">
        Contact
      </a>
      <a href="#" class="bg-teal-600 text-white px-4 py-1 rounded-md text-lg hover:bg-teal-500 transition-colors duration-300 neon-button">
        Sign In
      </a>
    </div>
  </div>
</nav>

1 ... 49 50 51 52 53 ... 335

Search Components

Categories

All Components