Search Components

All Components

Browse all available Tailwind CSS components

Footer Navigation Component

A simple, responsive footer navigation component with a warm, sunset-inspired color scheme, designed for fashion/beauty brands. Features subtle hover effects and dark mode support.

Open Preview

                <footer class="bg-gradient-to-r from-orange-400 to-red-500 py-8 dark:from-gray-900 dark:to-gray-800 text-white font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col md:flex-row justify-between items-center text-center md:text-left">
      <div class="mb-4 md:mb-0">
        <h3 class="text-2xl font-bold mb-2 tracking-wide text-yellow-100 dark:text-gray-100">Luminous Threads</h3>
        <p class="text-orange-100 dark:text-gray-400 text-sm">&copy; 2023 All rights reserved.</p>
      </div>

      <nav class="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-2 mb-4 md:mb-0">
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Shop</a>
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Collections</a>
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">About Us</a>
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Contact</a>
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Privacy Policy</a>
      </nav>

      <div class="flex gap-4">
        <a href="#" aria-label="Facebook" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-transform duration-300 transform hover:rotate-6">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c5.967-.759 10.5-5.623 10.5-11z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-label="Instagram" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-transform duration-300 transform hover:rotate-6">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.715.056.815.034 1.488.17 2.071.467.579.289.979.629 1.324.973.344.344.684.744.973 1.324.297.583.433 1.256.467 2.07.043.93.056 1.286.056 3.715s-.013 2.784-.056 3.715c-.034.814-.17 1.488-.467 2.071-.289.579-.629.979-.973 1.324-.344.344-.744.684-1.324.973-.583.297-1.256.433-2.07.467-.93.043-1.286.056-3.715.056s-2.784-.013-3.715-.056c-.814-.034-1.488-.17-2.071-.467-.579-.289-.979-.629-1.324-.973-.344-.344-.684-.744-.973-1.324-.297-.583-.433-1.256-.467-2.07-.043-.93-.056-1.286-.056-3.715s.013-2.784.056-3.715c.034-.814.17-1.488.467-2.071.289-.579.629-.979.973-1.324.344-.344.744-.684 1.324-.973.583-.297 1.256-.433 2.07-.467C9.531 2.013 9.886 2 12.315 2zm0 2.18c-2.793 0-3.138.014-4.144.058-.707.03-1.127.135-1.424.28-.277.137-.48.243-.68.443-.199.2-.306.402-.443.68-.145.297-.25.717-.28 1.424-.044 1.006-.058 1.351-.058 4.144s.014 3.138.058 4.144c.03.707.135 1.127.28 1.424.137.277.243.48.443.68.2.199.402.306.68.443.297.145.717.25 1.424.28 1.006.044 1.351.058 4.144.058s3.138-.014 4.144-.058c.707-.03 1.127-.135 1.424-.28.277-.137.48-.243.68-.443.199-.2.306-.402.443-.68.145-.297.25-.717.28-1.424.044-1.006.058-1.351.058-4.144s-.014-3.138-.058-4.144c-.03-.707-.135-1.127-.28-1.424-.137-.277-.243-.48-.443-.68-.199-.2-.402-.306-.68-.443-.297-.145-.717-.25-1.424-.28-1.006-.044-1.351-.058-4.144-.058zm0 3.655c-2.464 0-4.475 2.01-4.475 4.475s2.01 4.475 4.475 4.475 4.475-2.01 4.475-4.475-2.01-4.475-4.475-4.475zM12.315 15.6c-1.815 0-3.288-1.472-3.288-3.288s1.472-3.288 3.288-3.288 3.288 1.472 3.288 3.288-1.472 3.288-3.288 3.288zm5.237-.962a1.21 1.21 0 011.088-1.088c.45-.07.96-.118 1.488-.135.344-.01.59-.018.736.002.392.052.793.18 1.161.356.368.175.688.42 1.22.955.532.532.775.852.955 1.22.175.368.304.769.356 1.161.018.146.01.392.002.736-.017.528-.065 1.038-.135 1.488-.103.68-.225 1.1-.383 1.341-.157.24-.351.4-.567.567-.216.216-.373.41-.567.567-.24.157-.661.279-1.341.383-.45.07-.96.118-1.488.135-.344.01-.59.018-.736-.002-.392-.052-.793-.18-1.161-.356-.368-.175-.688-.42-1.22-.955-.532-.532-.775-.852-.955-1.22-.175-.368-.304-.769-.356-1.161-.018-.146-.01-.392-.002-.736.017-.528.065-1.038.135-1.488.103-.68.225-1.1.383-1.341.157-.24.351-.4.567-.567zm-.432-8.583a.965.965 0 01.965-.965.965.965 0 01.965.965.965.965 0 01-.965.965.965.965 0 01-.965-.965z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>
  </div>
</footer>

Toast Notifications Component

A responsive toast notification component with jewel tone gradient transitions, designed for government/public service websites, supporting light and dark modes.

Open Preview

                <div class="fixed bottom-4 right-4 z-50 w-full max-w-sm p-4 pointer-events-none">
  <!-- Success Toast -->
  <div class="mb-4 rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
              bg-gradient-to-r from-emerald-500 to-teal-600 dark:from-emerald-700 dark:to-teal-800">
    <div class="relative flex items-center p-4">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 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>
      </div>
      <div class="ml-3 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-white tracking-wide">Success!</p>
        <p class="mt-1 text-sm text-emerald-100 dark:text-emerald-200">Your request has been processed successfully.</p>
      </div>
      <div class="ml-4 flex-shrink-0 flex">
        <button class="inline-flex text-white hover:text-emerald-100 dark:hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-emerald-600 focus:ring-white rounded-md">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-emerald-300 to-emerald-400 dark:from-emerald-600 dark:to-teal-700 animate-pulse-width"></div>
  </div>

  <!-- Information Toast -->
  <div class="mb-4 rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
              bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-800 dark:to-indigo-900">
    <div class="relative flex items-center p-4">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <div class="ml-3 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-white tracking-wide">Information</p>
        <p class="mt-1 text-sm text-blue-100 dark:text-blue-200">Further details are available on the new page.</p>
      </div>
      <div class="ml-4 flex-shrink-0 flex">
        <button class="inline-flex text-white hover:text-blue-100 dark:hover:text-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-700 focus:ring-white rounded-md">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-400 to-indigo-500 dark:from-blue-700 dark:to-indigo-800 animate-pulse-width"></div>
  </div>

  <!-- Warning Toast -->
  <div class="mb-4 rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
              bg-gradient-to-r from-yellow-500 to-orange-600 dark:from-yellow-700 dark:to-orange-800">
    <div class="relative flex items-center p-4">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M8.257 3.51a1 1 0 011.486 0L17.5 11.25a1 1 0 01-.743 1.75H3.243a1 1 0 01-.743-1.75L8.257 3.51zM10 14a1 1 0 100 2 1 1 0 000-2zm-1-6a1 1 0 012 0v3a1 1 0 11-2 0V8z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <div class="ml-3 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-white tracking-wide">Warning!</p>
        <p class="mt-1 text-sm text-yellow-100 dark:text-yellow-200">Data submission has pending issues.</p>
      </div>
      <div class="ml-4 flex-shrink-0 flex">
        <button class="inline-flex text-white hover:text-yellow-100 dark:hover:text-yellow-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-600 focus:ring-white rounded-md">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-yellow-300 to-yellow-400 dark:from-yellow-600 dark:to-orange-700 animate-pulse-width"></div>
  </div>

  <!-- Error Toast -->
  <div class="rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
              bg-gradient-to-r from-red-600 to-rose-700 dark:from-red-800 dark:to-rose-900">
    <div class="relative flex items-center p-4">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <div class="ml-3 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-white tracking-wide">Error!</p>
        <p class="mt-1 text-sm text-red-100 dark:text-red-200">Failed to submit the form. Please try again.</p>
      </div>
      <div class="ml-4 flex-shrink-0 flex">
        <button class="inline-flex text-white hover:text-red-100 dark:hover:text-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-rose-700 focus:ring-white rounded-md">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-red-300 to-red-400 dark:from-red-600 dark:to-rose-700 animate-pulse-width"></div>
  </div>

  <style>
    @keyframes pulse-width {
      0% {
        width: 0%;
      }
      100% {
        width: 100%;
      }
    }
    .animate-pulse-width {
      animation: pulse-width 5s linear forwards;
    }
    /* Further animations for show/hide (requires JS for full functionality, but here for visual intent) */
    .hide-toast {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    .show-toast {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Responsive Adjustments */
    @media (max-width: 639px) {
        .fixed.bottom-4.right-4 {
            bottom: 0;
            right: 0;
            left: 0;
            width: 100%;
            max-width: none;
            padding: 1rem;
            padding-bottom: 0;
        }
        .fixed.bottom-4.right-4 > div {
            margin-bottom: 1rem;
            border-radius: 0.5rem 0.5rem 0 0;
        }
        .fixed.bottom-4.right-4 > div:last-child {
            margin-bottom: 0;
        }
    }
  </style>
</div>

ArtDeco_ProductCards_Music

Simple responsive product cards component with an Art Deco aesthetic, featuring geometric patterns and a sunset/warm color scheme, suitable for music and audio platforms. Includes dark mode support.

Open Preview

                <div class="bg-gradient-to-br from-yellow-100 via-orange-200 to-red-200 p-4 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 min-h-screen font-serif flex items-center justify-center">
  <div class="container mx-auto px-4 py-8">
    <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-center mb-12 tracking-wider text-yellow-900 dark:text-orange-300 drop-shadow-lg leading-tight">
      <span class="block">Curated Sounds</span>
      <span class="block text-3xl md:text-4xl lg:text-5xl mt-2">Golden Age Audio</span>
    </h2>

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

      <!-- Product Card 1 -->
      <div class="relative bg-gradient-to-br from-yellow-50 to-orange-100 p-6 rounded-lg shadow-xl overflow-hidden dark:from-gray-800 dark:to-gray-900 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMjAwTDIwMCAwVjIwMEgweiIgZmlsbD0iI2ZmZTQ0ZSIgb3BhY2l0eT0iMC4yIi8+PC9zdmc>')]
 dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMjAwTDIwMCAwVjIwMEgweiIgZmlsbD0iIzQ0NSIgb3BhY2l0eT0iMC4yIi8+PC9zdmc>')]
          bg-repeat opacity-50"></div>
        <div class="relative z-10 flex flex-col items-center">
          <img src="https://picsum.photos/id/1047/400/300" alt="Vintage Turntable" class="w-full h-48 object-cover rounded-md mb-4 border-2 border-orange-200 dark:border-gray-600 shadow-md">
          <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-300 mb-2 text-center">The Gilded Gramophone</h3>
          <p class="text-sm text-yellow-700 dark:text-gray-400 mb-4 text-center">Experience unparalleled warmth with our meticulously restored vintage turntable. A true centerpiece for any audiophile.</p>
          <div class="text-3xl font-extrabold text-red-600 dark:text-red-400 mb-4">$1,299</div>
          <button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-full shadow-lg transition-colors duration-300 tracking-wider dark:bg-orange-700 dark:hover:bg-orange-800">
            Add to Collection
          </button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="relative bg-gradient-to-br from-yellow-50 to-orange-100 p-6 rounded-lg shadow-xl overflow-hidden dark:from-gray-800 dark:to-gray-900 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoNDUgMTAwIDEwMCkiIGQ9Ik0wIDIwMEwyMDAgMFYyMDBIMHoiIGZpbGw9IiNmZmU0NGUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
 dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZ1/yMDAwL3N2ZyI+PHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoNDUgMTAwIDEwMCkiIGQ9Ik0wIDIwMEwyMDAgMFYyMDBIMHoiIGZpbGw9IiM0NDUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
          bg-repeat opacity-50"></div>
        <div class="relative z-10 flex flex-col items-center">
          <img src="https://picsum.photos/id/1118/400/300" alt="Art Deco Speakers" class="w-full h-48 object-cover rounded-md mb-4 border-2 border-orange-200 dark:border-gray-600 shadow-md">
          <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-300 mb-2 text-center">Symphony Tower Speakers</h3>
          <p class="text-sm text-yellow-700 dark:text-gray-400 mb-4 text-center">Precision-engineered sound with a sleek Art Deco design. Fill your space with rich, immersive audio.</p>
          <div class="text-3xl font-extrabold text-red-600 dark:text-red-400 mb-4">$849</div>
          <button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-full shadow-lg transition-colors duration-300 tracking-wider dark:bg-orange-700 dark:hover:bg-orange-800">
            Add to Collection
          </button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="relative bg-gradient-to-br from-yellow-50 to-orange-100 p-6 rounded-lg shadow-xl overflow-hidden dark:from-gray-800 dark:to-gray-900 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIwMCAwSDUwTDIwMCAxNTBWMEgiIGZpbGw9IiNmZmU0NGUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
 dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIwMCAwSDUwTDIwMCAxNTBWMEgiIGZpbGw9IiM0NDUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
          bg-repeat opacity-50"></div>
        <div class="relative z-10 flex flex-col items-center">
          <img src="https://picsum.photos/id/111/400/300" alt="Wireless Headphones" class="w-full h-48 object-cover rounded-md mb-4 border-2 border-orange-200 dark:border-gray-600 shadow-md">
          <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-300 mb-2 text-center">Aria Wireless Headphones</h3>
          <p class="text-sm text-yellow-700 dark:text-gray-400 mb-4 text-center">Unleash your music with luxurious comfort and crystal-clear sound, wirelessly.</p>
          <div class="text-3xl font-extrabold text-red-600 dark:text-red-400 mb-4">$229</div>
          <button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-full shadow-lg transition-colors duration-300 tracking-wider dark:bg-orange-700 dark:hover:bg-orange-800">
            Add to Collection
          </button>
        </div>
      </div>

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

Password Reset Component

A responsive password reset component with a monospace/developer design, autumn color scheme, and terminal aesthetics, suitable for e-commerce applications. Includes dark mode support.

Open Preview

                <div class="flex min-h-screen items-center justify-center bg-stone-100 p-4 dark:bg-zinc-900 font-mono">
  <div class="w-full max-w-md rounded-lg border border-stone-300 bg-stone-50 p-6 shadow-xl dark:border-zinc-700 dark:bg-zinc-800 md:p-8">
    <div class="mb-6 flex items-center justify-between">
      <h2 class="text-2xl font-bold text-orange-800 dark:text-orange-400">Reset Password</h2>
      <span class="text-sm text-stone-600 dark:text-zinc-400">< KeyVault /></span>
    </div>

    <p class="mb-6 text-sm leading-relaxed text-stone-700 dark:text-zinc-300">
      Forgot your password? No problem. Enter your account email below and we'll send you a password reset link.
    </p>

    <form action="#" method="POST">
      <div class="mb-4">
        <label for="email" class="mb-2 block text-sm font-medium text-stone-700 dark:text-zinc-300">
          <span class="text-orange-700 dark:text-orange-500">guest@</span>your-store:<span class="text-amber-700 dark:text-amber-500">~</span><span class="animate-pulse">_</span> Enter Email
        </label>
        <input
          type="email"
          id="email"
          name="email"
          autocomplete="email"
          required
          placeholder="[email protected]"
          class="w-full rounded-md border border-stone-400 bg-stone-200 px-3 py-2 text-stone-900 placeholder:text-stone-500 focus:border-orange-600 focus:outline-none focus:ring-1 focus:ring-orange-600 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-100 dark:placeholder:text-zinc-400 dark:focus:border-orange-500 dark:focus:ring-orange-500 text-sm md:text-base"
        />
      </div>

      <div class="mb-6 flex items-center justify-between text-xs md:text-sm">
        <div class="flex items-center">
          <input
            id="remember-me"
            name="remember-me"
            type="checkbox"
            class="h-4 w-4 rounded border-stone-500 bg-stone-300 text-orange-600 focus:ring-orange-500 dark:border-zinc-500 dark:bg-zinc-600 dark:checked:bg-orange-600"
          />
          <label for="remember-me" class="ml-2 text-stone-700 dark:text-zinc-300">
            <span class="text-orange-700 dark:text-orange-500">root@</span>cache:<span class="text-amber-700 dark:text-amber-500">/var/log</span> Remember Device
          </label>
        </div>
        <a href="#" class="font-medium text-orange-700 hover:text-orange-600 dark:text-orange-500 dark:hover:text-orange-400">
          <span class="text-orange-700 dark:text-orange-500">sudo</span> View Log
        </a>
      </div>

      <button
        type="submit"
        class="w-full rounded-md bg-orange-700 px-4 py-2 font-semibold text-white shadow-sm hover:bg-orange-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-700 transition-colors dark:bg-orange-600 dark:hover:bg-orange-500 text-sm md:text-base"
      >
        <span class="text-amber-200">./</span>send-reset-link.sh
      </button>
    </form>

    <div class="mt-8 border-t border-stone-300 pt-6 text-center text-sm dark:border-zinc-700">
      <p class="text-stone-700 dark:text-zinc-300">
        <span class="text-orange-700 dark:text-orange-500">$</span> Already have an account? 
        <a href="#" class="font-medium text-orange-700 hover:text-orange-600 dark:text-orange-500 dark:hover:text-orange-400">Login instead</a>
      </p>
      <p class="mt-2 text-stone-600 dark:text-zinc-400">
        <span class="text-orange-700 dark:text-orange-500">~</span> Need assistance? <a href="#" class="font-medium text-orange-700 hover:text-orange-600 dark:text-orange-500 dark:hover:text-orange-400">Ping Support</a>
      </p>
    </div>
  </div>
</div>

Gaming Dashboard

A complex, responsive gaming dashboard UI component designed for dark mode, featuring a grayscale color scheme. Includes player stats, recent activity, and game lists.

Open Preview

                <div class="min-h-screen bg-gray-950 text-gray-100 font-sans p-4 sm:p-6 md:p-8 dark:bg-gray-950 dark:text-gray-100">

  <!-- Header -->
  <header class="flex flex-col sm:flex-row items-center justify-between mb-8 gap-4">
    <h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-blue-400 tracking-tight">GAMER HUB</h1>
    <div class="relative w-full sm:w-auto">
      <input type="text" placeholder="Search games, players..." class="w-full sm:w-80 p-3 pl-10 rounded-lg bg-gray-800 text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300">
      <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
    </div>
    <div class="flex items-center gap-4">
      <button aria-label="Notifications" class="relative p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors duration-200">
        <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
        <span class="absolute top-0 right-0 block h-3 w-3 rounded-full ring-2 ring-gray-950 bg-red-500"></span>
      </button>
      <img class="w-10 h-10 rounded-full border-2 border-blue-500 object-cover" src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar">
    </div>
  </header>

  <!-- Main Content Grid -->
  <main class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- Player Stats Card -->
    <section class="col-span-1 md:col-span-2 lg:col-span-1 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800">
      <h2 class="text-2xl font-bold mb-4 text-blue-400">Player Stats</h2>
      <div class="flex flex-col items-center mb-6">
        <img class="w-24 h-24 rounded-full border-4 border-blue-400 mb-3 object-cover" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Player Avatar">
        <div class="text-center">
          <p class="text-xl font-semibold">BladeMasterX</p>
          <p class="text-gray-400 text-sm">Level 78 • Rank: Gold I</p>
        </div>
      </div>
      <div class="grid grid-cols-2 gap-4 text-center">
        <div>
          <p class="text-gray-300 text-sm">K/D Ratio</p>
          <p class="text-xl font-bold text-gray-50">2.45</p>
        </div>
        <div>
          <p class="text-gray-300 text-sm">Wins</p>
          <p class="text-xl font-bold text-gray-50">1,234</p>
        </div>
        <div>
          <p class="text-gray-300 text-sm">Matches Played</p>
          <p class="text-xl font-bold text-gray-50">3,109</p>
        </div>
        <div>
          <p class="text-gray-300 text-sm">Hours Played</p>
          <p class="text-xl font-bold text-gray-50">876</p>
        </div>
      </div>
      <button class="mt-6 w-full py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500">View Profile</button>
    </section>

    <!-- Recent Activity Card -->
    <section class="col-span-1 md:col-span-3 lg:col-span-2 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800 overflow-hidden">
      <h2 class="text-2xl font-bold mb-5 text-accent-blue">Recent Activity</h2>
      <div class="space-y-4 max-h-[400px] overflow-y-auto custom-scrollbar pr-2">
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
          <img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=1" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Defeated boss in <span class="text-blue-300">Cyberpunk Ascent</span></p>
            <p class="text-gray-400 text-sm">5 minutes ago</p>
          </div>
          <span class="text-green-400 font-bold text-sm">+120 XP</span>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
          <img class="w-12 h-12 rounded-lg object-cover" src="https://randomuser.me/api/portraits/men/8.jpg" alt="Friend Avatar">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Friend <span class="text-blue-300">GamerGirl_88</span> is online!</p>
            <p class="text-gray-400 text-sm">15 minutes ago</p>
          </div>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
          <img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=2" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Achieved 'Grand Master' in <span class="text-blue-300">Starfall Arena</span></p>
            <p class="text-gray-400 text-sm">1 hour ago</p>
          </div>
          <span class="text-purple-400 font-bold text-sm">+1 Rank</span>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
          <img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=3" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Bought new DLC for <span class="text-blue-300">Mythic Realms IV</span></p>
            <p class="text-gray-400 text-sm">3 hours ago</p>
          </div>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
          <img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=4" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Completed Daily Quest in <span class="text-blue-300">Dragon's Lair Saga</span></p>
            <p class="text-gray-400 text-sm">Yesterday</p>
          </div>
          <span class="text-green-400 font-bold text-sm">+50 XP</span>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
          <img class="w-12 h-12 rounded-lg object-cover" src="https://randomuser.me/api/portraits/women/9.jpg" alt="Friend Avatar">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Friend <span class="text-blue-300">NeonKiller</span> is streaming <span class="text-blue-300">Pixel Warfare</span></p>
            <p class="text-gray-400 text-sm">Yesterday</p>
          </div>
        </div>
      </div>
    </section>

    <!-- My Games List -->
    <section class="col-span-1 md:col-span-3 lg:col-span-1 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800 overflow-hidden">
      <div class="flex justify-between items-center mb-5">
        <h2 class="text-2xl font-bold text-blue-400">My Games</h2>
        <button aria-label="Add Game" class="text-blue-400 hover:text-blue-300 transition-colors duration-200">
          <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
      <div class="space-y-4 max-h-[400px] overflow-y-auto custom-scrollbar pr-2">
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
          <img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=5" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Galactic Odyssey</p>
            <p class="text-gray-400 text-sm">Online - 12 players</p>
          </div>
          <button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
          <img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=6" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Shadowblade Chronicles</p>
            <p class="text-gray-400 text-sm">Offline</p>
          </div>
          <button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
          <img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=7" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Pixel Royale</p>
            <p class="text-gray-400 text-sm">Online - 89 players</p>
          </div>
          <button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
          <img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=8" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Mystic Dungeon Crawler</p>
            <p class="text-gray-400 text-sm">Offline</p>
          </div>
          <button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
          <img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=9" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Cosmic Commanders</p>
            <p class="text-gray-400 text-sm">Online - 21 players</p>
          </div>
          <button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
        </div>
      </div>
    </section>

    <!-- Quick Stats Card -->
    <section class="col-span-1 md:col-span-1 lg:col-span-1 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800">
      <h2 class="text-2xl font-bold mb-5 text-accent-blue">Quick Stats</h2>
      <div class="space-y-4">
        <div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
          <p class="text-gray-300">Online Friends</p>
          <span class="text-blue-400 font-bold text-xl">14</span>
        </div>
        <div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
          <p class="text-gray-300">New Achievements</p>
          <span class="text-green-400 font-bold text-xl">3</span>
        </div>
        <div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
          <p class="text-gray-300">Upcoming Events</p>
          <span class="text-yellow-400 font-bold text-xl">2</span>
        </div>
        <div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
          <p class="text-gray-300">Messages</p>
          <span class="text-red-400 font-bold text-xl">5</span>
        </div>
      </div>
    </section>

  </main>

  <style>
    /* Custom scrollbar for better aesthetics */
    .custom-scrollbar::-webkit-scrollbar {
      width: 8px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
      background: #374151; /* gray-700 */
      border-radius: 10px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: #60A5FA; /* blue-400 */
      border-radius: 10px;
      border: 2px solid #1F2937; /* gray-800 */
    }

    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      border: 2px solid #1F2937; /* gray-800 */
    }

    /* For Firefox */
    .custom-scrollbar {
      scrollbar-width: thin;
      scrollbar-color: #60A5FA #374151; /* thumb and track */
    }
  </style>
</div>

Cyberpunk Price Display Component

A responsive price display component for consulting/services with a cyberpunk, futuristic neon aesthetic. Features dark backgrounds, bright analogous accent colors, and supports dark mode.

Open Preview

                <div class="font-sans antialiased text-purple-200 bg-gray-950 dark:bg-black py-16 px-4 sm:px-8 lg:px-16">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-center mb-12 sm:mb-16 tracking-tight drop-shadow-lg text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-500 via-rose-500 to-amber-400 dark:from-fuchsia-400 dark:via-rose-400 dark:to-orange-300">
      Our Cybernetic Solutions
    </h2>
    <p class="text-lg sm:text-xl text-center text-purple-300 dark:text-purple-400 mb-16 max-w-3xl mx-auto">
      Navigate the digital frontier with our bespoke services, engineered for peak performance and unparalleled insight. Choose your path to technological superiority.
    </p>

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

      <!-- Pricing Card 1: Standard Protocol -->
      <div class="relative bg-gradient-to-br from-gray-900 to-gray-800 dark:from-black dark:to-gray-950 p-8 rounded-lg shadow-lg border border-fuchsia-600/50 dark:border-fuchsia-500/70 overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out">
        <div class="absolute inset-0 bg-fuchsia-600/10 dark:bg-fuchsia-500/10 opacity-30 blur-sm"></div>
        <div class="relative z-10">
          <h3 class="text-3xl font-semibold mb-4 text-fuchsia-400">Standard Protocol</h3>
          <p class="text-purple-300 dark:text-purple-400 mb-6">Essential data streams and basic threat analysis.</p>
          <div class="flex items-baseline mb-8">
            <span class="text-5xl font-bold text-rose-400 drop-shadow-md">$499</span>
            <span class="text-xl text-purple-400 dark:text-purple-500 ml-2">/month</span>
          </div>
          <ul class="text-purple-200 dark:text-purple-300 space-y-3 mb-8">
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Basic System Audit</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-rose-400" fill="currentColor" viewBox="0 0 20 20" ><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 24/7 Virtual Support</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 10GB Secure Storage</li>
            <li class="flex items-center text-purple-500 dark:text-purple-600"><svg class="w-5 h-5 mr-3 text-purple-600 dark:text-purple-700" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg> Advanced AI Analytics</li>
          </ul>
          <button class="w-full py-3 px-6 rounded-md text-lg font-bold text-gray-950 bg-gradient-to-r from-fuchsia-500 to-rose-500 hover:from-fuchsia-400 hover:to-rose-400 transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 focus:ring-offset-gray-900 shadow-lg">
            Initiate Protocol
          </button>
        </div>
      </div>

      <!-- Pricing Card 2: Quantum Nexus (Featured) -->
      <div class="relative bg-gradient-to-br from-fuchsia-900 to-rose-900 dark:from-fuchsia-950 dark:to-rose-950 p-8 rounded-lg shadow-2xl border-2 border-rose-400 dark:border-rose-300 overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out scale-102">
        <span class="absolute top-0 right-0 -mr-2 -mt-2 bg-gradient-to-br from-rose-500 to-orange-400 rounded-bl-lg px-4 py-1 text-sm font-semibold uppercase text-gray-950 dark:text-black shadow-md rotate-3">Most Popular</span>
        <div class="absolute inset-0 bg-orange-400/10 dark:bg-rose-400/10 opacity-30 blur-sm animate-pulse"></div>
        <div class="relative z-10">
          <h3 class="text-3xl font-semibold mb-4 text-orange-300">Quantum Nexus</h3>
          <p class="text-purple-200 dark:text-purple-300 mb-6">Full-spectrum data integration and predictive analysis.</p>
          <div class="flex items-baseline mb-8">
            <span class="text-6xl font-bold text-amber-300 drop-shadow-lg">$999</span>
            <span class="text-xl text-orange-300 dark:text-orange-400 ml-2">/month</span>
          </div>
          <ul class="text-purple-100 dark:text-purple-200 space-y-3 mb-8">
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Complete System Overhaul</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Dedicated Cyber-Agent</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Unlimited Secure Storage</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Advanced AI Predictive Analytics</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-300" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Priority Network Access</li>
          </ul>
          <button class="w-full py-4 px-6 rounded-md text-lg font-bold text-gray-950 bg-gradient-to-r from-orange-400 to-amber-300 hover:from-orange-300 hover:to-amber-200 transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-amber-300 focus:ring-offset-2 focus:ring-offset-fuchsia-900 shadow-xl">
            Access Nexus
          </button>
        </div>
      </div>

      <!-- Pricing Card 3: Elite Cipher -->
      <div class="relative bg-gradient-to-br from-gray-900 to-gray-800 dark:from-black dark:to-gray-950 p-8 rounded-lg shadow-lg border border-orange-600/50 dark:border-orange-500/70 overflow-hidden transform hover:scale-105 transition-all duration-300 ease-in-out">
        <div class="absolute inset-0 bg-orange-600/10 dark:bg-orange-500/10 opacity-30 blur-sm"></div>
        <div class="relative z-10">
          <h3 class="text-3xl font-semibold mb-4 text-orange-400">Elite Cipher</h3>
          <p class="text-purple-300 dark:text-purple-400 mb-6">Proprietary algorithms and direct neural interface.</p>
          <div class="flex items-baseline mb-8">
            <span class="text-5xl font-bold text-amber-400 drop-shadow-md">$1499</span>
            <span class="text-xl text-purple-400 dark:text-purple-500 ml-2">/month</span>
          </div>
          <ul class="text-purple-200 dark:text-purple-300 space-y-3 mb-8">
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Bespoke System Engineering</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 24/7 On-Site Specialist</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Decentralized Data Vault</li>
            <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Quantum AI Integration</li>
          </ul>
          <button class="w-full py-3 px-6 rounded-md text-lg font-bold text-gray-950 bg-gradient-to-r from-orange-500 to-amber-400 hover:from-orange-400 hover:to-amber-300 transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-gray-900 shadow-lg">
            Activate Cipher
          </button>
        </div>
      </div>

    </div>

    <div class="mt-20 text-center">
      <p class="text-lg text-purple-400 dark:text-purple-500 mb-6">Need a custom solution for your unique digital footprint?</p>
      <a href="#" class="inline-flex items-center px-8 py-4 border border-rose-500 rounded-full text-lg font-bold text-rose-300 hover:text-gray-950 hover:bg-gradient-to-r hover:from-rose-500 hover:to-amber-400 transition-all duration-300 transform hover:-translate-y-1 shadow-lg dark:hover:text-black dark:hover:from-rose-400 dark:hover:to-amber-300">
        <svg class="w-6 h-6 mr-3 text-current" 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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
        Contact Our Data Alchemists
      </a>
    </div>
  </div>
</div>

Social Share Buttons Component - Music/Audio

A set of social share buttons designed for music and audio platforms, featuring a Material Design aesthetic with muted colors and supporting dark mode. Includes buttons for common sharing platforms like Facebook, Twitter, and Email.

Open Preview

                <div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl">
  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Share This Track</h3>
  <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">

    <!-- Facebook Share Button -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg bg-blue-300 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105"
      aria-label="Share on Facebook">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.502 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c5.64-.75 10-5.494 10-10z" clip-rule="evenodd" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">Facebook</span>
    </a>

    <!-- Twitter Share Button -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg bg-sky-300 hover:bg-sky-400 dark:bg-sky-600 dark:hover:bg-sky-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105"
      aria-label="Share on Twitter">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.007-.531.807-.582 1.515-1.31 2.072-2.124-.741.329-1.532.547-2.35.648a4.332 4.332 0 001.956-2.269c-.767.429-1.62.735-2.514.896a4.36 4.36 0 00-7.712 2.923c0 .337.04.668.12 1.0H3.38c-.374 0-.742-.03-.9-.08C2.56 12.378 2 13.9 2 15.467c0 2.2.945 4.14 2.44 5.234A4.326 4.326 0 012 19.129c.655.109 1.3.178 1.954.178.69 0 1.36-.088 2.01-.256C5.58 20.088 6.94 20.251 8.29 20.251z" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">Twitter</span>
    </a>

    <!-- Email Share Button -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg bg-teal-300 hover:bg-teal-400 dark:bg-teal-600 dark:hover:bg-teal-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105"
      aria-label="Share via Email">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M.05 3.555A2 2 0 012 2h20a2 2 0 011.95 1.555L12 12.032.05 3.555zM0 4.67V19a2 2 0 002 2h20a2 2 0 002-2V4.67l-12 7.7L0 4.67z" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">Email</span>
    </a>

    <!-- WhatsApp Share Button -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg bg-green-300 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105"
      aria-label="Share on WhatsApp">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12.046 2c-5.466 0-9.917 4.451-9.917 9.917 0 1.758.463 3.447 1.341 4.93L.5 22.5l5.068-1.579c1.42.793 3.023 1.258 4.708 1.258 5.467 0 9.917-4.451 9.917-9.917C21.963 6.45 17.512 2 12.046 2zm0 1.83c4.462 0 8.087 3.626 8.087 8.087 0 4.46-3.625 8.086-8.087 8.086-1.585 0-3.08-.458-4.364-1.25l-.265-.157-2.75 1.0L5.3 18.067l-.173-.284c-.878-1.425-1.353-3.03-1.353-4.733.001-4.461 3.626-8.086 8.087-8.086zm.135 3.42c-2.274 0-3.238 1.905-3.32 2.01-.06.07-.37.178-.506.11-.137-.067-.384-.14-.543.08-.22.29-.444.6-.607.78-.17.18-.344.382-.09.845.248.463.78 1.054 1.455 1.62.903.75 1.761 1.052 2.378 1.15.58.093 1.077.067 1.488-.168.411-.234.8-1.006 1.107-1.493.307-.487.31-.6.216-.78-.094-.18-.266-.43-.377-.57-.11-.14-.236-.26-.118-.46.118-.2.83-.997.94-.997.108 0 .61.08.7.207.088.127.568 1.54 1.077 1.85.51.31 1.218.423 1.246.257.03-.166-.35-.607-.78-1.43z" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">WhatsApp</span>
    </a>

    <!-- Copy Link Button -->
    <button onclick="copyToClipboard('https://example.com/track-link')" class="flex items-center justify-center p-3 rounded-lg bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50"
      aria-label="Copy link to clipboard">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M15 10c0 .552-.448 1-1 1H8c-.552 0-1-.448-1-1V6c0-.552.448-1 1-1h6c.552 0 1 .448 1 1v4z" />
        <path fill-rule="evenodd" d="M9 20h9c1.105 0 2-.895 2-2V8h-2v10H9v2zm-4 0h9V6c0-1.105-.895-2-2-2H5c-1.105 0-2 .895-2 2v12c0 1.105.895 2 2 2zm2-14h6.002a2 2 0 011.996 2v6.002a2 2 0 01-2 2H7.002a2 2 0 01-2-2V8.002a2 2 0 012-2z" clip-rule="evenodd" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">Copy Link</span>
    </button>

    <!-- More Options Button -->
    <button class="flex items-center justify-center p-3 rounded-lg bg-indigo-300 hover:bg-indigo-400 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50"
      aria-label="More sharing options">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 5a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">More</span>
    </button>
  </div>

  <!-- Optional: Hidden input for copy to clipboard functionality -->
  <input type="text" id="trackLinkInput" class="absolute opacity-0 pointer-events-none" value="">

  <script>
    function copyToClipboard(text) {
      const input = document.getElementById('trackLinkInput');
      input.value = text;
      input.select();
      document.execCommand('copy');
      alert('Link copied to clipboard!'); // Simple feedback for user
    }
  </script>
</div>

Playful_Music_Timeline_Component

A playful and fun timeline component designed for music and audio platforms, featuring bright jewel tones, rounded elements, and a responsive layout with dark mode support. Displays audio events or tracks over time.

Open Preview

                <div class="font-sans bg-gradient-to-br from-emerald-50 to-teal-100 text-gray-800 py-12 dark:from-gray-900 dark:to-gray-800 dark:text-gray-200">

  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-12 text-emerald-700 dark:text-emerald-400 drop-shadow-lg">Music Journey</h2>

    <div class="relative flex flex-col items-center">
      <!-- Vertical line -->
      <div class="absolute hidden md:block w-1.5 bg-gradient-to-b from-emerald-500 via-sapphire-500 to-ruby-500 h-full rounded-full dark:from-emerald-700 dark:via-blue-700 dark:to-red-700"></div>

      <!-- Timeline Items -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-y-16 gap-x-12 w-full max-w-5xl">

        <!-- Item 1: Left on Desktop, Full Width on Mobile -->
        <div class="md:col-start-1 md:text-right relative md:pr-16 lg:pr-24 group">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-3xl shadow-xl dark:shadow-2xl transform transition-transform duration-300 hover:scale-105 hover:rotate-1 focus-within:scale-105 focus-within:ring-4 focus-within:ring-emerald-300 dark:focus-within:ring-emerald-600">
            <div class="mb-4 text-emerald-600 dark:text-emerald-400 font-bold text-lg">2018 - The First Beat</div>
            <div class="text-2xl font-bold mb-3 text-emerald-800 dark:text-emerald-300">"Groove Unleashed" Album Release</div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">Our debut album, a mix of electronic vibes and soulful melodies, set the stage for our sonic exploration.</p>
            <img class="w-full h-48 object-cover rounded-xl mb-4 shadow-md" src="https://picsum.photos/400/250?random=1" alt="Album Cover">
            <div class="flex items-center space-x-3 text-sm text-gray-600 dark:text-gray-400">
                <svg class="w-5 h-5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13m-6 0V9m0 6a1 1 0 100 2 1 1 0 000-2zm0 0a1 1 0 100 2 1 1 0 000-2zm-6 6a1 1 0 100 2 1 1 0 000-2z"></path></svg>
                <span>Genre: Electronic Pop</span>
            </div>
          </div>
          <!-- Dot -->
          <div class="hidden md:block absolute top-1/2 right-0 transform translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-emerald-500 border-4 border-white dark:border-gray-800 shadow-md group-hover:scale-125 transition-transform duration-300"></div>
        </div>

        <!-- Item 2: Right on Desktop, Full Width on Mobile -->
        <div class="md:col-start-2 md:text-left relative md:pl-16 lg:pl-24 group">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-3xl shadow-xl dark:shadow-2xl transform transition-transform duration-300 hover:scale-105 hover:-rotate-1 focus-within:scale-105 focus-within:ring-4 focus-within:ring-blue-300 dark:focus-within:ring-blue-600">
            <div class="mb-4 text-sapphire-600 dark:text-sapphire-400 font-bold text-lg">2019 - Live Resonance</div>
            <div class="text-2xl font-bold mb-3 text-sapphire-800 dark:text-sapphire-300">World Tour & Fan Engagement</div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">Connecting with fans globally through vibrant live performances and interactive sessions.</p>
            <img class="w-full h-48 object-cover rounded-xl mb-4 shadow-md" src="https://picsum.photos/400/250?random=2" alt="Concert Stage">
            <div class="flex items-center space-x-3 text-sm text-gray-600 dark:text-gray-400">
                <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 15v-1a4 4 0 00-4-4H3m0 0l1.5-1.5M3 3l-1.5 1.5m10 4a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                <span>Attendees: 50,000+</span>
            </div>
          </div>
          <!-- Dot -->
          <div class="hidden md:block absolute top-1/2 left-0 transform -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-sapphire-500 border-4 border-white dark:border-gray-800 shadow-md group-hover:scale-125 transition-transform duration-300"></div>
        </div>

        <!-- Item 3: Left on Desktop, Full Width on Mobile -->
        <div class="md:col-start-1 md:text-right relative md:pr-16 lg:pr-24 group">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-3xl shadow-xl dark:shadow-2xl transform transition-transform duration-300 hover:scale-105 hover:rotate-1 focus-within:scale-105 focus-within:ring-4 focus-within:ring-red-300 dark:focus-within:ring-red-600">
            <div class="mb-4 text-ruby-600 dark:text-ruby-400 font-bold text-lg">2020 - Digital Symphony</div>
            <div class="text-2xl font-bold mb-3 text-ruby-800 dark:text-ruby-300">Exclusive Streaming Series Launch</div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">Launched a highly acclaimed streaming series, bringing intimate performances to homes worldwide.</p>
            <img class="w-full h-48 object-cover rounded-xl mb-4 shadow-md" src="https://picsum.photos/400/250?random=3" alt="Streaming Setup">
            <div class="flex items-center space-x-3 text-sm text-gray-600 dark:text-gray-400">
                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m-4 8h4m10-8h4m-4 8h4M7 8a4 4 0 11-8 0 4 4 0 018 0zm0 8a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
                <span>Viewers: 1 Million+</span>
            </div>
          </div>
          <!-- Dot -->
          <div class="hidden md:block absolute top-1/2 right-0 transform translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-ruby-500 border-4 border-white dark:border-gray-800 shadow-md group-hover:scale-125 transition-transform duration-300"></div>
        </div>

        <!-- Item 4: Right on Desktop, Full Width on Mobile -->
        <div class="md:col-start-2 md:text-left relative md:pl-16 lg:pl-24 group">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-3xl shadow-xl dark:shadow-2xl transform transition-transform duration-300 hover:scale-105 hover:-rotate-1 focus-within:scale-105 focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600">
            <div class="mb-4 text-purple-600 dark:text-purple-400 font-bold text-lg">2021 - Collaborative Harmonies</div>
            <div class="text-2xl font-bold mb-3 text-purple-800 dark:text-purple-300">Ft. Artist Collaborations & Remixes</div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">Exciting collaborations with renowned artists, pushing boundaries and creating fresh sounds.</p>
            <img class="w-full h-48 object-cover rounded-xl mb-4 shadow-md" src="https://picsum.photos/400/250?random=4" alt="Collaboration Session">
            <div class="flex items-center space-x-3 text-sm text-gray-600 dark:text-gray-400">
                <img class="w-6 h-6 rounded-full border-2 border-purple-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Artist Avatar">
                <img class="w-6 h-6 rounded-full border-2 border-purple-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Artist Avatar">
                <span>Featured Artists</span>
            </div>
          </div>
          <!-- Dot -->
          <div class="hidden md:block absolute top-1/2 left-0 transform -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-purple-500 border-4 border-white dark:border-gray-800 shadow-md group-hover:scale-125 transition-transform duration-300"></div>
        </div>

      </div>
    </div>

    <div class="text-center mt-16">
        <a href="#" class="inline-flex items-center px-8 py-4 bg-emerald-600 text-white font-semibold rounded-full shadow-lg hover:bg-emerald-700 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:bg-emerald-700 dark:hover:bg-emerald-800 dark:focus:ring-emerald-600 transition duration-300">
            Explore More Sounds
            <svg class="ml-3 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="M9 5l7 7-7 7"></path></svg>
        </a>
    </div>

  </div>
</div>

<style>
  /* Custom colors for Jewel Tones, adjusted for playfulness/brightness */
  .text-emerald-700 { color: #027a48; } .dark\:text-emerald-400 { color: #34d399; }
  .bg-emerald-500 { background-color: #10b981; }
  .bg-sapphire-500 { background-color: #3b82f6; }
  .bg-ruby-500 { background-color: #ef4444; }
  .bg-purple-500 { background-color: #a855f7; }

  .text-emerald-600 { color: #059669; } .dark\:text-emerald-400 { color: #34d399; }
  .text-emerald-800 { color: #065f46; } .dark\:text-emerald-300 { color: #6ee7b7; }

  .text-sapphire-600 { color: #2563eb; } .dark\:text-sapphire-400 { color: #60a5fa; }
  .text-sapphire-800 { color: #1e40af; } .dark\:text-sapphire-300 { color: #93c5fd; }

  .text-ruby-600 { color: #dc2626; } .dark\:text-ruby-400 { color: #f87171; }
  .text-ruby-800 { color: #991b1b; } .dark\:text-ruby-300 { color: #fda4af; }

  .text-purple-600 { color: #9333ea; } .dark\:text-purple-400 { color: #c084fc; }
  .text-purple-800 { color: #6b21a8; } .dark\:text-purple-300 { color: #d8b4fe; }


  /* Focus ring colors */
  .focus-within\:ring-emerald-300 { box-shadow: 0 0 0 4px #a7f3d0; } .dark\:focus-within\:ring-emerald-600 { box-shadow: 0 0 0 4px #047857; }
  .focus-within\:ring-blue-300 { box-shadow: 0 0 0 4px #93c5fd; } .dark\:focus-within\:ring-blue-600 { box-shadow: 0 0 0 4px #2563eb; }
  .focus-within\:ring-red-300 { box-shadow: 0 0 0 4px #fca5a5; } .dark\:focus-within\:ring-red-600 { box-shadow: 0 0 0 4px #dc2626; }
  .focus-within\:ring-purple-300 { box-shadow: 0 0 0 4px #d8b4fe; } .dark\:focus-within\:ring-purple-600 { box-shadow: 0 0 0 4px #a855f7; }

  /* Safari specific flex-basis fix for mobile layout */
  @supports (-webkit-touch-callout: none) {
    .md\:grid-cols-2 > div {
      width: 100%;
    }
  }
</style>

Watercolor_Artistic_Grid_Layout_Consulting

A simple, responsive grid layout component for consulting/services, featuring a soft watercolor/artistic design with cool neutrals and dark mode support.

Open Preview

                <div class="font-sans bg-gradient-to-br from-blue-50 to-indigo-100 text-gray-800 dark:from-gray-900 dark:to-gray-800 dark:text-gray-200 p-6 md:p-12 lg:p-16
            relative overflow-hidden group">
  <!-- Background artistic overlay for light mode -->
  <div class="absolute inset-0 z-0 opacity-40 dark:opacity-0 pointer-events-none"
    style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2020/svg" viewBox="0 0 1000 1000"><filter id="blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="40" /></filter><circle cx="200" cy="300" r="150" fill="rgb(199, 210, 254)" filter="url(%23blur)" /><circle cx="700" cy="500" r="200" fill="rgb(224, 231, 255)" filter="url(%23blur)" /><circle cx="400" cy="750" r="100" fill="rgb(165, 180, 252)" filter="url(%23blur)" /></svg>'); background-repeat: no-repeat; background-size: cover; background-position: center;"></div>

  <!-- Background artistic overlay for dark mode -->
  <div class="absolute inset-0 z-0 opacity-0 dark:opacity-30 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" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="40" /></filter><circle cx="200" cy="300" r="150" fill="rgb(31, 41, 55)" filter="url(%23blur)" /><circle cx="700" cy="500" r="200" fill="rgb(55, 65, 81)" filter="url(%23blur)" /><circle cx="400" cy="750" r="100" fill="rgb(17, 24, 39)" filter="url(%23blur)" /></svg>'); background-repeat: no-repeat; background-size: cover; background-position: center;"></div>

  <div class="relative z-10 max-w-7xl mx-auto py-8 lg:py-12">
    <header class="text-center mb-12">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4
                 text-gray-900 dark:text-gray-50 drop-shadow-lg leading-tight">
        Our Consulting Expertise
      </h2>
      <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
        Empowering your business with strategic insights and tailored solutions.
      </p>
    </header>

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

      <!-- Service Card 1 -->
      <article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
                      overflow-hidden border border-gray-200 dark:border-gray-700
                      transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
                      relative pb-6">
        <div class="absolute inset-0 pointer-events-none"
             style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
             <rect x="0" y="0" width="100" height="100" fill="lightgray"/><circle cx="50" cy="50" r="40" fill="lightgray" stroke="white" stroke-width="2"/></svg>');
             background-size: 150px; background-repeat: no-repeat; background-position: center top;">
        </div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <img src="https://picsum.photos/id/1015/300/200" alt="Strategy Development" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
          <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Strategy Development</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
            Crafting innovative strategies to navigate complex markets and achieve sustainable growth.
          </p>
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
            Learn More <span aria-hidden="true">&rarr;</span>
          </a>
        </div>
      </article>

      <!-- Service Card 2 -->
      <article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
                      overflow-hidden border border-gray-200 dark:border-gray-700
                      transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
                      relative pb-6">
        <div class="absolute inset-0 pointer-events-none"
             style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
             <rect x="0" y="0" width="100" height="100" fill="lightgray"/><path d="M20 50 L80 50 M50 20 L50 80" stroke="white" stroke-width="2"/></svg>');
             background-size: 150px; background-repeat: no-repeat; background-position: center top;">
        </div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <img src="https://picsum.photos/id/1041/300/200" alt="Operations Optimization" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
          <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Operations Optimization</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
            Streamlining processes and enhancing efficiency to maximize your operational performance.
          </p>
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
            Learn More <span aria-hidden="true">&rarr;</span>
          </a>
        </div>
      </article>

      <!-- Service Card 3 -->
      <article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
                      overflow-hidden border border-gray-200 dark:border-gray-700
                      transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
                      relative pb-6">
        <div class="absolute inset-0 pointer-events-none"
             style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
             <rect x="0" y="0" width="100" height="100" fill="lightgray"/><path d="M10 90 L90 10 L80 90 L10 90 Z" fill="lightgray" stroke="white" stroke-width="2"/></svg>');
             background-size: 150px; background-repeat: no-repeat; background-position: center top;">
        </div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <img src="https://picsum.photos/id/1060/300/200" alt="Digital Transformation" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
          <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Digital Transformation</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
            Guiding your journey through digital innovation, from adoption to full integration.
          </p>
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
            Learn More <span aria-hidden="true">&rarr;</span>
          </a>
        </div>
      </article>

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

Corporate Booking Footer

A complex, responsive corporate footer component designed for booking/reservation systems, featuring warm neutrals and dark mode support, using semantic HTML and Tailwind CSS.

Open Preview

                <footer class="bg-stone-100 dark:bg-stone-900 text-stone-700 dark:text-stone-300 py-12 md:py-16">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
      <!-- Company Info / Logo -->
      <div class="flex flex-col items-start">
        <a href="#" class="text-2xl font-bold text-stone-800 dark:text-stone-100 mb-4 tracking-tight">
          <span class="text-amber-600 dark:text-amber-400">Book</span>Corp
        </a>
        <p class="text-sm mb-4 leading-relaxed max-w-xs">Your trusted partner for seamless bookings and reservations. Excellence in every appointment.</p>
        <div class="flex space-x-4">
          <a href="#" class="text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.79c0-2.508 1.493-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.34 21.128 22 16.991 22 12z" clip-rule="evenodd" />
            </svg>
            <span class="sr-only">Facebook</span>
          </a>
          <a href="#" class="text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-.03.01-.06-.02-.09-.036l-2.126-1.643-.092-.073-.016.035c-.443.916-1.077 1.636-1.897 2.164a7.994 7.994 0 01-.845.41c-.24.088-.476.162-.714.22h-.032c-.08-.009-.16-.017-.238-.024l-.168-.005a.75.75 0 01-.132-.016 10.022 10.022 0 01-1.74-1.218c-.894-.78-1.558-1.765-1.92-2.883-.178-.54-.287-1.11-.32-1.696-.016-.277-.023-.556-.023-.836 0-3.328 2.672-6 6-6h2v-2h-3C6.672 5 4 7.672 4 10.999c0 .28.007.559.023.836.033.586.142 1.156.32 1.696.363 1.117 1.027 2.102 1.92 2.883 1.01 1.008 2.247 1.624 3.6 1.838.08.012.16.026.24.037.03.004.06.006.09.006v.05zM22 12c0-3.328-2.672-6-6-6h-2v2h3c2.203 0 4 1.797 4 4 0 .28-.007.559-.023.836-.033.586-.142 1.156-.32 1.696-.363 1.117-1.027 2.102-1.92 2.883-1.01 1.008-2.247 1.624-3.6 1.838-.08.012-.16.026-.24.037-.03.004-.06.006-.09.006v.05z" fill="currentColor" />
              <path d="M12 9a3 3 0 100 6 3 3 0 000-6z" fill="currentColor" />
              <path d="M12 11a1 1 110-2 1 1 0 000 2z" fill="currentColor" />
              <circle cx="12" cy="12" r="3" opacity="0" />
            </svg>
            <span class="sr-only">Instagram</span>
          </a>
          <a href="#" class="text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M.057 1.7L.023 1.644l.01-.01c.148-.12.296-.24.444-.36l.01-.008L.5.5C.42-.5.5-.5.42-.5.42-.5.25.5-.5.5c-.75 0 1.25-.5 1.25-.5.2-.2.2-.2-.2-.2C1.72.1-.22-.2-.22-.2.02-.2-.22-.2.2-.2Z" fill="none"/>
              <path d="M19.5 0h-15C2.239 0 0 2.239 0 4.999v14.002C0 21.761 2.239 24 4.5 24h15c2.761 0 5-2.239 5-4.999V4.999C24 2.239 21.761 0 19.5 0zm-4.053 2.164c.731.066 1.34.195 1.776.326.438.132.898.396 1.35.792.45.396.792.898 1.032 1.488.24.59.396 1.296.486 2.088.09.792.108 1.692.054 2.652-.054.96-.216 1.956-.486 2.94-.27.984-.666 1.836-1.188 2.556-.522.72-1.188 1.278-1.998 1.68-.81.402-1.692.684-2.61.846-1.22.216-2.592.29-4.104.22-.648-.027-1.314-.09-2.022-.189-.708-.099-1.395-.234-2.034-.396-.639-.162-1.224-.396-1.728-.693-.504-.297-.936-.666-1.296-1.107-.36-.441-.6-1-.72-1.68-.12-.68-.198-1.476-.234-2.388-.036-.912-.009-1.872.081-2.88.09-.96.252-1.896.486-2.796.234-.9.567-1.71.999-2.43.432-.72 1.008-1.278 1.728-1.68.72-.402 1.548-.684 2.484-.846 1.08-.18 2.304-.252 3.672-.216.702.018 1.413.081 2.115.195.702.114 1.377.261 2.016.486zm-.05-.008z" fill="currentColor"/>
            </svg>
            <span class="sr-only">LinkedIn</span>
          </a>
        </div>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Quick Links</h3>
        <nav class="flex flex-col space-y-3">
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">About Us</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Services</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Pricing</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">FAQ</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Blog</a>
        </nav>
      </div>

      <!-- Resources -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Resources</h3>
        <nav class="flex flex-col space-y-3">
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Support Center</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Developer API</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Terms of Service</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Privacy Policy</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Cookie Policy</a>
        </nav>
      </div>

      <!-- Contact Info / Newsletter -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Get in Touch</h3>
        <address class="not-italic text-sm space-y-2 mb-6">
          <p>123 Booking Ave, Suite 400</p>
          <p>Business City, BC 90210</p>
          <p class="mt-2"><a href="tel:+1234567890" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">+1 (234) 567-890</a></p>
          <p><a href="mailto:[email protected]" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">[email protected]</a></p>
        </address>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Newsletter</h3>
        <form class="flex flex-col sm:flex-row gap-2">
          <label for="email-address" class="sr-only">Email address</label>
          <input id="email-address" name="email" type="email" autocomplete="email" required
            class="w-full flex-auto rounded-md border border-stone-300 dark:border-stone-700 bg-white/50 dark:bg-stone-800 px-3.5 py-2 text-stone-800 dark:text-stone-200 shadow-sm placeholder:text-stone-400 dark:placeholder:text-stone-500 focus:ring-2 focus:ring-inset focus:ring-amber-500 dark:focus:ring-amber-400 sm:text-sm sm:leading-6"
            placeholder="Enter your email">
          <button type="submit"
            class="flex-none rounded-md bg-amber-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-amber-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 dark:bg-amber-500 dark:hover:bg-amber-400 dark:focus-visible:outline-amber-500">
            Subscribe
          </button>
        </form>
      </div>
    </div>

    <div class="border-t border-stone-300 dark:border-stone-700 pt-8 mt-8 text-center text-sm">
      <p>&copy; <span id="current-year"></span> BookCorp. All rights reserved.</p>
    </div>
  </div>
  <script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
  </script>
</footer>

1 ... 6 7 8 9 10 ... 315

Search Components

Categories

All Components