Search Components

All Components

Browse all available Tailwind CSS components

Neumorphic Tooltip

Neumorphic Tooltip for Portfolio

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-10">
  <div class="relative flex items-center group">
    <button class="px-6 py-3 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-800 dark:text-gray-200 font-semibold focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition-all duration-300">
      Hover Me
    </button>
    <div class="absolute bottom-full mb-3 hidden group-hover:block px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 text-sm opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300">
      This is a neumorphic tooltip!
      <div class="absolute left-1/2 transform -translate-x-1/2 top-full w-0 h-0 border-t-8 border-t-gray-200 dark:border-t-gray-700 border-x-8 border-x-transparent"></div>
    </div>
  </div>
</div>

Wishlist Component

Complex Skeuomorphism Wishlist Component with Complementary color scheme, for Social Media purposes. Responsive, with Dark Theme support.

Open Preview

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

    <!-- Skeuomorphic Container -->
    <div class="w-full max-w-4xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-3xl 
                shadow-2xl dark:shadow-none 
                border-t-2 border-l-2 border-gray-50 dark:border-gray-600 
                border-r-2 border-b-2 border-gray-400 dark:border-gray-900 
                p-8 space-y-8 
                relative 
                overflow-hidden">

        <!-- Inner Bevel/Emboss Effect -->
        <div class="absolute inset-4 rounded-2xl 
                    bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-700 
                    shadow-inner-xl dark:shadow-inner-dark 
                    opacity-75">
        </div>

        <div class="relative z-10">
            <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center 
                        drop-shadow-lg dark:drop-shadow-none 
                        [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)] dark:[text-shadow:_0_2px_0_rgb(0_0_0_/_60%)]">
                My Wishlist
            </h1>

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

                <!-- Wishlist Item 1 -->
                <div class="bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800 
                            rounded-2xl p-6 
                            shadow-lg dark:shadow-xl 
                            border-t border-l border-slate-50 dark:border-slate-600 
                            border-r border-b border-slate-300 dark:border-slate-900 
                            flex flex-col items-center space-y-4 
                            transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
                    <img src="https://picsum.photos/seed/item1/300/200" alt="Item Image" class="rounded-xl shadow-md border border-slate-200 dark:border-slate-600 w-full h-40 object-cover">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Retro Gaming Console</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center text-sm">A classic console for nostalgic gaming sessions.</p>
                    <div class="flex items-center space-x-2">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-teal-400 shadow-md">
                        <span class="text-sm text-gray-700 dark:text-gray-200">@john_doe</span>
                    </div>
                    <button class="w-full py-3 rounded-xl 
                                bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-600 dark:to-blue-700 
                                text-white font-bold 
                                shadow-md dark:shadow-lg 
                                border-t border-l border-indigo-400 dark:border-indigo-500 
                                border-r border-b border-blue-700 dark:border-blue-800 
                                active:shadow-inner active:from-blue-600 active:to-indigo-500 
                                transform transition duration-200 
                                focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
                        <i class="fas fa-heart mr-2"></i> Add to Cart
                    </button>
                </div>

                <!-- Wishlist Item 2 -->
                <div class="bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800 
                            rounded-2xl p-6 
                            shadow-lg dark:shadow-xl 
                            border-t border-l border-slate-50 dark:border-slate-600 
                            border-r border-b border-slate-300 dark:border-slate-900 
                            flex flex-col items-center space-y-4 
                            transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
                    <img src="https://picsum.photos/seed/item2/300/200" alt="Item Image" class="rounded-xl shadow-md border border-slate-200 dark:border-slate-600 w-full h-40 object-cover">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Vintage Camera</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center text-sm">Capture moments with a classic aesthetic.</p>
                    <div class="flex items-center space-x-2">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-teal-400 shadow-md">
                        <span class="text-sm text-gray-700 dark:text-gray-200">@jane_smith</span>
                    </div>
                    <button class="w-full py-3 rounded-xl 
                                bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-600 dark:to-blue-700 
                                text-white font-bold 
                                shadow-md dark:shadow-lg 
                                border-t border-l border-indigo-400 dark:border-indigo-500 
                                border-r border-b border-blue-700 dark:border-blue-800 
                                active:shadow-inner active:from-blue-600 active:to-indigo-500 
                                transform transition duration-200 
                                focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
                        <i class="fas fa-heart mr-2"></i> Add to Cart
                    </button>
                </div>

                <!-- Wishlist Item 3 -->
                <div class="bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800 
                            rounded-2xl p-6 
                            shadow-lg dark:shadow-xl 
                            border-t border-l border-slate-50 dark:border-slate-600 
                            border-r border-b border-slate-300 dark:border-slate-900 
                            flex flex-col items-center space-y-4 
                            transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
                    <img src="https://picsum.photos/seed/item3/300/200" alt="Item Image" class="rounded-xl shadow-md border border-slate-200 dark:border-slate-600 w-full h-40 object-cover">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Mechanical Keyboard</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center text-sm">Satisfying clicks for your typing pleasure.</p>
                    <div class="flex items-center space-x-2">
                        <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-teal-400 shadow-md">
                        <span class="text-sm text-gray-700 dark:text-gray-200">@mike_wong</span>
                    </div>
                    <button class="w-full py-3 rounded-xl 
                                bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-600 dark:to-blue-700 
                                text-white font-bold 
                                shadow-md dark:shadow-lg 
                                border-t border-l border-indigo-400 dark:border-indigo-500 
                                border-r border-b border-blue-700 dark:border-blue-800 
                                active:shadow-inner active:from-blue-600 active:to-indigo-500 
                                transform transition duration-200 
                                focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
                        <i class="fas fa-heart mr-2"></i> Add to Cart
                    </button>
                </div>

            </div>

            <!-- Call to Action / Share Wishlist Button -->
            <div class="mt-10 text-center">
                <button class="py-4 px-8 rounded-full 
                            bg-gradient-to-br from-green-400 to-emerald-500 dark:from-green-600 dark:to-emerald-700 
                            text-white font-extrabold text-lg 
                            shadow-xl dark:shadow-none 
                            border-t border-l border-green-200 dark:border-green-500 
                            border-r border-b border-emerald-600 dark:border-emerald-800 
                            active:shadow-inner active:from-emerald-500 active:to-green-400 
                            transform transition duration-200 
                            focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-opacity-75">
                    <i class="fas fa-share-alt mr-3"></i> Share My Wishlist
                </button>
            </div>

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

<!-- FontAwesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<!-- Custom Tailwind CSS (for inner shadow) -->
<style>
    .shadow-inner-xl {
        box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
    }

    .dark .shadow-inner-dark {
        box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.05), inset 0 0 30px rgba(255, 255, 255, 0.02);
    }
</style>

Loaders Component

A complex, responsive, Glassmorphism-styled loader component for e-commerce, with a Triadic color scheme and dark mode support, using HTML and Tailwind CSS.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-8">
  <div class="relative bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl p-8 w-full max-w-2xl border border-white border-opacity-30 dark:border-gray-700 dark:border-opacity-30">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 rounded-xl opacity-20 dark:from-purple-700 dark:via-pink-800 dark:to-red-800"></div>
    <div class="relative z-10 flex flex-col md:flex-row items-center justify-center space-y-8 md:space-y-0 md:space-x-8">
      <!-- Product Image Skeleton -->
      <div class="w-48 h-48 md:w-64 md:h-64 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse shadow-lg flex-shrink-0"></div>
      
      <!-- Product Info Skeletons -->
      <div class="flex-1 space-y-6 w-full">
        <div class="h-8 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-3/4 animate-pulse"></div>
        <div class="h-6 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-1/2 animate-pulse"></div>
        <div class="space-y-4">
          <div class="h-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-full animate-pulse"></div>
          <div class="h-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-5/6 animate-pulse"></div>
          <div class="h-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-3/4 animate-pulse"></div>
        </div>
        <div class="h-12 bg-purple-500 bg-opacity-50 dark:bg-purple-700 dark:bg-opacity-50 rounded-lg w-full animate-bounce"></div>
      </div>
    </div>
    
    <!-- Additional Loader Elements -->
    <div class="relative z-10 mt-8 grid grid-cols-2 md:grid-cols-4 gap-6">
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
    </div>

    <!-- Overlay for interactivity indication -->
    <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10 pointer-events-none rounded-xl">
      <div class="w-24 h-24 border-8 border-t-8 border-purple-400 dark:border-purple-600 border-opacity-70 dark:border-opacity-70 rounded-full animate-spin"></div>
    </div>
  </div>
</div>

OAuth Buttons Component

OAuth Buttons Component with microinteractions for a portfolio, featuring a vibrant color scheme and simple layout, with responsive design and dark mode support using Tailwind CSS.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-gray-900 dark:to-gray-800 p-4">
  <h2 class="text-4xl font-extrabold text-white dark:text-gray-100 mb-8 animate-fade-in-down">Join the Future</h2>
  <div class="flex flex-col space-y-4">
    <button class="relative flex items-center justify-center px-6 py-3 rounded-full bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 text-lg font-semibold shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-50 group">
      <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo" class="w-6 h-6 mr-3 group-hover:animate-bounce">
      Sign in with Google
      <span class="absolute top-0 right-0 -mr-4 -mt-2 w-4 h-4 bg-yellow-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping"></span>
    </button>
    <button class="relative flex items-center justify-center px-6 py-3 rounded-full bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 text-lg font-semibold shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-50 group">
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Facebook_F_icon.svg" alt="Facebook Logo" class="w-6 h-6 mr-3 group-hover:animate-bounce">
      Sign in with Facebook
       <span class="absolute top-0 right-0 -mr-4 -mt-2 w-4 h-4 bg-blue-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping"></span>
    </button>
    <button class="relative flex items-center justify-center px-6 py-3 rounded-full bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 text-lg font-semibold shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-50 group">
      <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" alt="GitHub Logo" class="w-6 h-6 mr-3 group-hover:animate-bounce">
      Sign in with GitHub
       <span class="absolute top-0 right-0 -mr-4 -mt-2 w-4 h-4 bg-gray-600 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping"></span>
    </button>
  </div>
</div>

<style>
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.8s ease-out forwards;
  }

  @keyframes bounce {
    0%, 100% {
      transform: translateY(-5%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: translateY(0);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }

  .group-hover\:animate-bounce:hover {
    animation: bounce 1s infinite;
  }

  @keyframes ping {
    0% {
      transform: scale(0.2); 
      opacity: 0.8;
    }
    100% {
      transform: scale(1.5); 
      opacity: 0;
    }
  }

  .group-hover\:animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
</style>

Columns Component

A simple three-column layout for a dashboard, featuring 3D-like cards with vibrant colors and dark mode support.

Open Preview

                
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">

    <!-- Column 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition-all duration-300 hover:scale-105
                border-b-4 border-l-2 border-r-4 border-t-2 border-purple-500 dark:border-purple-700
                hover:border-purple-600 dark:hover:border-purple-800
                relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-400/30 via-pink-500/30 to-red-500/30 opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h2 class="text-2xl font-bold text-purple-700 dark:text-purple-400 mb-4 tracking-wide relative z-10">Sales Overview</h2>
      <p class="text-gray-700 dark:text-gray-300 relative z-10">Total sales increased by <span class="font-semibold text-green-500">+15%</span> this quarter. Dive into the details.</p>
      <div class="mt-6 p-4 rounded-md bg-purple-50 dark:bg-gray-700/50 relative z-10">
        <p class="text-sm text-purple-600 dark:text-purple-300">Revenue: <span class="font-bold">$1.2M</span></p>
        <p class="text-sm text-purple-600 dark:text-purple-300">Units Sold: <span class="font-bold">8,500</span></p>
      </div>
    </div>

    <!-- Column 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition-all duration-300 hover:scale-105
                border-b-4 border-l-2 border-r-4 border-t-2 border-indigo-500 dark:border-indigo-700
                hover:border-indigo-600 dark:hover:border-indigo-800
                relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-indigo-400/30 via-blue-500/30 to-cyan-500/30 opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-400 mb-4 tracking-wide relative z-10">User Engagement</h2>
      <p class="text-gray-700 dark:text-gray-300 relative z-10">New users are up <span class="font-semibold text-blue-500">+8%</span>. See active user statistics.</p>
      <div class="mt-6 p-4 rounded-md bg-indigo-50 dark:bg-gray-700/50 relative z-10">
        <p class="text-sm text-indigo-600 dark:text-indigo-300">Active Users: <span class="font-bold">25,000</span></p>
        <p class="text-sm text-indigo-600 dark:text-indigo-300">Bounce Rate: <span class="font-bold">35%</span></p>
      </div>
    </div>

    <!-- Column 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition-all duration-300 hover:scale-105
                border-b-4 border-l-2 border-r-4 border-t-2 border-green-500 dark:border-green-700
                hover:border-green-600 dark:hover:border-green-800
                relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-green-400/30 via-lime-500/30 to-yellow-500/30 opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h2 class="text-2xl font-bold text-green-700 dark:text-green-400 mb-4 tracking-wide relative z-10">Revenue Projections</h2>
      <p class="text-gray-700 dark:text-gray-300 relative z-10">Projected growth of <span class="font-semibold text-orange-500">+12%</span> for the next quarter.</p>
      <div class="mt-6 p-4 rounded-md bg-green-50 dark:bg-gray-700/50 relative z-10">
        <p class="text-sm text-green-600 dark:text-green-300">Q3 Target: <span class="font-bold">$1.5M</span></p>
        <p class="text-sm text-green-600 dark:text-green-300">Confidence: <span class="font-bold">High</span></p>
      </div>
    </div>

  </div>
</div>

Add To Cart Button

A simple, earth-toned add to cart button with microinteraction-inspired hover effects, featuring responsive design and dark mode support.

Open Preview

                <button class="bg-brown-600 hover:bg-brown-700 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:shadow-outline transition duration-300 ease-in-out transform hover:scale-105
                       dark:bg-brown-700 dark:hover:bg-brown-800">
  <span class="text-sm">Add to Cart</span>
</button>

Image Lightbox Component

A responsive image lightbox component with Skeuomorphism design, vibrant colors, and dark mode support, built with Tailwind CSS. No JavaScript for enhanced performance.

Open Preview

                <div class="relative w-full h-full bg-gradient-to-br from-gray-800 to-black p-8 md:p-12 font-sans overflow-hidden">

  <!-- Skeuomorphism background texture -->
  <div class="absolute inset-0 bg-repeat opacity-10" style="background-image: url('https://grainy-gradients.vercel.app/gradients/png/new-42.png');"></div>

  <!-- Lightbox Container -->
  <div class="relative z-10 max-w-6xl mx-auto bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-3xl shadow-[inset_0_1px_0px_rgba(255,255,255,0.8),0_20px_50px_rgba(0,0,0,0.5),0_0_0_1px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_20px_50px_rgba(0,0,0,0.8),0_0_0_1px_rgba(0,0,0,0.3)] p-6 md:p-10 border border-gray-300 dark:border-gray-600">

    <!-- Header -->
    <div class="flex justify-between items-center mb-8 pb-4 border-b border-gray-300 dark:border-gray-600">
      <h1 class="text-4xl md:text-5xl font-extrabold text-indigo-700 dark:text-indigo-400 drop-shadow-lg [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)]">
        Gallery Showcase
      </h1>
      <div class="flex space-x-3">
        <button class="w-10 h-10 rounded-full bg-red-500 hover:bg-red-600 transition-all duration-300 transform hover:scale-105 shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_2px_4px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_2px_4px_rgba(0,0,0,0.6)] flex items-center justify-center text-white text-xl font-bold">
          <span class="sr-only">Close</span> &times;
        </button>
        <button class="w-10 h-10 rounded-full bg-yellow-500 hover:bg-yellow-600 transition-all duration-300 transform hover:scale-105 shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_2px_4px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_2px_4px_rgba(0,0,0,0.6)] flex items-center justify-center text-white text-xl font-bold">
          <span class="sr-only">Minimize</span> &#8211;
        </button>
        <button class="w-10 h-10 rounded-full bg-green-500 hover:bg-green-600 transition-all duration-300 transform hover:scale-105 shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_2px_4px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_2px_4px_rgba(0,0,0,0.6)] flex items-center justify-center text-white text-xl font-bold">
          <span class="sr-only">Maximize</span> &#x25A1;
        </button>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- Image Preview Section -->
      <div class="relative bg-gray-100 dark:bg-gray-800 rounded-2xl p-4 shadow-[inset_0_1px_0px_rgba(255,255,255,0.8),0_5px_15px_rgba(0,0,0,0.2)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_15px_rgba(0,0,0,0.5)] border border-gray-300 dark:border-gray-700">
        <img src="https://picsum.photos/id/1018/800/600" alt="Featured Image" class="w-full h-auto rounded-xl object-cover shadow-lg border-4 border-gray-200 dark:border-gray-700 transition-all duration-500 hover:scale-[1.02] cursor-pointer" />
        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-30 rounded-2xl pointer-events-none"></div>

        <!-- Navigation Buttons -->
        <div class="absolute top-1/2 left-0 right-0 flex justify-between px-4 transform -translate-y-1/2">
          <button class="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-white text-3xl flex items-center justify-center shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_5px_10px_rgba(0,0,0,0.5)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_10px_rgba(0,0,0,0.8)] border border-indigo-400 dark:border-violet-700 transition-all duration-300 hover:scale-105 active:scale-95">
            &#8592;
          </button>
          <button class="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-white text-3xl flex items-center justify-center shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_5px_10px_rgba(0,0,0,0.5)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_10px_rgba(0,0,0,0.8)] border border-indigo-400 dark:border-violet-700 transition-all duration-300 hover:scale-105 active:scale-95">
            &#8594;
          </button>
        </div>
      </div>

      <!-- Details and Thumbnails Section -->
      <div class="flex flex-col space-y-6">

        <!-- Image Title & Description -->
        <div class="bg-gradient-to-br from-white to-gray-200 dark:from-gray-800 dark:to-gray-900 p-6 rounded-2xl shadow-[inset_0_1px_0px_rgba(255,255,255,0.8),0_5px_15px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_15px_rgba(0,0,0,0.4)] border border-gray-300 dark:border-gray-700">
          <h2 class="text-3xl font-bold text-teal-600 dark:text-teal-400 mb-3 drop-shadow [text-shadow:_0_1px_0_rgb(0_0_0_/_30%)]">Forest Pathway</h2>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">A serene pathway winding through a dense, vibrant forest, bathed in dappled sunlight. Perfect for a peaceful stroll or deep contemplation.</p>

          <!-- Author Info -->
          <div class="flex items-center mt-5 pt-4 border-t border-gray-200 dark:border-gray-700">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-indigo-500 dark:border-purple-400 shadow-md" />
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200">By John Doe</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Published on Oct 26, 2023</p>
            </div>
          </div>
        </div>

        <!-- Thumbnails Grid -->
        <div class="p-4 bg-gradient-to-br from-indigo-500 to-violet-600 rounded-2xl shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_5px_15px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_15px_rgba(0,0,0,0.7)] border border-indigo-400 dark:border-violet-700">
          <h3 class="text-2xl font-bold text-white mb-4 [text-shadow:_0_2px_0_rgb(0_0_0_/_30%)]">More from this collection:</h3>
          <div class="grid grid-cols-3 gap-4">
            <img src="https://picsum.photos/id/1003/150/150" alt="Thumbnail 1" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1015/150/150" alt="Thumbnail 2" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1016/150/150" alt="Thumbnail 3" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1019/150/150" alt="Thumbnail 4" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1024/150/150" alt="Thumbnail 5" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
            <img src="https://picsum.photos/id/1025/150/150" alt="Thumbnail 6" class="w-full h-24 object-cover rounded-lg shadow-md border-2 border-white transform hover:scale-105 transition-transform duration-200 cursor-pointer" />
          </div>
        </div>
      </div>
    </div>

    <!-- Call to Action / Footer -->
    <div class="mt-10 pt-6 border-t border-gray-300 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-center">
      <a href="#" class="inline-block px-8 py-3 bg-teal-500 hover:bg-teal-600 text-white font-bold rounded-xl shadow-[inset_0_1px_0px_rgba(255,255,255,0.4),0_5px_10px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_5px_10px_rgba(0,0,0,0.7)] transition-all duration-300 transform hover:scale-105 tracking-wide text-lg text-center">
        Download High-Res
      </a>
      <p class="text-gray-600 dark:text-gray-400 text-sm mt-4 sm:mt-0">© 2023 Skew Photo Gallery. All rights reserved.</p>
    </div>

  </div>
</div>

A complex, responsive, dark-theme supported, Skeuomorphic-Vibrant Tooltip Component for Dashboards using Tailwind CSS. No JavaScript needed, only HTML with Tailwind classes. For dark mode, use Tailwind's dark: prefix for styling. Images are from picsum.photos and randomuser.me.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative flex items-center group">
    <button class="px-6 py-3 text-white transition-all duration-300 transform bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg shadow-2xl hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
                   dark:from-blue-700 dark:to-indigo-800
                   font-bold text-lg
                   relative overflow-hidden
                   before:absolute before:inset-0 before:bg-gradient-to-br before:from-white before:to-transparent before:opacity-0 before:transition-opacity before:duration-300
                   hover:before:opacity-20
                   after:absolute after:inset-0 after:border-t-2 after:border-l-2 after:border-white after:opacity-0 after:transition-opacity after:duration-300
                   hover:after:opacity-100
                   ">
      Hover for Dashboard Insights
    </button>
    
    <div class="absolute bottom-full mb-6 w-96 p-6
                bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900
                text-gray-900 dark:text-gray-100
                rounded-2xl shadow-skeuomorphic
                opacity-0 group-hover:opacity-100 transition-opacity duration-500
                transform translate-y-4 group-hover:-translate-y-0
                pointer-events-none group-hover:pointer-events-auto
                border-t-4 border-l-4 border-gray-300 dark:border-gray-600
                overflow-hidden
                before:absolute before:inset-0 before:bg-gradient-to-br before:from-white before:to-transparent before:opacity-10 before:rounded-2xl
                after:absolute after:bottom-0 after:left-1/2 after:-mb-4 after:-ml-2 after:w-0 after:h-0 after:border-solid after:border-8 after:border-transparent
                after:border-t-gray-400 dark:after:border-t-gray-900 after:drop-shadow-lg
                ">
      
      <div class="flex items-center space-x-4 mb-4 border-b pb-4 border-gray-300 dark:border-gray-600">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-lg">
        <div>
          <p class="font-bold text-lg text-indigo-700 dark:text-indigo-300">Analytics Summary</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Last updated: 2 minutes ago</p>
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 mb-4">
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">Total Sales:</p>
          <p class="font-bold text-xl text-green-600 dark:text-green-400">$12,450</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">New Users:</p>
          <p class="font-bold text-xl text-purple-600 dark:text-purple-400">320</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">Bounce Rate:</p>
          <p class="font-bold text-xl text-red-600 dark:text-red-400">1.5%</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">Avg. Session:</p>
          <p class="font-bold text-xl text-blue-600 dark:text-blue-400">8m 30s</p>
        </div>
      </div>

      <div class="flex justify-between items-center text-sm text-gray-700 dark:text-gray-300">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">View Full Report</a>
        <div class="flex items-center space-x-2">
          <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path>
          </svg>
          <span>Real-time Data</span>
        </div>
      </div>

      <div class="absolute inset-0 border-r-4 border-b-4 border-gray-300 dark:border-gray-600 rounded-2xl pointer-events-none opacity-50"></div>
      <div class="absolute inset-0 bg-stone-300 dark:bg-stone-800 opacity-20 rounded-2xl filter blur-sm"></div>

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

<style>
  /* Custom shadow for Skeuomorphism */
  .shadow-skeuomorphic {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), -10px -10px 20px rgba(255, 255, 255, 0.1);
  }
  .dark .shadow-skeuomorphic {
     box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7), -10px -10px 20px rgba(255, 255, 255, 0.05);
  }
  .shadow-inner-skeuomorphic {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.1);
  }
  .dark .shadow-inner-skeuomorphic {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.05);
  }
  .group:hover .absolute.bottom-full:after {
    border-top-color: #A0AEC0; /* Light Gray */
  }
  .dark .group:hover .absolute.bottom-full:after {
    border-top-color: #4A5568; /* Dark Gray */
  }
</style>

Skeuomorphic Add to Cart Button

Skeuomorphic Add to Cart button with vibrant colors for a portfolio website, featuring a complex design with interactive elements and responsive dark mode support using Tailwind CSS.

Open Preview

                <button class="relative flex items-center justify-center p-4 overflow-hidden text-lg font-bold text-white transition-all duration-300 ease-in-out bg-gradient-to-br from-purple-600 to-blue-500 rounded-2xl shadow-2xl group focus:outline-none focus:ring-4 focus:ring-purple-800 transform hover:scale-105 active:scale-95 dark:from-gray-800 dark:to-gray-900 dark:shadow-none dark:hover:from-gray-700 dark:hover:to-gray-800">
    <span class="relative z-10 flex items-center justify-center w-full h-full p-2 space-x-3 transition-all duration-300 ease-in-out bg-gradient-to-br from-purple-800 to-blue-600 rounded-xl shadow-inner-xl group-hover:from-purple-700 group-hover:to-blue-500 dark:from-gray-700 dark:to-gray-800 dark:group-hover:from-gray-600 dark:group-hover:to-gray-700">

        <!-- Texture Overlay -->
        <div class="absolute inset-0 z-0 bg-repeat opacity-20 dark:opacity-10" style="background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');"></div>

        <!-- Main Button Content -->
        <div class="relative z-10 flex items-center space-x-3">
            <svg class="w-8 h-8 text-white transform -rotate-12 group-hover:rotate-0 transition-transform duration-300 ease-in-out" 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 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0-10a2 2 0 110 4 2 2 0 010-4zm-8 4a2 2 0 110 4 2 2 0 010-4z"></path>
            </svg>
            <span class="text-white text-shadow-md">Add to Cart</span>
        </div>

        <!-- Dynamic Light Reflection -->
        <div class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-xl">
            <div class="absolute w-1/2 h-full bg-white opacity-20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-500 ease-in-out"></div>
        </div>

        <!-- Inner Shadow for Depth -->
        <div class="absolute inset-0 rounded-xl shadow-inner-2xl dark:shadow-inner-2xl-dark"></div>

    </span>

    <!-- Outer Bevel/Emboss Effect -->
    <div class="absolute inset-0 border-4 border-white border-opacity-10 rounded-2xl dark:border-opacity-5"></div>

</button>

<style>
    /* Custom shadow for Skeuomorphism */
    .shadow-inner-xl {
        box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.3), inset 0 -5px 10px rgba(255, 255, 255, 0.1);
    }

    .shadow-inner-2xl {
        box-shadow: inset 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 -8px 15px rgba(255, 255, 255, 0.15);
    }

    .shadow-inner-2xl-dark {
        box-shadow: inset 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 -8px 15px rgba(255, 255, 255, 0.05);
    }

    .text-shadow-md {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
</style>

Pagination Component

Pagination component with microinteractions for a portfolio, using a triadic color scheme. Responsive design with dark theme support, no JavaScript.

Open Preview

                <nav class="flex justify-center items-center space-x-2 my-8 dark:bg-gray-900 bg-white p-4 rounded-lg shadow-lg" aria-label="Pagination">
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 leading-5 rounded-md hover:bg-purple-100 dark:hover:bg-purple-700 focus:outline-none focus:ring focus:border-purple-300 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300">
    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
    </svg>
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:bg-green-100 dark:hover:bg-green-700 focus:outline-none focus:ring focus:border-green-300 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300">
    1
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-blue-600 leading-5 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition ease-in-out duration-150 dark:bg-blue-600 dark:border-blue-600 dark:text-gray-100 transform scale-105 shadow-md">
    2
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:bg-red-100 dark:hover:bg-red-700 focus:outline-none focus:ring focus:border-red-300 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300">
    3
  </a>
  <a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 leading-5 rounded-md hover:bg-purple-100 dark:hover:bg-purple-700 focus:outline-none focus:ring focus:border-purple-300 transition ease-in-out duration-150 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300">
    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
    </svg>
  </a>
</nav>

1 ... 129 130 131 132 133 ... 335

Search Components

Categories

All Components