Search Components

All Components

Browse all available Tailwind CSS components

Wishlist Component

A complex, responsive wishlist component with a retro/vintage design, earth tone color scheme, and dark mode support, suitable for a blog or content site.

Open Preview

                <div class="font-sans antialiased bg-stone-100 text-stone-800 dark:bg-stone-900 dark:text-stone-200 transition-colors duration-300 p-4 sm:p-6 md:p-8">
  <div class="max-w-6xl mx-auto bg-amber-50 rounded-lg shadow-xl overflow-hidden dark:bg-stone-800 border border-stone-300 dark:border-stone-700 relative">
    <!-- Retro TV Bezel Effect -->
    <div class="absolute inset-0 border-[1.5rem] border-solid border-stone-400 dark:border-stone-950 rounded-lg pointer-events-none z-10 flex items-center justify-center">
      <div class="absolute inset-0 border-stone-600 dark:border-stone-700 border-[0.5rem] rounded-lg"></div>
      <span class="absolute top-2 left-2 text-sm text-stone-700 dark:text-stone-300 font-mono">VOL</span>
      <span class="absolute top-2 right-2 text-sm text-stone-700 dark:text-stone-300 font-mono">CH</span>
      <div class="absolute bottom-4 right-4 w-6 h-6 bg-stone-600 rounded-full shadow-md dark:bg-stone-700"></div>
      <div class="absolute bottom-4 left-4 w-6 h-6 bg-stone-600 rounded-full shadow-md dark:bg-stone-700"></div>
      <div class="absolute top-6 right-6 w-3 h-3 bg-red-600 rounded-full animate-pulse"></div>
    </div>

    <div class="relative z-20 p-4 sm:p-6 lg:p-8">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-center text-orange-800 dark:text-orange-400 mb-6 font-serif">Your Wishlist</h2>
      <p class="text-center text-sm mb-8 text-stone-700 dark:text-stone-300 font-mono">Saved items for later enjoyment.</p>

      <!-- Sort and Filter Controls -->
      <div class="flex flex-col sm:flex-row justify-between items-center mb-8 bg-stone-200/50 dark:bg-stone-700/50 rounded-md p-3 sm:p-4 border border-stone-300 dark:border-stone-600">
        <div class="w-full sm:w-auto mb-4 sm:mb-0">
          <label for="sort-by" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1"><span class="font-bold">Sort By:</span></label>
          <select id="sort-by" class="mt-1 block w-full rounded-md border-stone-300 dark:border-stone-600 shadow-sm focus:border-orange-500 focus:ring-orange-500 bg-white dark:bg-stone-900 text-stone-800 dark:text-stone-200 py-2 pl-3 pr-10 text-base sm:text-sm">
            <option>Date Added (Newest)</option>
            <option>Date Added (Oldest)</option>
            <option>Price (Low to High)</option>
            <option>Price (High to Low)</option>
            <option>Alphabetical (A-Z)</option>
          </select>
        </div>
        <div class="w-full sm:w-auto">
          <label for="filter-category" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1"><span class="font-bold">Filter By Category:</span></label>
          <select id="filter-category" class="mt-1 block w-full rounded-md border-stone-300 dark:border-stone-600 shadow-sm focus:border-orange-500 focus:ring-orange-500 bg-white dark:bg-stone-900 text-stone-800 dark:text-stone-200 py-2 pl-3 pr-10 text-base sm:text-sm">
            <option>All</option>
            <option>Books</option>
            <option>Gadgets</option>
            <option>Home Decor</option>
            <option>Fashion</option>
          </select>
        </div>
      </div>

      <!-- Wishlist Items Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">

        <!-- Wishlist Item 1 -->
        <div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1018/400/300" alt="Old Camera">
          <div class="p-4 flex flex-col flex-grow">
            <h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">Vintage Film Camera</h3>
            <p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">A rare beauty from the 70s, perfect for collectors.</p>
            <div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
              <span class="font-bold text-base mr-2 text-green-700 dark:text-green-400">$299.99</span>
              <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">In Stock</span>
            </div>
            <div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
              <button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                Remove
              </button>
              <button class="px-4 py-2 bg-orange-600 text-white text-sm font-semibold rounded-md shadow-md hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
                Add to Cart
              </button>
            </div>
          </div>
        </div>

        <!-- Wishlist Item 2 -->
        <div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/id/104/400/300" alt="Old Typewriter">
          <div class="p-4 flex flex-col flex-grow">
            <h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">Antique Typewriter</h3>
            <p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">Functional and beautiful, a piece of literary history.</p>
            <div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
              <span class="font-bold text-base mr-2 text-green-700 dark:text-green-400">$189.00</span>
              <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">In Stock</span>
            </div>
            <div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
              <button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                Remove
              </button>
              <button class="px-4 py-2 bg-orange-600 text-white text-sm font-semibold rounded-md shadow-md hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
                Add to Cart
              </button>
            </div>
          </div>
        </div>

        <!-- Wishlist Item 3 (Out of Stock) -->
        <div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col opacity-70">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/id/338/400/300" alt="Record Player">
          <div class="p-4 flex flex-col flex-grow">
            <h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">Classic Vinyl Player</h3>
            <p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">Spin your favorite tunes on this retro-style player.</p>
            <div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
              <span class="font-bold text-base mr-2 text-gray-700 dark:text-gray-400">$120.50</span>
              <span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">Out of Stock</span>
            </div>
            <div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
              <button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 cursor-not-allowed">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                Remove
              </button>
              <button disabled class="px-4 py-2 bg-gray-400 text-white text-sm font-semibold rounded-md shadow-md cursor-not-allowed dark:bg-gray-600">
                Out of Stock
              </button>
            </div>
          </div>
        </div>

        <!-- Wishlist Item 4 -->
        <div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/id/37/400/300" alt="Old Book">
          <div class="p-4 flex flex-col flex-grow">
            <h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">First Edition Novel</h3>
            <p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">A must-read classic in pristine condition.</p>
            <div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
              <span class="font-bold text-base mr-2 text-green-700 dark:text-green-400">$45.00</span>
              <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">In Stock</span>
            </div>
            <div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
              <button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                Remove
              </button>
              <button class="px-4 py-2 bg-orange-600 text-white text-sm font-semibold rounded-md shadow-md hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
                Add to Cart
              </button>
            </div>
          </div>
        </div>

      </div>

      <!-- Call to Action / Explore More -->
      <div class="text-center mt-10">
        <p class="text-stone-700 dark:text-stone-300 mb-4 font-mono">Looking for more vintage finds?</p>
        <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Explore Catalog
          <svg class="ml-3 -mr-1 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </button>
      </div>

      <!-- User Profile Thumbnail -->
      <div class="absolute top-6 left-6 flex items-center bg-brown-600 dark:bg-brown-800 text-amber-50 rounded-full px-4 py-2 shadow-lg hidden md:flex font-mono">
        <img class="w-8 h-8 rounded-full mr-2 border-2 border-amber-300 dark:border-amber-600" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
        <span class="text-sm">User's List</span>
      </div>

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

3D_Grayscale_Infographics_Component

A responsive, 3D-inspired grayscale infographics component for blog/content consumption, featuring depth and engagement. Includes dark mode support.

Open Preview

                <section class="py-12 sm:py-16 lg:py-20 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-center text-4xl sm:text-5xl lg:text-6xl font-extrabold text-gray-800 dark:text-gray-100 mb-12 sm:mb-16 tracking-tight leading-tight">
      <span class="relative inline-block">
        Key Insights
        <span class="block absolute -inset-1 -skew-y-3 bg-gray-300 dark:bg-gray-700"></span>
        <span class="relative text-gray-900 dark:text-gray-50">Unveiled</span>
      </span>
    </h2>

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

      <!-- Infographic Card 1 -->
      <div class="relative group perspective-1000">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform-style-3d group-hover:rotate-y-6 group-hover:scale-105 transition-all duration-500 ease-in-out border border-gray-200 dark:border-gray-700 p-6 flex flex-col items-center text-center relative z-10">
          <div class="absolute inset-0 bg-gradient-to-br from-gray-50 to-white dark:from-gray-950 dark:to-gray-850 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-xl"></div>
          <div class="relative z-20 flex flex-col items-center p-4">
            <div class="flex items-center justify-center w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-gray-200 dark:bg-gray-700 mb-6 shadow-inner-xl transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              <svg class="w-10 h-10 sm:w-12 sm:h-12 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1.25-3M15 17l.5 3L16 17m-6-10V4a1 1 0 011-1h2a1 1 0 011 1v3M9 16h6M8 8h8M5 12h14a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2z"></path></svg>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-4 transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              85% Growth
            </h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg leading-relaxed transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              Our innovative strategies led to a significant 85% increase in market share over the last quarter.
            </p>
          </div>
        </div>
        <div class="absolute -bottom-4 right-4 w-4/5 h-4 bg-gray-300 dark:bg-gray-700 rounded-full blur-sm opacity-50 group-hover:opacity-75 transition-opacity duration-500 transform -translate-x-1/2 -rotate-3"></div>
      </div>

      <!-- Infographic Card 2 -->
      <div class="relative group perspective-1000">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform-style-3d group-hover:-rotate-y-6 group-hover:scale-105 transition-all duration-500 ease-in-out border border-gray-200 dark:border-gray-700 p-6 flex flex-col items-center text-center relative z-10">
          <div class="absolute inset-0 bg-gradient-to-br from-gray-50 to-white dark:from-gray-950 dark:to-gray-850 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-xl"></div>
          <div class="relative z-20 flex flex-col items-center p-4">
            <div class="flex items-center justify-center w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-gray-200 dark:bg-gray-700 mb-6 shadow-inner-xl transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              <svg class="w-10 h-10 sm:w-12 sm:h-12 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3m0 0l3 3m-3-3v8a7 7 0 0014 0v-.5M10 12l-3 3m0 0l-3-3m3 3V4a7 7 0 00-14 0v.5"></path></svg>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-4 transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              20% Efficiency
            </h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg leading-relaxed transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              Optimized workflows resulted in a 20% increase in operational efficiency across all departments.
            </p>
          </div>
        </div>
        <div class="absolute -bottom-4 left-4 w-4/5 h-4 bg-gray-300 dark:bg-gray-700 rounded-full blur-sm opacity-50 group-hover:opacity-75 transition-opacity duration-500 transform translate-x-1/2 rotate-3"></div>
      </div>

      <!-- Infographic Card 3 -->
      <div class="relative group perspective-1000">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform-style-3d group-hover:rotate-y-6 group-hover:scale-105 transition-all duration-500 ease-in-out border border-gray-200 dark:border-gray-700 p-6 flex flex-col items-center text-center relative z-10">
          <div class="absolute inset-0 bg-gradient-to-br from-gray-50 to-white dark:from-gray-950 dark:to-gray-850 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-xl"></div>
          <div class="relative z-20 flex flex-col items-center p-4">
            <div class="flex items-center justify-center w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-gray-200 dark:bg-gray-700 mb-6 shadow-inner-xl transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              <svg class="w-10 h-10 sm:w-12 sm:h-12 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0a2 2 0 01-2 2H6a2 2 0 01-2-2m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2M4 13L4 6a2 2 0 012-2h12a2 2 0 012 2v7"></path></svg>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-4 transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              95% Satisfaction
            </h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg leading-relaxed transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              Customer feedback surveys show a consistent 95% satisfaction rate for our products and services.
            </p>
          </div>
        </div>
        <div class="absolute -bottom-4 right-4 w-4/5 h-4 bg-gray-300 dark:bg-gray-700 rounded-full blur-sm opacity-50 group-hover:opacity-75 transition-opacity duration-500 transform -translate-x-1/2 -rotate-3"></div>
      </div>

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

<style>
/* Define 3D Transform Utility Classes */
.perspective-1000 {
  perspective: 1000px;
}
.transform-style-3d {
  transform-style: preserve-3d;
}
.rotate-y-6 {
  transform: rotateY(6deg);
}
.-rotate-y-6 {
  transform: rotateY(-6deg);
}

/* Soft 3D shadow on hover for cards */
.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.dark .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Inner shadow for circles */
.shadow-inner-xl {
  box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.15), inset 0px 0px 5px rgba(255, 255, 255, 0.5);
}
.dark .shadow-inner-xl {
  box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.6), inset 0px 0px 5px rgba(0, 0, 0, 0.3);
}
</style>

Toast Notifications Component

A complex, glassmorphism-style toast notification component for dashboards, featuring translucent elements, blur effects, and an analogous color scheme. Fully responsive with dark mode support.

Open Preview

                <div class="fixed inset-0 z-50 flex flex-col items-end justify-start p-4 space-y-4 pointer-events-none sm:p-6 md:p-8">
  <!-- Success Toast -->
  <div class="max-w-sm w-full bg-slate-100/30 dark:bg-slate-800/30 backdrop-blur-lg rounded-xl shadow-xl flex p-4 ring-1 ring-slate-200/50 dark:ring-slate-700/50 transition-all duration-300 ease-out transform translate-y-0 opacity-100 pointer-events-auto">
    <div class="flex-shrink-0">
      <svg class="h-6 w-6 text-emerald-500 dark:text-emerald-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </div>
    <div class="ml-3 w-0 flex-1 pt-0.5">
      <p class="text-sm font-semibold text-slate-800 dark:text-slate-200">Success!</p>
      <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Your changes have been saved successfully.</p>
      <div class="mt-4 flex space-x-7">
        <button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400 hover:text-emerald-500 dark:hover:text-emerald-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
          View Changes
        </button>
        <button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
          Dismiss
        </button>
      </div>
    </div>
    <div class="ml-4 flex flex-shrink-0">
      <button type="button" class="inline-flex rounded-md p-1.5 text-slate-500 dark:text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Warning Toast -->
  <div class="max-w-sm w-full bg-slate-100/30 dark:bg-slate-800/30 backdrop-blur-lg rounded-xl shadow-xl flex p-4 ring-1 ring-slate-200/50 dark:ring-slate-700/50 transition-all duration-300 ease-out transform translate-y-0 opacity-100 pointer-events-auto">
    <div class="flex-shrink-0">
      <svg class="h-6 w-6 text-amber-500 dark:text-amber-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.021 3.373 1.865 3.373h14.47c1.844 0 2.733-1.873 1.865-3.373L13.723 3.535c-.863-1.5-2.913-1.5-3.776 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
      </svg>
    </div>
    <div class="ml-3 w-0 flex-1 pt-0.5">
      <p class="text-sm font-semibold text-slate-800 dark:text-slate-200">Heads up!</p>
      <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Your session is about to expire. Please re-authenticate.</p>
      <div class="mt-4 flex space-x-7">
        <button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-amber-600 dark:text-amber-400 hover:text-amber-500 dark:hover:text-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
          Renew Session
        </button>
        <button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
          Later
        </button>
      </div>
    </div>
    <div class="ml-4 flex flex-shrink-0">
      <button type="button" class="inline-flex rounded-md p-1.5 text-slate-500 dark:text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="max-w-sm w-full bg-slate-100/30 dark:bg-slate-800/30 backdrop-blur-lg rounded-xl shadow-xl flex p-4 ring-1 ring-slate-200/50 dark:ring-slate-700/50 transition-all duration-300 ease-out transform translate-y-0 opacity-100 pointer-events-auto">
    <div class="flex-shrink-0">
      <svg class="h-6 w-6 text-rose-500 dark:text-rose-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9.303-9.303a2.25 2.25 0 00-3.182 0l-10.101 10.101a2.25 2.25 0 000 3.182L10.96 21.04a2.25 2.25 0 003.182 0L21.04 10.96a2.25 2.25 0 000-3.182zM15.75 14.75h.007v.008H15.75v-.008z" />
      </svg>
    </div>
    <div class="ml-3 w-0 flex-1 pt-0.5">
      <p class="text-sm font-semibold text-slate-800 dark:text-slate-200">Error!</p>
      <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Failed to load data. Please try again later.</p>
      <div class="mt-4 flex space-x-7">
        <button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-rose-600 dark:text-rose-400 hover:text-rose-500 dark:hover:text-rose-300 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
          Retry
        </button>
        <button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
          Support
        </button>
      </div>
    </div>
    <div class="ml-4 flex flex-shrink-0">
      <button type="button" class="inline-flex rounded-md p-1.5 text-slate-500 dark:text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>
</div>

Glassmorphism_Grayscale_Badges_Component

A simple, responsive glassmorphism-style badges component with a grayscale color scheme, suitable for business/corporate websites. Includes dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative p-6 rounded-2xl shadow-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-30 dark:border-gray-700 dark:border-opacity-50 max-w-lg w-full overflow-hidden">
    <!-- Background blur elements - positioned absolutely for glassmorphism effect -->
    <div class="absolute inset-0 z-0" style="background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));"></div>
    <div class="absolute -top-10 -left-10 w-40 h-40 bg-gray-300 dark:bg-gray-700 rounded-full mix-blend-multiply filter blur-xl opacity-20 dark:opacity-10 animate-blob delay-2000"></div>
    <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-gray-200 dark:bg-gray-800 rounded-full mix-blend-multiply filter blur-xl opacity-20 dark:opacity-10 animate-blob delay-4000"></div>
    <div class="relative z-10">
      <h2 class="text-2xl sm:text-3xl font-semibold mb-6 text-gray-800 dark:text-gray-100 text-center">
        Our Achievements
      </h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <!-- Badge 1 -->
        <div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
          <span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </span>
          <div>
            <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Certified Excellence</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">ISO 9001:2015</p>
          </div>
        </div>

        <!-- Badge 2 -->
        <div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
          <span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2h-1c-1.657 0-3 .895-3 2s1.343 2 3 2h1a5 5 0 005-5v-1a5 5 0 00-5-5H7a5 5 0 00-5 5v1a5 5 0 005 5h1c1.657 0 3-.895 3-2s-1.343-2-3-2H8c-1.657 0-3-.895-3-2s1.343-2 3-2h1"></path></svg>
          </span>
          <div>
            <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Industry Leader</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">Top 10 Innovator</p>
          </div>
        </div>

        <!-- Badge 3 -->
        <div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
          <span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 1.5M6 7l3-1m0 0l-3 1.5m0 0l-3 1.5M6 9l3-1m0 0a9.002 9.002 0 00-3-7.5M12 6a9.002 9.002 0 013 7.5"></path></svg>
          </span>
          <div>
            <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Client Satisfaction</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">98% Positive Feedback</p>
          </div>
        </div>

        <!-- Badge 4 -->
        <div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
          <span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11V7m0 0L5 9m2-2l2 2m7-2v4m0 0l2 2m-2-2l-2 2M12 18h.01M12 6h.01M12 12h.01M12 18h.01M12 6h.01M12 12h.01"></path></svg>
          </span>
          <div>
            <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Award Winning</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">Tech Growth Award 2023</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is for the custom blob animation */
  @keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
  }
  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
</style>

Neumorphic User Profile Card - Pastel

A simple, responsive user profile card with a pastel-themed neumorphic design, suitable for portfolios, including dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="w-full max-w-sm rounded-[3rem] p-8 text-center transition-all duration-300 ease-in-out
    bg-gradient-to-br from-purple-100 via-pink-100 to-rose-100
    shadow-[10px_10px_20px_#d1caca,-10px_-10px_20px_#ffffff]
    dark:from-gray-700 dark:via-gray-750 dark:to-gray-800
    dark:shadow-[10px_10px_20px_#222222,-10px_-10px_20px_#444444]">

    <div class="relative w-32 h-32 mx-auto mb-6 rounded-full
      shadow-[inset_5px_5px_10px_#b9a8bd,inset_-5px_-5px_10px_#f5e9f6]
      dark:shadow-[inset_5px_5px_10px_#333333,inset_-5px_-5px_10px_#555555]">
      <img class="w-full h-full object-cover rounded-full p-1 border-4 border-transparent
        shadow-[0px_0px_0px_2px_#ffffff,0px_0px_0px_4px_#ddcce1]
        dark:shadow-[0px_0px_0px_2px_#333,0px_0px_0px_4px_#555]"
        src="https://randomuser.me/api/portraits/women/14.jpg" alt="Profile Picture">
      <span class="absolute bottom-1 right-1 block w-4 h-4 rounded-full bg-green-400
        shadow-[0px_0px_0px_2px_#ffffff,0px_0px_0px_4px_#ddcce1]
        dark:shadow-[0px_0px_0px_2px_#333,0px_0px_0px_4px_#555]"></span>
    </div>

    <h2 class="text-2xl font-bold mb-2 text-purple-700 dark:text-purple-300">Jane Doe</h2>
    <p class="text-md text-pink-600 mb-6 dark:text-pink-300">Creative Designer & Developer</p>

    <div class="grid grid-cols-3 gap-4 mb-8">
      <div class="p-3 rounded-xl
        shadow-[inset_5px_5px_10px_#d1caca,inset_-5px_-5px_10px_#ffffff]
        dark:shadow-[inset_5px_5px_10px_#222222,inset_-5px_-5px_10px_#444444]">
        <p class="text-lg font-semibold text-rose-500 dark:text-rose-300">12</p>
        <p class="text-sm text-purple-500 dark:text-purple-200">Projects</p>
      </div>
      <div class="p-3 rounded-xl
        shadow-[inset_5px_5px_10px_#d1caca,inset_-5px_-5px_10px_#ffffff]
        dark:shadow-[inset_5px_5px_10px_#222222,inset_-5px_-5px_10px_#444444]">
        <p class="text-lg font-semibold text-rose-500 dark:text-rose-300">80</p>
        <p class="text-sm text-purple-500 dark:text-purple-200">Clients</p>
      </div>
      <div class="p-3 rounded-xl
        shadow-[inset_5px_5px_10px_#d1caca,inset_-5px_-5px_10px_#ffffff]
        dark:shadow-[inset_5px_5px_10px_#222222,inset_-5px_-5px_10px_444444]">
        <p class="text-lg font-semibold text-rose-500 dark:text-rose-300">5</p>
        <p class="text-sm text-purple-500 dark:text-purple-200">Awards</p>
      </div>
    </div>

    <div class="flex justify-center space-x-4">
      <button class="py-3 px-6 rounded-3xl font-semibold transition-all duration-300 ease-in-out
        bg-gradient-to-br from-purple-200 to-pink-200 text-purple-700
        shadow-[7px_7px_14px_#b9a8bd,-7px_-7px_14px_#ffffff]
        hover:shadow-[inset_5px_5px_10px_#b9a8bd,inset_-5px_-5px_10px_#f5e9f6]
        dark:from-gray-600 dark:to-gray-700 dark:text-purple-300
        dark:shadow-[7px_7px_14px_#222222,-7px_-7px_14px_#444444]
        dark:hover:shadow-[inset_5px_5px_10px_#333333,inset_-5px_-5px_10px_#555555]">
        View Portfolio
      </button>
      <button class="py-3 px-6 rounded-3xl font-semibold transition-all duration-300 ease-in-out
        bg-gradient-to-br from-pink-200 to-rose-200 text-pink-700
        shadow-[7px_7px_14px_#b9a8bd,-7px_-7px_14px_#ffffff]
        hover:shadow-[inset_5px_5px_10px_#b9a8bd,inset_-5px_-5px_10px_#f5e9f6]
        dark:from-gray-700 dark:to-gray-600 dark:text-pink-300
        dark:shadow-[7px_7px_14px_#222222,-7px_-7px_14px_#444444]
        dark:hover:shadow-[inset_5px_5px_10px_#333333,inset_-5px_-5px_10px_#555555]">
        Contact Me
      </button>
    </div>
  </div>
</div>

Neumorphic Product Reviews Component

A simple, responsive product reviews component with a neumorphic design, analogous color scheme, and dark mode support, suitable for business or corporate websites.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-100 via-pink-100 to-red-100 dark:from-purple-900 dark:via-pink-900 dark:to-red-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-md mx-auto p-6 md:p-8 rounded-2xl shadow-xl transition-all duration-300 ease-in-out
              bg-gradient-to-br from-purple-50 to-pink-50
              dark:from-purple-800 dark:to-pink-800
              dark:shadow-neutral-900/50
              shadow-purple-200/50 dark:shadow-inner-xl
              dark:border dark:border-pink-700/50">

    <h3 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center
               drop-shadow-sm dark:drop-shadow-md">
      Customer Reviews
    </h3>

    <div class="space-y-6">

      <!-- Review 1 -->
      <div class="p-4 rounded-xl shadow-md transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-100 to-pink-100
                  dark:from-purple-900 dark:to-pink-900
                  shadow-md shadow-purple-200/50 dark:shadow-neutral-900/40
                  dark:hover:shadow-neutral-900/60
                  hover:shadow-lg hover:shadow-purple-300/50
                  dark:border dark:border-pink-800/50">
        <div class="flex items-center mb-3">
          <img class="w-10 h-10 rounded-full mr-3 shadow-sm from-red-200 to-pink-200 dark:from-red-800 dark:to-pink-800"
               src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Doe</p>
            <div class="flex text-yellow-500">
              <svg class="w-4 h-4" 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
          “This product exceeded my expectations! The quality is superb and it was exactly what I needed. Highly recommend it to everyone looking for a reliable solution.”
        </p>
      </div>

      <!-- Review 2 -->
      <div class="p-4 rounded-xl shadow-md transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-100 to-pink-100
                  dark:from-purple-900 dark:to-pink-900
                  shadow-md shadow-purple-200/50 dark:shadow-neutral-900/40
                  dark:hover:shadow-neutral-900/60
                  hover:shadow-lg hover:shadow-purple-300/50
                  dark:border dark:border-pink-800/50">
        <div class="flex items-center mb-3">
          <img class="w-10 h-10 rounded-full mr-3 shadow-sm from-red-200 to-pink-200 dark:from-red-800 dark:to-pink-800"
               src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">John Smith</p>
            <div class="flex text-yellow-500">
              <svg class="w-4 h-4" 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4 text-gray-300 dark:text-gray-600" 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
          “Good product overall, but there's room for improvement in the user interface. Still, it delivers on its core promises. Worth considering.”
        </p>
      </div>

      <!-- Review 3 -->
      <div class="p-4 rounded-xl shadow-md transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-100 to-pink-100
                  dark:from-purple-900 dark:to-pink-900
                  shadow-md shadow-purple-200/50 dark:shadow-neutral-900/40
                  dark:hover:shadow-neutral-900/60
                  hover:shadow-lg hover:shadow-purple-300/50
                  dark:border dark:border-pink-800/50">
        <div class="flex items-center mb-3">
          <img class="w-10 h-10 rounded-full mr-3 shadow-sm from-red-200 to-pink-200 dark:from-red-800 dark:to-pink-800"
               src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Emily White</p>
            <div class="flex text-yellow-500">
              <svg class="w-4 h-4" 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
          “Absolutely fantastic! The customer support was incredibly helpful, and the product itself is flawless. A joy to use every day.”
        </p>
      </div>

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

Triadic 3D Business Layout Component

A moderate complexity layout component for business/corporate websites, featuring a triadic color scheme and 3D design elements for depth, with full responsiveness and dark mode support.

Open Preview

                <div class="bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-900 dark:to-teal-950 min-h-screen p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">

  <!-- Header Section -->
  <header class="max-w-7xl mx-auto mb-8 lg:mb-12 rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-4 sm:p-6 lg:p-8 transform perspective-1000 rotateX-3 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateX-0 hover:translateZ-10 hover:shadow-2xl">
    <div class="flex flex-col sm:flex-row justify-between items-center">
      <div class="flex items-center space-x-2">
        <svg class="h-8 w-8 text-indigo-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9a9 9 0 00-9-9H3m0 0l3.75 3.75M3 12h6.5m4.25-5.25L12 3m-4.5 9h-4.5m16.5 0h-4.5m-4.5 4.5l-3.75 3.75M12 21V9.75" />
        </svg>
        <h1 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white capitalize">Company Name</h1>
      </div>
      <nav class="mt-4 sm:mt-0">
        <ul class="flex flex-wrap justify-center sm:justify-start gap-x-4 sm:gap-x-6 text-base font-medium">
          <li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Home</a></li>
          <li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Services</a></li>
          <li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">About</a></li>
          <li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Main Content Area -->
  <main class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">

    <!-- Hero/Featured Section (Column 1) -->
    <section class="lg:col-span-2 rounded-xl bg-gradient-to-br from-indigo-500 via-purple-600 to-teal-500 shadow-2xl overflow-hidden p-6 sm:p-8 lg:p-10 relative group transform perspective-1000 rotateY-3 translateZ-0 transition-all duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-deep dark:from-indigo-700 dark:via-purple-800 dark:to-teal-700">
      <div class="absolute inset-0 bg-pattern opacity-10 dark:opacity-20 pointer-events-none"></div>
      <div class="relative z-10 flex flex-col items-start">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-4 capitalize drop-shadow-lg">Innovate. Achieve. Transform.</h2>
        <p class="text-base sm:text-lg text-indigo-100 mb-6 lg:mb-8 max-w-2xl">We provide cutting-edge solutions to propel your business forward in the digital age. Our expert team is dedicated to your success.</p>
        <button class="px-6 py-3 bg-white text-indigo-700 font-bold rounded-full shadow-lg hover:bg-indigo-100 transition-all duration-300 transform hover:scale-105 dark:bg-gray-200 dark:text-purple-800 capitalize">Discover More</button>
      </div>
    </section>

    <!-- Sidebar/Stats Section (Column 2) -->
    <aside class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY--3 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl flex flex-col justify-between">
      <div>
        <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 capitalize">Our Impact</h3>
        <div class="space-y-4">
          <div class="flex items-center space-x-3">
            <div class="p-3 bg-indigo-100 rounded-full dark:bg-indigo-900/50">
              <svg class="h-6 w-6 text-indigo-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
              </svg>
            </div>
            <div>
              <p class="text-xl font-semibold text-gray-900 dark:text-white">250+</p>
              <p class="text-gray-600 dark:text-gray-400 capitalize">Satisfied Clients</p>
            </div>
          </div>
          <div class="flex items-center space-x-3">
            <div class="p-3 bg-purple-100 rounded-full dark:bg-purple-900/50">
              <svg class="h-6 w-6 text-purple-600 dark:text-teal-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16v4m-2-2h4M13 17v4m-2-2h4m5-16v4m-2-2h4m-2 20h2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2h12zm-3-10L14 7l-2 2-2-2-3 3-2-2m6-2V6" />
              </svg>
            </div>
            <div>
              <p class="text-xl font-semibold text-gray-900 dark:text-white">10+ Years</p>
              <p class="text-gray-600 dark:text-gray-400 capitalize">Industry Experience</p>
            </div>
          </div>
          <div class="flex items-center space-x-3">
            <div class="p-3 bg-teal-100 rounded-full dark:bg-teal-900/50">
              <svg class="h-6 w-6 text-teal-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.747-.602-3.328-1.602-4.664z" />
              </svg>
            </div>
            <div>
              <p class="text-xl font-semibold text-gray-900 dark:text-white">99%</p>
              <p class="text-gray-600 dark:text-gray-400 capitalize">Project Success Rate</p>
            </div>
          </div>
        </div>
      </div>
    </aside>

    <!-- Content Grid (Column 3) -->
    <section class="lg:col-span-3 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">

      <!-- Service Card 1 -->
      <article class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY-1 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl">
        <img src="https://picsum.photos/400/250?random=1" alt="Web Development" class="rounded-lg mb-4 w-full object-cover" loading="lazy">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 capitalize">Web Development</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4 text-sm">Building responsive, high-performance websites tailored to your business needs.</p>
        <a href="#" class="text-indigo-600 hover:underline dark:text-purple-400 text-sm font-semibold capitalize">Learn More &rarr;</a>
      </article>

      <!-- Service Card 2 -->
      <article class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY-NEG1 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl">
        <img src="https://picsum.photos/400/250?random=2" alt="Digital Marketing" class="rounded-lg mb-4 w-full object-cover" loading="lazy">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 capitalize">Digital Marketing</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4 text-sm">Strategizing and executing effective digital campaigns to maximize your reach.</p>
        <a href="#" class="text-indigo-600 hover:underline dark:text-purple-400 text-sm font-semibold capitalize">Learn More &rarr;</a>
      </article>

      <!-- Service Card 3 -->
      <article class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY-2 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl">
        <img src="https://picsum.photos/400/250?random=3" alt="Cloud Solutions" class="rounded-lg mb-4 w-full object-cover" loading="lazy">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 capitalize">Cloud Solutions</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4 text-sm">Scalable and secure cloud infrastructure to power your business operations.</p>
        <a href="#" class="text-indigo-600 hover:underline dark:text-purple-400 text-sm font-semibold capitalize">Learn More &rarr;</a>
      </article>

      <!-- Call to Action Card -->
      <div class="md:col-span-2 lg:col-span-3 bg-indigo-600 dark:bg-purple-800 rounded-xl shadow-xl overflow-hidden p-6 sm:p-8 lg:p-10 flex flex-col sm:flex-row items-center justify-between text-white transform perspective-1000 rotateX-NEG2 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateX-0 hover:translateZ-10 hover:shadow-2xl">
        <div class="text-center sm:text-left mb-4 sm:mb-0">
          <h3 class="text-2xl font-bold mb-2 capitalize">Ready to elevate your business?</h3>
          <p class="text-indigo-100 text-lg">Let's create something extraordinary together.</p>
        </div>
        <button class="px-6 py-3 bg-white text-indigo-700 font-bold rounded-full shadow-lg hover:bg-indigo-100 transition-all duration-300 transform hover:scale-105 dark:bg-gray-200 dark:text-purple-800 capitalize">Get Started Today</button>
      </div>

    </section>
  </main>

  <!-- Footer Section -->
  <footer class="max-w-7xl mx-auto mt-8 lg:mt-12 rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-4 sm:p-6 lg:p-8 text-center text-gray-700 dark:text-gray-300 transform perspective-1000 rotateX-3 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateX-0 hover:translateZ-10 hover:shadow-2xl">
    <p>&copy; 2023 Company Name. All rights reserved.</p>
    <div class="flex justify-center space-x-4 mt-2">
      <a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Privacy Policy</a>
      <span class="text-gray-400">|</span>
      <a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Terms of Service</a>
    </div>
  </footer>

</div>

<style>
  /* Custom properties for 3D transforms */
  .perspective-1000 { perspective: 1000px; }
  .rotateX-3 { transform: rotateX(3deg); }
  .rotateX-NEG2 { transform: rotateX(-2deg); }
  .rotateY-3 { transform: rotateY(3deg); }
  .rotateY-NEG1 { transform: rotateY(-1deg); }
  .rotateY-2 { transform: rotateY(2deg); }
  .translateZ-0 { transform: translateZ(0); }
  
  /* Deeper shadow for 3D effect */
  .shadow-deep {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
  }
  .dark .shadow-deep {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  }

  /* Simple patterned background for hero */
  .bg-pattern {
    background-image: radial-gradient(#ffffff20 1px, transparent 1px);
    background-size: 20px 20px;
  }

  /* Ensure transforms apply correctly */
  .group:hover .group-hover\:rotateX-0 { transform: rotateX(0deg); }
  .group:hover .group-hover\:translateZ-10 { transform: translateZ(10px); }
  .group:hover .group-hover\:shadow-2xl { box-shadow: var(--tw-shadow); }
</style>

A Material Design-inspired CAPTCHA component with a monochromatic color scheme, suitable for blogs or content sites. Features a checkbox, a reCAPTCHA-like 'I'm not a robot' text, and a placeholder image verification area. Fully responsive and supports dark mode.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="w-full max-w-sm rounded-lg shadow-xl overflow-hidden bg-white dark:bg-gray-800 transition-colors duration-300">
    <div class="p-6 space-y-6">
      <!-- CAPTCHA Header -->
      <div class="flex items-center space-x-3">
        <svg class="h-8 w-8 text-gray-700 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.92 12c0 3.072 1.407 5.8 3.636 7.619A11.952 11.952 0 0112 21.055c3.072 0 5.8-1.407 7.619-3.636A11.952 11.952 0 0121.08 12c0-3.072-1.407-5.8-3.636-7.619z" />
        </svg>
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Security Check</h3>
      </div>

      <!-- Checkbox Area -->
      <div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-700 p-4 rounded-md shadow-inner">
        <input type="checkbox" id="not-robot" class="h-6 w-6 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:border-gray-500 dark:bg-gray-600 dark:checked:bg-blue-600 dark:checked:border-transparent cursor-pointer">
        <label for="not-robot" class="text-lg text-gray-700 dark:text-gray-200 select-none cursor-pointer">I'm not a robot</label>
      </div>

      <!-- Verification Content Placeholder -->
      <div class="border border-gray-200 dark:border-gray-600 rounded-lg p-4 space-y-4">
        <p class="text-gray-600 dark:text-gray-300 text-sm">
          Please click the images containing a
          <strong class="font-medium text-gray-700 dark:text-gray-200">traffic light</strong>.
          Click verify once there are none left.
        </p>
        <div class="grid grid-cols-3 gap-2">
          <button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <img src="https://picsum.photos/id/101/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            <div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
              <svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </button>
          <button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <img src="https://picsum.photos/id/102/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            <div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
                <svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </button>
          <button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <img src="https://picsum.photos/id/103/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            <div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
                <svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </button>
          <button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <img src="https://picsum.photos/id/104/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            <div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
                <svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </button>
          <button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <img src="https://picsum.photos/id/105/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            <div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
                <svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </button>
          <button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <img src="https://picsum.photos/id/106/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            <div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
                <svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </button>
        </div>
        <div class="flex justify-end pt-2">
          <button class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            Verify
          </button>
        </div>
      </div>
    </div>

    <!-- CAPTCHA Footer - reCAPTCHA branding placeholder -->
    <div class="flex items-center justify-between p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-xs text-gray-500 dark:text-gray-400">
      <div class="flex items-center space-x-1">
        <svg class="h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-3.5-3.5L7 12l2-2 4 4 6-6 1.5 1.5L10 17z"/>
        </svg>
        <span>reCAPTCHA</span>
      </div>
      <div class="text-right">
        <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Privacy</a>
        <span> - </span>
        <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Terms</a>
      </div>
    </div>
  </div>
</div>

Product Gallery Component

A simple, responsive product gallery component with earth tones, optimized for dark mode and content consumption. Ideal for blogs or e-commerce sites displaying items.

Open Preview

                <div class="bg-stone-100 dark:bg-stone-900 py-8 sm:py-12 md:py-16">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-3xl font-extrabold text-stone-900 dark:text-stone-50 mb-8 text-center sm:text-4xl">Our Latest Creations</h2>
    
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">
      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1018/400/300" alt="Forest Stream">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Enchanted Forest Canvas</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-3">A breathtaking view captured on canvas, perfect for any nature lover's home.</p>
          <div class="flex justify-between items-center">
            <span class="text-lg font-bold text-stone-900 dark:text-stone-50">$120.00</span>
            <button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1060/400/300" alt="Desert Landscape">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Desert Bloom Sculpture</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-3">Handcrafted sculpture inspired by the resilient beauty of desert florals.</p>
          <div class="flex justify-between items-center">
            <span class="text-lg font-bold text-stone-900 dark:text-stone-50">$95.00</span>
            <button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1004/400/300" alt="Mountain Peak">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Alpine Summit Print</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-3">A stunning photographic print capturing the majesty of a mountain peak.</p>
          <div class="flex justify-between items-center">
            <span class="text-lg font-bold text-stone-900 dark:text-stone-50">$80.00</span>
            <button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1020/400/300" alt="Beach Sunset">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Coastal Serenity Frame</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-3">Bring the calming essence of the ocean into your space with this piece.</p>
          <div class="flex justify-between items-center">
            <span class="text-lg font-bold text-stone-900 dark:text-stone-50">$110.00</span>
            <button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Retro_Vintage_Shopping_Cart_Component

A simple, retro/vintage styled shopping cart component with a grayscale color scheme, optimized for business/corporate websites and fully responsive with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen text-gray-800 dark:text-gray-200 font-mono">
  <div class="max-w-xl mx-auto border border-gray-300 dark:border-gray-700 p-6 sm:p-8 bg-white dark:bg-gray-800 shadow-lg">
    <h2 class="text-2xl sm:text-3xl font-bold text-center uppercase mb-8 tracking-widest">Your Order</h2>

    <div class="space-y-6 mb-8">
      <!-- Cart Item 1 -->
      <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=1" alt="Product Image" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border border-gray-300 dark:border-gray-600">
          <div>
            <p class="text-lg font-semibold">Classic Widget</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Quantity: 1</p>
          </div>
        </div>
        <p class="text-lg font-bold">$19.99</p>
      </div>

      <!-- Cart Item 2 -->
      <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=2" alt="Product Image" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border border-gray-300 dark:border-gray-600">
          <div>
            <p class="text-lg font-semibold">Turbo Charger</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Quantity: 2</p>
          </div>
        </div>
        <p class="text-lg font-bold">$99.98</p>
      </div>

      <!-- Cart Item 3 -->
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=3" alt="Product Image" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border border-gray-300 dark:border-gray-600">
          <div>
            <p class="text-lg font-semibold">Mega Bolt Kit</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Quantity: 1</p>
          </div>
        </div>
        <p class="text-lg font-bold">$34.50</p>
      </div>
    </div>

    <!-- Order Summary -->
    <div class="border-t border-gray-300 dark:border-gray-700 pt-6 space-y-3 mb-8">
      <div class="flex justify-between items-center">
        <p class="text-gray-700 dark:text-gray-300">Subtotal:</p>
        <p class="font-bold">$154.47</p>
      </div>
      <div class="flex justify-between items-center">
        <p class="text-gray-700 dark:text-gray-300">Shipping:</p>
        <p class="font-bold">$7.50</p>
      </div>
      <div class="flex justify-between items-center text-xl font-extrabold border-t border-gray-300 dark:border-gray-700 pt-3 mt-3">
        <p>Total:</p>
        <p>$161.97</p>
      </div>
    </div>

    <button class="w-full py-3 px-6 bg-black text-white dark:bg-gray-100 dark:text-gray-900 uppercase tracking-widest text-lg sm:text-xl font-bold border-2 border-black dark:border-gray-100 hover:bg-gray-800 dark:hover:bg-gray-300 transition-colors duration-200">
      Checkout</button>
  </div>
</div>

1 ... 119 120 121 122 123 ... 335

Search Components

Categories

All Components

Wishlist Component

3D_Grayscale_Infographics_Component

Toast Notifications Component

Glassmorphism_Grayscale_Badges_Component

Neumorphic User Profile Card - Pastel

Neumorphic Product Reviews Component

Triadic 3D Business Layout Component

CAPTCHA Component

Product Gallery Component

Retro_Vintage_Shopping_Cart_Component