Search Components

All Components

Browse all available Tailwind CSS components

Industrial_Juwel_Tones_Grid_Layout_Component

A responsive grid layout component for consulting/services, featuring an industrial aesthetic with jewel tone colors. Includes dark mode support and interactive elements.

Open Preview

                <section class="py-12 px-4 sm:px-6 lg:px-8 bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-sans">
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-12">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-emerald-700 dark:text-emerald-400 mb-4">
        Our Consulting Expertise
      </h2>
      <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
        Leveraging a deep understanding of industry dynamics, we deliver bespoke solutions that drive transformation and sustainable growth.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Service Card 1 -->
      <div class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-2xl hover:border-emerald-600 dark:hover:border-emerald-500">
        <div class="p-6 sm:p-8 relative z-10">
          <div class="flex items-center justify-center w-16 h-16 bg-emerald-600 dark:bg-emerald-500 text-white rounded-full mb-6 mx-auto group-hover:scale-110 transition-transform duration-300">
            <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-1.208-8.454-3.327M10 6L6 2m0 0L2 6m4-4v14m0-4 4 4m0 0 4-4m-4 4h14m-4-4 4-4m0 0 4 4"></path></svg>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-3 text-center">Strategic Planning</h3>
          <p class="text-gray-700 dark:text-gray-300 text-center leading-relaxed mb-6">
            We help define clear visions, actionable strategies, and robust roadmaps for future success.
          </p>
          <a href="#" class="block mx-auto text-center px-6 py-3 bg-emerald-600 dark:bg-emerald-500 text-white rounded-md font-semibold text-lg hover:bg-emerald-700 dark:hover:bg-emerald-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-75">
            Learn More
          </a>
        </div>
      </div>

      <!-- Service Card 2 -->
      <div class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-2xl hover:border-ruby-600 dark:hover:border-ruby-500" style="--ruby-600: #DC2626; --ruby-500: #EF4444;">
        <div class="p-6 sm:p-8 relative z-10">
          <div class="flex items-center justify-center w-16 h-16 bg-red-600 dark:bg-red-500 text-white rounded-full mb-6 mx-auto group-hover:scale-110 transition-transform duration-300">
            <svg class="h-8 w-8" 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 3H9M3 19V6l12-3m-6 3v13m-6 0V6.364v3.272m0 10.364V12a8 8 0 008 8h2.091M17 19H9M7 6H4a1 1 0 00-1 1v12a1 1 0 001 1h16a1 1 0 001-1V7a1 1 0 00-1-1h-3.398m-7.798 0V5.091c0-.5-.41-.909-.909-.909h-.182c-.5 0-.909.41-.909.909V6m-2.182 0l-2.062 4.4L4 12V7c0-.55.45-1 1-1h2.182zm1.636 0L12 9.091L13.182 6m2.182 0l2.062 4.4L20 12V7c0-.55-.45-1-1-1h-2.182z"></path></svg>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-3 text-center">Operational Excellence</h3>
          <p class="text-gray-700 dark:text-gray-300 text-center leading-relaxed mb-6">
            Optimize processes, streamline workflows, and enhance productivity across your organization.
          </p>
          <a href="#" class="block mx-auto text-center px-6 py-3 bg-red-600 dark:bg-red-500 text-white rounded-md font-semibold text-lg hover:bg-red-700 dark:hover:bg-red-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75">
            Explore Services
          </a>
        </div>
      </div>

      <!-- Service Card 3 -->
      <div class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-2xl hover:border-sapphire-600 dark:hover:border-sapphire-500" style="--sapphire-600: #2563EB; --sapphire-500: #3B82F6;">
        <div class="p-6 sm:p-8 relative z-10">
          <div class="flex items-center justify-center w-16 h-16 bg-blue-600 dark:bg-blue-500 text-white rounded-full mb-6 mx-auto group-hover:scale-110 transition-transform duration-300">
            <svg class="h-8 w-8" 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="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16v4m-2-2h4M9 9l3 3m0 0l3-3m-3 3l-3 3m3-3v8m4-12h4m-2 2v4m1-13.438V4.57c0-0.342 0.28-0.627 0.622-0.627h.06c0.342 0 0.622 0.285 0.622 0.627v.868M6.5 17L12 22l5.5-5M9 7h6m-1 7h2m-1 6H9m6-10V4.57c0-0.342 0.28-0.627 0.622-0.627h.06c0.342 0 0.622 0.285 0.622 0.627v.868"></path></svg>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-3 text-center">Digital Transformation</h3>
          <p class="text-gray-700 dark:text-gray-300 text-center leading-relaxed mb-6">
            Navigate the digital landscape with confidence, implementing cutting-edge technologies.
          </p>
          <a href="#" class="block mx-auto text-center px-6 py-3 bg-blue-600 dark:bg-blue-500 text-white rounded-md font-semibold text-lg hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
            Start Your Journey
          </a>
        </div>
      </div>

      <!-- Service Card 4 (Horizontal, Image-backed) -->
      <div class="md:col-span-2 relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-2xl hover:border-purple-600 dark:hover:border-purple-500">
        <img src="https://picsum.photos/id/160/1200/600" alt="Team Collaboration" class="absolute inset-0 w-full h-full object-cover opacity-20 dark:opacity-10 group-hover:scale-105 transition-transform duration-500">
        <div class="p-6 sm:p-8 flex flex-col md:flex-row items-center relative z-10">
          <div class="flex-shrink-0 mb-6 md:mb-0 md:mr-8">
            <div class="flex items-center justify-center w-20 h-20 bg-purple-600 dark:bg-purple-500 text-white rounded-full mx-auto md:mx-0 group-hover:rotate-12 transition-transform duration-300">
              <svg class="h-10 w-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a4 4 0 014-4h12.5M16 11H4m10 0a2 2 0 100-4m-10 4a2 2 0 100-4m-2 4h4m-2-4v4m-2 2L9 20l-4-4

Social Login Component

A complex social login component inspired by Material Design principles, featuring rich jewel tones, responsive layout, and dark mode support for social networking interfaces.

Open Preview

                <div class="min-h-screen bg-gray-100 flex items-center justify-center p-4 dark:bg-gray-900 font-sans">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden md:max-w-lg lg:max-w-xl transition-all duration-300 ease-in-out transform hover:scale-[1.01] border border-gray-200 dark:border-gray-700">
    <div class="md:flex">
      <div class="w-full p-8 md:w-2/3 lg:w-3/5 relative">
        <div class="flex items-center justify-between mb-8">
          <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white">Join Us!</h2>
          <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Sign Up</a>
        </div>

        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300 mb-8 max-w-[200px]">Connect with friends and the world around you on our social platform.</p>

        <div class="space-y-4 mb-8">
          <button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><path fill="currentColor" d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 62.1l-65.7 65.7c-31.5-29.2-76.3-46.7-100.6-46.7-65.1 0-118.8 52.8-118.8 118s52.7 118 118.8 118c50.7 0 86.8-24.3 103.5-46.7h-170.8V256h240.8z"></path></svg>
            Sign in with Google
          </button>
          <button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
            <svg class="w-5 h-5 mr-3" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.66S260.43 0 223.34 0C154.2 0 110.18 41.13 110.18 106.6V188H22.4v92h87.78V512h109.14V288z"></path></svg>
            Sign in with Facebook
          </button>
        </div>

        <div class="relative flex justify-center text-xs uppercase mb-8">
          <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
          <div class="absolute inset-y-0 left-0 right-0 border-t border-gray-300 dark:border-gray-600 flex items-center -z-10"></div>
        </div>

        <form class="space-y-6">
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
            <div class="mt-1">
              <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
            </div>
          </div>

          <div>
            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
            <div class="mt-1">
              <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
            </div>
          </div>

          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-sapphire border-gray-300 dark:border-gray-600 rounded focus:ring-sapphire dark:focus:ring-sapphire form-checkbox dark:bg-gray-700 dark:checked:bg-sapphire">
              <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
            </div>

            <div class="text-sm">
              <a href="#" class="font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
            </div>
          </div>

          <div>
            <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-base font-semibold text-white bg-emerald hover:bg-emerald-dark focus:outline-none focus:ring- sapphire focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-200 ease-in-out transform hover:-translate-y-0.5">
              Sign in
            </button>
          </div>
        </form>
      </div>
      <div class="hidden md:block md:w-1/3 lg:w-2/5 relative overflow-hidden rounded-r-xl bg-gradient-to-br from-emerald to-sapphire p-8 flex items-end justify-center dark:from-emerald-dark dark:to-sapphire-dark">
        <div class="absolute inset-0 bg-cover bg-center opacity-30 dark:opacity-20" style="background-image: url('https://picsum.photos/800/600?random=1');"></div>
        <div class="relative z-10 text-white text-center pb-12">
          <h3 class="text-2xl font-bold mb-4 drop-shadow-lg">Connect & Share</h3>
          <p class="text-sm mb-6 opacity-90 drop-shadow-md">Dive into a world of endless connections and vibrant communities. Your journey starts here.</p>
          <div class="relative w-28 h-28 mx-auto mb-4 border-4 border-white dark:border-gray-dark rounded-full overflow-hidden shadow-lg transform hover:scale-105 transition-transform duration-300">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-full h-full object-cover">
            <span class="absolute bottom-1 right-1 block w-4 h-4 bg-lime-400 border-2 border-white dark:border-gray-dark rounded-full"></span>
          </div>
          <p class="font-semibold">Join Mark Today!</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom colors for Jewel Tones */
  .bg-emerald {
    background-color: #00A36C;
  }
  .hover\:bg-emerald-dark:hover {
    background-color: #008C5C;
  }
  .from-emerald {
    --tw-gradient-from: #00A36C var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 163 108 / 0) var(--tw-gradient-to-position);
  }
  dark .dark\:from-emerald-dark {
    --tw-gradient-from: #008C5C var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 140 92 / 0) var(--tw-gradient-to-position);
  }

  .to-sapphire {
    --tw-gradient-to: #0F52BA var(--tw-gradient-to-position);
  }
  dark .dark\:to-sapphire-dark {
    --tw-gradient-to: #0A3C9E var(--tw-gradient-to-position);
  }

  .text-sapphire {
    color: #0F52BA;
  }
  .focus\:ring-sapphire:focus {
    --tw-ring-color: #0F52BA;
  }
  dark .checked\:bg-sapphire:checked {
    background-color: #0F52BA;
  }
</style>

Product Comparison Component - Monospace/Developer Style

A complex, responsive product comparison component designed with a monospace/developer aesthetic, sporting a purple/violet color scheme. Ideal for sports and fitness applications, it features dark mode support and a clean, terminal-inspired look with multiple comparison points.

Open Preview

                <div class="font-['JetBrains_Mono'] bg-gray-50 dark:bg-gray-950 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl dark:shadow-purple-950/50 overflow-hidden">
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
  
  <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-6 sm:mb-8 text-center text-purple-700 dark:text-purple-400"><span class="text-purple-500 dark:text-purple-600">\>_</span> Product Comparison Matrix</h2>
  
  <p class="mb-8 text-center text-gray-600 dark:text-gray-400 text-sm sm:text-base">Analyze and compare key features across different fitness trackers and sports gear.</p>

  <div class="overflow-x-auto relative shadow-md sm:rounded-lg border border-purple-200 dark:border-purple-900">
    <table class="w-full text-left text-sm whitespace-nowrap table-auto">
      <thead class="text-xs uppercase bg-purple-50 dark:bg-gray-900 text-purple-700 dark:text-purple-400 border-b border-purple-200 dark:border-purple-900">
        <tr>
          <th scope="col" class="py-3 px-2 sm:px-4 lg:px-6 font-bold tracking-wider">Feature</th>
          <th scope="col" class="py-3 px-2 sm:px-4 lg:px-6 font-bold tracking-wider text-center border-l border-purple-200 dark:border-purple-900">
            <div class="flex flex-col items-center justify-center">
              <img class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-purple-500 dark:border-purple-400 mb-1 lg:mb-2" src="https://picsum.photos/id/66/100" alt="Product A">
              <span class="block text-xs sm:text-sm font-semibold text-purple-700 dark:text-purple-300">GearPro Elite 5000</span>
              <span class="block text-xs text-gray-500 dark:text-gray-400">$299.99</span>
            </div>
          </th>
          <th scope="col" class="py-3 px-2 sm:px-4 lg:px-6 font-bold tracking-wider text-center border-l border-purple-200 dark:border-purple-900">
            <div class="flex flex-col items-center justify-center">
              <img class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-purple-500 dark:border-purple-400 mb-1 lg:mb-2" src="https://picsum.photos/id/111/100" alt="Product B">
              <span class="block text-xs sm:text-sm font-semibold text-purple-700 dark:text-purple-300">AthleteTrack Pro X</span>
              <span class="block text-xs text-gray-500 dark:text-gray-400">$199.99</span>
            </div>
          </th>
          <th scope="col" class="py-3 px-2 sm:px-4 lg:px-6 font-bold tracking-wider text-center border-l border-purple-200 dark:border-purple-900">
            <div class="flex flex-col items-center justify-center">
              <img class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-purple-500 dark:border-purple-400 mb-1 lg:mb-2" src="https://picsum.photos/id/123/100" alt="Product C">
              <span class="block text-xs sm:text-sm font-semibold text-purple-700 dark:text-purple-300">Velocity Band 3</span>
              <span class="block text-xs text-gray-500 dark:text-gray-400">$129.99</span>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <!-- Row 1: GPS -->
        <tr class="bg-white dark:bg-gray-800 border-b border-purple-100 dark:border-purple-900 hover:bg-purple-50 dark:hover:bg-gray-850 transition-colors duration-200">
          <td scope="row" class="py-3 px-2 sm:px-4 lg:px-6 font-medium text-gray-900 dark:text-white">GPS Tracking</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">
            <span class="text-green-500 dark:text-green-400">✔ Full GPS</span>
          </td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">
            <span class="text-green-500 dark:text-green-400">✔ Connected GPS</span>
          </td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">
            <span class="text-red-500 dark:text-red-400">✖ No GPS</span>
          </td>
        </tr>
        <!-- Row 2: Heart Rate -->
        <tr class="bg-white dark:bg-gray-800 border-b border-purple-100 dark:border-purple-900 hover:bg-purple-50 dark:hover:bg-gray-850 transition-colors duration-200">
          <td scope="row" class="py-3 px-2 sm:px-4 lg:px-6 font-medium text-gray-900 dark:text-white">Heart Rate Monitor</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">
            <span class="text-green-500 dark:text-green-400">✔ Optical + ECG</span>
          </td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">
            <span class="text-green-500 dark:text-green-400">✔ Optical</span>
          </td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">
            <span class="text-green-500 dark:text-green-400">✔ Optical</span>
          </td>
        </tr>
        <!-- Row 3: Battery Life -->
        <tr class="bg-white dark:bg-gray-800 border-b border-purple-100 dark:border-purple-900 hover:bg-purple-50 dark:hover:bg-gray-850 transition-colors duration-200">
          <td scope="row" class="py-3 px-2 sm:px-4 lg:px-6 font-medium text-gray-900 dark:text-white">Battery Life (Typical)</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">7 Days</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">5 Days</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">10 Days</td>
        </tr>
        <!-- Row 4: Water Resistance -->
        <tr class="bg-white dark:bg-gray-800 border-b border-purple-100 dark:border-purple-900 hover:bg-purple-50 dark:hover:bg-gray-850 transition-colors duration-200">
          <td scope="row" class="py-3 px-2 sm:px-4 lg:px-6 font-medium text-gray-900 dark:text-white">Water Resistance</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">5 ATM</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">3 ATM</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">Swim-proof</td>
        </tr>
        <!-- Row 5: Display Type -->
        <tr class="bg-white dark:bg-gray-800 border-b border-purple-100 dark:border-purple-900 hover:bg-purple-50 dark:hover:bg-gray-850 transition-colors duration-200">
          <td scope="row" class="py-3 px-2 sm:px-4 lg:px-6 font-medium text-gray-900 dark:text-white">Display Type</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">AMOLED</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">LCD</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">OLED</td>
        </tr>
        <!-- Row 6: Sports Modes -->
        <tr class="bg-white dark:bg-gray-800 border-b-0 hover:bg-purple-50 dark:hover:bg-gray-850 transition-colors duration-200">
          <td scope="row" class="py-3 px-2 sm:px-4 lg:px-6 font-medium text-gray-900 dark:text-white">Sports Modes</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">25+ modes</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">15+ modes</td>
          <td class="py-3 px-2 sm:px-4 lg:px-6 text-center border-l border-purple-100 dark:border-purple-900">10+ modes</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <div class="mt-8 flex flex-col sm:flex-row justify-around items-center border-t border-purple-200 dark:border-purple-900 pt-6">
    <button class="flex-1 text-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-md transition-colors duration-200 mb-3 sm:mb-0 sm:mr-4 max-w-xs w-full">View GearPro Elite 5000</button>
    <button class="flex-1 text-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-md transition-colors duration-200 mb-3 sm:mb-0 sm:mr-4 max-w-xs w-full">View AthleteTrack Pro X</button>
    <button class="flex-1 text-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-md transition-colors duration-200 max-w-xs w-full">View Velocity Band 3</button>
  </div>
</div>

Memphis_Content_Display_Component

A complex, responsive content display component for entertainment/media platforms, featuring a Memphis Design style with a black and white color scheme and one bright accent color (fuchsia). Includes dark mode support and placeholder images.

Open Preview

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

  <!-- Component Title (Optional) -->
  <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-gray-50 mb-8 sm:mb-12 text-center">
    <span class="relative inline-block">
      <span class="relative z-10">Today's Hot Picks</span>
      <span class="absolute inset-x-0 bottom-0 h-3 sm:h-4 lg:h-5 bg-fuchsia-500 transform -skew-x-12"></span>
    </span>
  </h2>

  <!-- Main Grid Container -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8 lg:gap-10">

    <!-- Featured Card 1 (Larger, more prominent) -->
    <div class="md:col-span-2 lg:col-span-2 xl:col-span-2 relative overflow-hidden rounded-xl shadow-xl dark:shadow-2xl group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <div class="absolute top-4 left-4 p-2 bg-fuchsia-500 text-white text-xs font-bold rounded-br-lg transform -rotate-6 z-20">TRENDING</div>

      <img src="https://picsum.photos/800/450?random=1" alt="Featured Content Image" class="relative w-full h-64 sm:h-80 md:h-96 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">

      <div class="relative p-5 sm:p-6 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-xl sm:text-2xl font-bold mb-2 text-gray-900 dark:text-gray-50">The Midnight Chronicles</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">Unravel the secrets of a forgotten city in this gripping new sci-fi epic. Prepare for mind-bending twists!</p>

        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <span class="mr-2">4.8</span> (1.2K Reviews)
          <span class="mx-2">•</span>
          <span>Action, Sci-Fi</span>
        </div>

        <button class="relative flex items-center justify-center px-6 py-2 rounded-lg bg-fuchsia-500 text-white font-bold overflow-hidden group hover:bg-fuchsia-600 transition-all duration-300 ease-in-out transform hover:scale-105">
          <span class="absolute w-0 h-0 transition-all duration-300 ease-out bg-black rounded-full group-hover:w-32 group-hover:h-32 opacity-10"></span>
          <span class="relative z-10">Watch Now</span>
          <svg class="w-5 h-5 ml-2 -mr-1 relative z-10" 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>

    <!-- Content Cards (Smaller, repeatable) -->
    <!-- Card 1 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=2" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">Echoes of the Past</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">A chilling mystery unfolds in a secluded mountain town. Can they uncover the truth?</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.5
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=3" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">Cosmic Voyage</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">Journey through distant galaxies in this visually stunning animated series.</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.9
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=4" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">The Last Pixel</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">A classic console game comes to life, but something is wrong with the code...</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.6
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 4 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=5" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">Rhythm City Beats</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">Follow the rise of a street dance crew in this vibrant musical drama.</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.7
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 5 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=6" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">The Quantum Leap</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">A scientist invents a device that changes reality, with unexpected consequences.</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.4
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

    <!-- Card 6 -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-950 group transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
      <div class="absolute inset-0 bg-gray-900 transform -skew-y-6 scale-125 dark:bg-gray-800 opacity-70 group-hover:opacity-80 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/400/225?random=7" alt="Content Image" class="relative w-full h-48 object-cover object-center rounded-t-xl z-10 group-hover:opacity-80 transition-opacity duration-300">
      <div class="relative p-4 bg-white dark:bg-gray-950 z-10 rounded-b-xl">
        <h3 class="text-lg font-bold mb-1 text-gray-900 dark:text-gray-50">Arcade Aces</h3>
        <p class="text-xs text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">A group of friends discovers a magical arcade machine that transports them.</p>
        <div class="flex items-center justify-between text-sm">
          <span class="flex items-center text-gray-500 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-fuchsia-500" fill="currentColor" viewBox="0 0 20 20"><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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.924 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            4.2
          </span>
          <button class="px-3 py-1 text-xs bg-fuchsia-500 text-white rounded-md hover:bg-fuchsia-600 transition-colors duration-200">Details</button>
        </div>
      </div>
    </div>

  </div>

  <!-- Section for More Content/Navigation (e.g., categories or pagination) -->
  <div class="mt-12 text-center">
    <button class="relative flex items-center justify-center mx-auto px-8 py-3 text-lg rounded-full bg-black text-white font-bold overflow-hidden group hover:bg-gray-800 dark:bg-gray-800 dark:hover:bg-gray-700 transition-all duration-300 ease-in-out transform hover:scale-105">
      <span class="absolute w-0 h-0 transition-all duration-300 ease-out bg-fuchsia-500 rounded-full group-hover:w-full group-hover:h-full opacity-20"></span>
      <span class="relative z-10">Discover More Titles</span>
      <svg class="w-5 h-5 ml-2 relative z-10" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
  </div>

</div>

Art Deco Grayscale User Profiles Component

A responsive user profiles component with an Art Deco geometric grayscale design, suitable for job boards or career platforms, including dark mode support.

Open Preview

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

    <!-- User Profile Card 1 -->
    <div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
      <!-- Art Deco Border Element -->
      <div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
      <div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
      <div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>

      <div class="relative p-6 pt-12 text-center z-20">
        <div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile of Jane Doe" class="w-full h-full object-cover">
        </div>
        <h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">Jane Doe</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Senior Software Engineer</p>

        <div class="mb-6 text-left">
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            San Francisco, CA
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
            Full-time
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
            5+ Years Experience
          </div>
        </div>

        <div class="flex flex-wrap justify-center mb-6">
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">React</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Node.js</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">AWS</span>
        </div>

        <a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
      </div>
    </div>

    <!-- User Profile Card 2 -->
    <div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
      <div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
      <div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
      <div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>

      <div class="relative p-6 pt-12 text-center z-20">
        <div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
          <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile of John Smith" class="w-full h-full object-cover">
        </div>
        <h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">John Smith</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Product Manager</p>

        <div class="mb-6 text-left">
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            New York, NY
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
            Full-time
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
            8+ Years Experience
          </div>
        </div>

        <div class="flex flex-wrap justify-center mb-6">
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Agile</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Roadmapping</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">Market Analysis</span>
        </div>

        <a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
      </div>
    </div>

    <!-- User Profile Card 3 -->
    <div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
      <div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
      <div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
      <div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>

      <div class="relative p-6 pt-12 text-center z-20">
        <div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
          <img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile of Sarah Lee" class="w-full h-full object-cover">
        </div>
        <h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">Sarah Lee</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">UX Designer</p>

        <div class="mb-6 text-left">
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            Austin, TX
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
            Contract
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
            6+ Years Experience
          </div>
        </div>

        <div class="flex flex-wrap justify-center mb-6">
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Figma</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">User Research</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">Prototyping</span>
        </div>

        <a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
      </div>
    </div>

    <!-- User Profile Card 4 -->
    <div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
      <div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
      <div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
      <div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>

      <div class="relative p-6 pt-12 text-center z-20">
        <div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
          <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Profile of David Chen" class="w-full h-full object-cover">
        </div>
        <h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">David Chen</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Data Scientist</p>

        <div class="mb-6 text-left">
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            Seattle, WA
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
            Full-time
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
            4+ Years Experience
          </div>
        </div>

        <div class="flex flex-wrap justify-center mb-6">
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Python</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Machine Learning</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">SQL</span>
        </div>

        <a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
      </div>
    </div>

  </div>
</div>

Product Cards Component

Simple, responsive product cards with a watercolor/artistic design, complementary color scheme, and full dark mode support, suitable for a portfolio.

Open Preview

                <div class="bg-gradient-to-br from-purple-50 via-pink-50 to-orange-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-6 sm:p-8 lg:p-12 min-h-screen font-sans">
  <div class="container mx-auto px-4">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-12 text-gray-800 dark:text-gray-100 drop-shadow-lg leading-tight">
      Our Artistic Creations
    </h2>

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

      <!-- Product Card 1 -->
      <div class="group relative rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out
                  transform hover:-translate-y-2
                  bg-white dark:bg-gray-800
                  border border-pink-200 dark:border-pink-800
                  bg-blend-multiply bg-cover bg-center"
           style="background-image: url('https://picsum.photos/id/107/600/400?blur=1');">
        <div class="absolute inset-0 bg-gradient-to-t from-pink-300/80 via-transparent to-transparent dark:from-pink-900/80 group-hover:from-pink-400/90 group-hover:dark:from-pink-800/90 transition-all duration-300"></div>
        <img src="https://picsum.photos/id/107/600/400" alt="Abstract Painting" class="w-full h-64 object-cover object-center group-hover:scale-105 transition-transform duration-300 mix-blend-multiply opacity-80 group-hover:opacity-100" />

        <div class="relative p-6 pt-52 text-white dark:text-gray-100 flex flex-col justify-end min-h-[250px]">
          <h3 class="text-2xl font-bold mb-2 drop-shadow-md">Sunset Reflection</h3>
          <p class="text-sm mb-4 opacity-90 drop-shadow-sm">A vibrant watercolor capturing the essence of a serene sunset over water.</p>
          <div class="flex items-center justify-between text-lg font-semibold">
            <span>$120.00</span>
            <button class="px-4 py-2 bg-gradient-to-r from-pink-500 to-red-500 hover:from-pink-600 hover:to-red-600 dark:from-pink-700 dark:to-red-700 dark:hover:from-pink-800 dark:hover:to-red-800 text-white rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="group relative rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out
                  transform hover:-translate-y-2
                  bg-white dark:bg-gray-800
                  border border-orange-200 dark:border-orange-800
                  bg-blend-multiply bg-cover bg-center"
             style="background-image: url('https://picsum.photos/id/105/600/400?blur=1');">
          <div class="absolute inset-0 bg-gradient-to-t from-orange-300/80 via-transparent to-transparent dark:from-orange-900/80 group-hover:from-orange-400/90 group-hover:dark:from-orange-800/90 transition-all duration-300"></div>
          <img src="https://picsum.photos/id/105/600/400" alt="Figurative Sculpture" class="w-full h-64 object-cover object-center group-hover:scale-105 transition-transform duration-300 mix-blend-multiply opacity-80 group-hover:opacity-100" />

          <div class="relative p-6 pt-52 text-white dark:text-gray-100 flex flex-col justify-end min-h-[250px]">
              <h3 class="text-2xl font-bold mb-2 drop-shadow-md">Forest Whisper</h3>
              <p class="text-sm mb-4 opacity-90 drop-shadow-sm">An impressionistic oil painting capturing the mysterious allure of a deep forest.</p>
              <div class="flex items-center justify-between text-lg font-semibold">
                  <span>$180.00</span>
                  <button class="px-4 py-2 bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 dark:from-orange-700 dark:to-yellow-700 dark:hover:from-orange-800 dark:hover:to-yellow-800 text-white rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg">
                      View Details
                  </button>
              </div>
          </div>
      </div>

      <!-- Product Card 3 -->
      <div class="group relative rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out
                  transform hover:-translate-y-2
                  bg-white dark:bg-gray-800
                  border border-purple-200 dark:border-purple-800
                  bg-blend-multiply bg-cover bg-center"
             style="background-image: url('https://picsum.photos/id/106/600/400?blur=1');">
          <div class="absolute inset-0 bg-gradient-to-t from-purple-300/80 via-transparent to-transparent dark:from-purple-900/80 group-hover:from-purple-400/90 group-hover:dark:from-purple-800/90 transition-all duration-300"></div>
          <img src="https://picsum.photos/id/106/600/400" alt="Abstract Design" class="w-full h-64 object-cover object-center group-hover:scale-105 transition-transform duration-300 mix-blend-multiply opacity-80 group-hover:opacity-100" />

          <div class="relative p-6 pt-52 text-white dark:text-gray-100 flex flex-col justify-end min-h-[250px]">
              <h3 class="text-2xl font-bold mb-2 drop-shadow-md">Urban Energy</h3>
              <p class="text-sm mb-4 opacity-90 drop-shadow-sm">A dynamic acrylic work reflecting the vibrant chaos and beauty of city life.</p>
              <div class="flex items-center justify-between text-lg font-semibold">
                  <span>$95.00</span>
                  <button class="px-4 py-2 bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-600 hover:to-indigo-600 dark:from-purple-700 dark:to-indigo-700 dark:hover:from-purple-800 dark:hover:to-indigo-800 text-white rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg">
                      View Details
                  </button>
              </div>
          </div>
      </div>

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

Neumorphic_Pastel_Rating_System_Component

A simple, responsive neumorphic rating system component with a pastel color scheme, suitable for travel and tourism websites, including dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
  <div class="w-full max-w-sm p-6 rounded-3xl bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-300 ease-in-out">
    <h2 class="text-center text-xl md:text-2xl font-semibold text-gray-700 dark:text-gray-200 mb-6">
      Rate Your Experience
    </h2>
    <div class="flex justify-center space-x-3 md:space-x-4 mb-6">
      <!-- Star 1 -->
      <button class="w-12 h-12 md:w-16 md:h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center group focus:outline-none transition-all duration-300 ease-in-out
                     shadow-neumorphic-light-btn hover:shadow-neumorphic-light-btn-hover dark:shadow-neumorphic-dark-btn dark:hover:shadow-neumorphic-dark-btn-hover">
        <svg class="w-7 h-7 md:w-9 md:h-9 text-purple-300 dark:text-purple-600 group-hover:text-amber-400 transform transition-transform duration-200 ease-in-out group-hover:scale-110" 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.81L14.28 9.539a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.906-2.108a1 1 0 00-1.154 0L6.26 15.067c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
      </button>
      <!-- Star 2 -->
      <button class="w-12 h-12 md:w-16 md:h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center group focus:outline-none transition-all duration-300 ease-in-out
                     shadow-neumorphic-light-btn hover:shadow-neumorphic-light-btn-hover dark:shadow-neumorphic-dark-btn dark:hover:shadow-neumorphic-dark-btn-hover">
        <svg class="w-7 h-7 md:w-9 md:h-9 text-blue-300 dark:text-blue-600 group-hover:text-amber-400 transform transition-transform duration-200 ease-in-out group-hover:scale-110" 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.81L14.28 9.539a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.906-2.108a1 1 0 00-1.154 0L6.26 15.067c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1

Skip to Content Link Component

A simple, accessible skip-to-content link component designed for travel/tourism websites, featuring a sepia/brown color scheme and dark mode support to reduce eye strain.

Open Preview

                <div class="bg-stone-50 dark:bg-stone-900 min-h-screen flex items-start justify-center p-4 sm:p-6 lg:p-8 relative font-sans">

  <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:rounded-md focus:bg-amber-700/90 focus:text-stone-50 focus:ring-2 focus:ring-amber-500 focus:outline-none transition-all duration-300 ease-in-out dark:focus:bg-amber-800/90 dark:focus:text-stone-100">
    Skip to main content
  </a>

  <div class="w-full max-w-4xl bg-white dark:bg-stone-800 rounded-lg shadow-xl p-6 sm:p-8 lg:p-10 text-stone-800 dark:text-stone-200 ring-1 ring-stone-200 dark:ring-stone-700">
    <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-amber-800 dark:text-amber-500 mb-6 sm:mb-8 text-center">
      Your Travel Destination
    </h1>
    <p class="text-lg leading-relaxed mb-8 text-center text-stone-600 dark:text-stone-300">
      Explore breathtaking landscapes and vibrant cultures. Start your adventure now!
    </p>

    <img src="https://picsum.photos/seed/travel/800/450" alt="Scenic travel destination" class="w-full h-auto rounded-lg shadow-md mb-8 object-cover">

    <section id="main-content" tabindex="-1" class="outline-none focus:ring-2 focus:ring-amber-500 focus:rounded-md focus:p-2 -m-2">
      <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-amber-700 dark:text-amber-400">Discover Serenity</h2>
      <p class="mb-6 text-stone-700 dark:text-stone-300">
        Nestled amidst ancient hills and whispering rivers, this destination offers an unparalleled escape from the mundane. Immerse yourself in the rich tapestry of local traditions, savor exquisite cuisine, and embark on thrilling excursions.
      </p>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div class="bg-stone-100 dark:bg-stone-700 p-4 rounded-md shadow-sm">
          <h3 class="font-semibold text-lg mb-2 text-amber-800 dark:text-amber-400">Activities</h3>
          <ul class="list-disc list-inside text-stone-700 dark:text-stone-300">
            <li>Guided hiking tours</li>
            <li>Cultural workshops</li>
            <li>River cruises</li>
            <li>Local market visits</li>
          </ul>
        </div>
        <div class="bg-stone-100 dark:bg-stone-700 p-4 rounded-md shadow-sm">
          <h3 class="font-semibold text-lg mb-2 text-amber-800 dark:text-amber-400">Accommodation</h3>
          <p class="text-stone-700 dark:text-stone-300">
            From cozy eco-lodges to luxurious resorts, find your perfect stay. All options blend seamlessly with the natural beauty.
          </p>
        </div>
      </div>
      <p class="text-base text-stone-600 dark:text-stone-400">
        Plan your dream vacation today and create memories that will last a lifetime.
      </p>
    </section>
  </div>
</div>

Cyberpunk Autumn Comments Section

A simple cyberpunk-themed comments section for a dashboard, featuring dark backgrounds, neon-like accents, and rich autumn colors. Fully responsive with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-950 dark:bg-black text-gray-200 dark:text-gray-100 font-mono antialiased mx-auto lg:max-w-4xl rounded-lg shadow-xl border border-orange-800 dark:border-purple-900 overflow-hidden">

  <!-- Section Header -->
  <div class="mb-6 pb-4 border-b-2 border-orange-700 dark:border-purple-700">
    <h2 class="text-2xl sm:text-3xl font-bold text-orange-400 dark:text-purple-400 uppercase tracking-widest leading-tight">
      // Event Logs_ <span class="text-xs text-amber-500 dark:text-fuchsia-500 ml-2">_online</span>
    </h2>
    <p class="text-sm text-gray-500 dark:text-gray-600 mt-1">_System activity and user interactions</p>
  </div>

  <!-- Comment Input Section -->
  <div class="mb-8 p-4 bg-gray-900 dark:bg-gray-950 rounded-md border border-orange-900 dark:border-purple-900">
    <div class="relative mb-4">
      <textarea
        class="w-full p-3 pr-10 bg-gray-800 dark:bg-gray-900 rounded-md border border-orange-700 dark:border-purple-700 focus:ring-1 focus:ring-orange-500 dark:focus:ring-purple-500 outline-none text-sm text-gray-100 placeholder-gray-500 resize-none h-24 caret-orange-400 dark:caret-purple-400"
        placeholder="// Enter new log entry_ "
      ></textarea>
      <svg class="absolute bottom-3 right-3 w-5 h-5 text-gray-600 dark:text-gray-700" 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 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414l-4.243 4.243m4.243-4.243a1 1 0 011.414 0l2.829 2.829a1 1 0 010 1.414l-4.243 4.243m-4.243-4.243L9.586 16.414m0 0a2 2 0 01-2.828 0l-1.414-1.414a2 2 0 010-2.828l1.414-1.414"></path></svg>
    </div>
    <button
      class="w-full sm:w-auto px-6 py-2 bg-orange-600 dark:bg-purple-600 text-white dark:text-gray-100 uppercase text-sm font-semibold rounded-md hover:bg-orange-700 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-purple-500 transition-colors duration-200 shadow-md transform hover:scale-105 active:scale-95"
    >
      // TRANSMIT_
    </button>
  </div>

  <!-- Comments List -->
  <div class="space-y-6">

    <!-- Comment 1 -->
    <div class="p-4 bg-gray-900 dark:bg-gray-950 rounded-md border border-orange-900 dark:border-purple-900 relative group">
      <div class="absolute top-0 left-0 w-2 h-full bg-orange-500 dark:bg-purple-500 group-hover:scale-y-105 origin-top transition-transform duration-300"></div>
      <div class="flex items-start mb-3">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-orange-600 dark:border-purple-600 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <p class="text-orange-400 dark:text-purple-400 font-bold text-sm leading-tight">
            _Agent_Smith_ <span class="text-gray-500 dark:text-gray-600 italic text-xs ml-2">//_Active</span>
          </p>
          <p class="text-gray-500 dark:text-gray-600 text-xs mt-0.5">_Oct 27, 2077 _09:34 AM</p>
        </div>
      </div>
      <p class="text-sm text-gray-200 dark:text-gray-100 leading-relaxed">
        // Initializing protocol 'Phoenix'. Data streams nominal. Awaiting further instruction. <span class="text-green-500 dark:text-green-400 text-xs ml-1">_status: ONLINE</span>
      </p>
    </div>

    <!-- Comment 2 -->
    <div class="p-4 bg-gray-900 dark:bg-gray-950 rounded-md border border-orange-900 dark:border-purple-900 relative group">
      <div class="absolute top-0 left-0 w-2 h-full bg-orange-500 dark:bg-purple-500 group-hover:scale-y-105 origin-top transition-transform duration-300"></div>
      <div class="flex items-start mb-3">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-orange-600 dark:border-purple-600 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <p class="text-orange-400 dark:text-purple-400 font-bold text-sm leading-tight">
            _NetRunner_Ava_ <span class="text-gray-500 dark:text-gray-600 italic text-xs ml-2">//_Connected</span>
          </p>
          <p class="text-gray-500 dark:text-gray-600 text-xs mt-0.5">_Oct 27, 2077 _10:12 AM</p>
        </div>
      </div>
      <p class="text-sm text-gray-200 dark:text-gray-100 leading-relaxed">
        // Trace complete on 'Project Echo'. Found encrypted sub-routines. Requires enhanced decryption key. <span class="text-yellow-500 dark:text-yellow-400 text-xs ml-1">_status: PENDING</span>
      </p>
    </div>

    <!-- Comment 3 -->
    <div class="p-4 bg-gray-900 dark:bg-gray-950 rounded-md border border-orange-900 dark:border-purple-900 relative group">
      <div class="absolute top-0 left-0 w-2 h-full bg-orange-500 dark:bg-purple-500 group-hover:scale-y-105 origin-top transition-transform duration-300"></div>
      <div class="flex items-start mb-3">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-orange-600 dark:border-purple-600 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
        <div>
          <p class="text-orange-400 dark:text-purple-400 font-bold text-sm leading-tight">
            _Ghost_ <span class="text-gray-500 dark:text-gray-600 italic text-xs ml-2">//_Offline</span>
          </p>
          <p class="text-gray-500 dark:text-gray-600 text-xs mt-0.5">_Oct 27, 2077 _11:55 AM</p>
        </div>
      </div>
      <p class="text-sm text-gray-200 dark:text-gray-100 leading-relaxed">
        // Firewall breach detected on sector Gamma-7. Countermeasures deployed. Casualties minimal. <span class="text-red-500 dark:text-red-400 text-xs ml-1">_status: CRITICAL</span>
      </p>
    </div>

  </div>

  <!-- Footer Placeholder -->
  <div class="mt-8 pt-4 border-t-2 border-orange-700 dark:border-purple-700 text-xs text-gray-600 dark:text-gray-700 text-center">
    // End of Log File_ 
  </div>

</div>

Memphis Gaming Loader

A playful and bold gaming loader inspired by Memphis design, featuring complementary colors and geometric shapes for an '80s vibe. Fully responsive and supports dark mode.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-indigo-200 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="relative w-64 h-64 sm:w-80 sm:h-80 md:w-96 md:h-96 transform -rotate-6">

    <!-- Main Circle (Teal) -->
    <div class="absolute inset-0 rounded-full bg-teal-500 dark:bg-emerald-600 shadow-xl overflow-hidden animate-pulse-slow p-4">
      <!-- Inner Circle Slice (Orange) -->
      <div class="absolute top-0 left-1/2 -translate-x-1/2 w-4/5 h-4/5 rounded-full bg-orange-400 dark:bg-amber-500 transform rotate-45 origin-bottom animate-spin-slow shadow-lg"></div>
    </div>

    <!-- Animated Squiggles/Patterns -->
    <div class="absolute top-8 left-8 w-20 h-20 bg-pink-400 dark:bg-fuchsia-600 rounded-full animate-bounce-slow shadow-md"></div>
    <div class="absolute bottom-12 right-10 w-16 h-16 bg-lime-400 dark:bg-lime-600 rounded-lg transform rotate-12 animate-wiggle-slow shadow-md"></div>
    <div class="absolute top-1/4 right-8 w-12 h-12 bg-yellow-300 dark:bg-yellow-500 rounded-full animate-spin-faster shadow-md"></div>
    <div class="absolute bottom-1/3 left-6 w-10 h-10 bg-blue-400 dark:bg-cyan-600 rounded-md transform -rotate-45 animate-fade-in-out shadow-md"></div>

    <!-- Central 'Loading' Text/Icon -->
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="relative w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 rounded-full bg-purple-600 dark:bg-indigo-700 shadow-2xl flex items-center justify-center p-4 transform rotate-6 animate-scale-bounce">
        <div class="relative w-24 h-24 sm:w-32 sm:h-32 md:w-40 md:h-40 rounded-full bg-purple-700 dark:bg-indigo-800 flex items-center justify-center border-4 border-dashed border-yellow-300 dark:border-yellow-500 animate-spin-slow-reverse">
            <svg class="w-16 h-16 sm:w-20 sm:h-20 text-white dark:text-gray-100 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197 3.197m0 0a-2.5 2.5 0 01-3.536 0L5.343 12.000m8.892-8.892a-2.5 2.5 0 010 3.536l-3.197 3.197m0 0a-2.5 2.5 0 01-3.536 0L5.343 12.000m8.892-8.892a-2.5 2.5 0 010 3.536L14.752 11.168m0 0a-2.5 2.5 0 010 3.536L14.752 14.752m-3.536 3.536a-2.5 2.5 0 010 3.536L14.752 14.752m-3.536-3.536a-2.5 2.5 0 01-.707 3.536L12 17.5M9.5 12.000a-2.5 2.5 0 01-.707 3.536L12 17.5" />
            </svg>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
  @keyframes pulse-slow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
  }
  @keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  @keyframes spin-slow-reverse {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
  }
  @keyframes spin-faster {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-10px); }
    75% { transform: translateY(10px); }
  }
  @keyframes wiggle-slow {
    0%, 100% { transform: rotate(12deg); }
    50% { transform: rotate(-12deg); }
  }
  @keyframes fade-in-out {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
  }
  @keyframes scale-bounce {
    0%, 100% { transform: scale(1) rotate(6deg); }
    50% { transform: scale(1.05) rotate(6deg); }
  }

  .animate-pulse-slow { animation: pulse-slow 3s infinite ease-in-out; }
  .animate-spin-slow { animation: spin-slow 10s linear infinite; }
  .animate-spin-slow-reverse { animation: spin-slow-reverse 8s linear infinite; }
  .animate-spin-faster { animation: spin-faster 4s linear infinite; }
  .animate-bounce-slow { animation: bounce-slow 4s infinite ease-in-out; }
  .animate-wiggle-slow { animation: wiggle-slow 6s infinite ease-in-out; }
  .animate-fade-in-out { animation: fade-in-out 5s infinite ease-in-out; }
  .animate-scale-bounce { animation: scale-bounce 2.5s infinite ease-in-out; }
</style>

1 ... 19 20 21 22 23 ... 335

Search Components

Categories

All Components