Search Components

All Components

Browse all available Tailwind CSS components

Gallery Component

A simple, responsive image gallery component designed for business/corporate websites, featuring a triadic color scheme inspired by Material Design principles. It includes a dark theme for user preference and uses a grid-based layout.

Open Preview

                <div class="bg-blue-50 dark:bg-gray-900 py-12">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center text-blue-800 dark:text-blue-200 mb-8">Our Work</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-300 mb-2">Project Alpha</h3>
          <p class="text-gray-600 dark:text-gray-400">A brief description of Project Alpha, highlighting its key features and success.</p>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-red-700 dark:text-red-300 mb-2">Project Beta</h3>
          <p class="text-gray-600 dark:text-gray-400">A brief description of Project Beta, highlighting its key features and success.</p>
        </div>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/project3/400/300" alt="Project 3" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-green-700 dark:text-green-300 mb-2">Project Gamma</h3>
          <p class="text-gray-600 dark:text-gray-400">A brief description of Project Gamma, highlighting its key features and success.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Wishlist Component

A responsive wishlist component with 3D elements and pastel colors, supporting dark theme. It includes multiple interactive elements suitable for e-commerce. No JavaScript, only HTML and Tailwind CSS.

Open Preview

                <div class="p-8 font-sans bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 min-h-screen">
  <h1 class="text-4xl font-extrabold mb-8 text-center text-gray-800 dark:text-white relative">
    <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-400 dark:from-purple-300 dark:to-pink-300">My Wishlist</span>
    <div class="absolute inset-0 flex items-center justify-center transform -rotate-3 scale-105 z-[-1] opacity-20">
      <img src="https://picsum.photos/seed/wishlist/800/400" alt="3D background element" class="rounded-3xl shadow-2xl">
    </div>
  </h1>

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

    <!-- Wishlist Item 1 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 p-6 border-b-4 border-l-2 border-r-4 border-t-2 border-purple-200 dark:border-purple-600">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-800 dark:to-gray-600 opacity-30 rounded-3xl z-0"></div>
      <div class="relative z-10 flex flex-col items-center">
        <img src="https://picsum.photos/seed/product1/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-purple-100 dark:border-purple-500 transform hover:scale-105 transition-transform">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Pastel Dream Headphones</h2>
        <p class="text-gray-600 dark:text-gray-300 text-center mb-4">Experience serene sound with these beautifully designed pastel headphones. Perfect for relaxation.</p>
        <div class="flex items-center justify-between w-full mb-4">
          <span class="text-2xl font-extrabold text-purple-600 dark:text-purple-300">$129.99</span>
          <div class="relative inline-block w-10 h-10 rounded-full overflow-hidden shadow-lg border-2 border-pink-300 dark:border-pink-500 transform rotate-6">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-pink-100 dark:bg-pink-700 opacity-20"></div>
          </div>
        </div>
        <button class="bg-gradient-to-r from-purple-400 to-pink-400 text-white font-semibold py-3 px-6 rounded-full shadow-lg hover:from-purple-500 hover:to-pink-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 w-full">
          Add to Cart
        </button>
      </div>
    </div>

    <!-- Wishlist Item 2 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 p-6 border-b-4 border-l-2 border-r-4 border-t-2 border-blue-200 dark:border-blue-600">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-green-50 dark:from-gray-800 dark:to-gray-600 opacity-30 rounded-3xl z-0"></div>
      <div class="relative z-10 flex flex-col items-center">
        <img src="https://picsum.photos/seed/product2/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-blue-100 dark:border-blue-500 transform hover:scale-105 transition-transform">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Cloud-Nine Comfort Slippers</h2>
        <p class="text-gray-600 dark:text-gray-300 text-center mb-4">Walk on air with these incredibly soft and stylish pastel slippers.</p>
        <div class="flex items-center justify-between w-full mb-4">
          <span class="text-2xl font-extrabold text-blue-600 dark:text-blue-300">$49.99</span>
          <div class="relative inline-block w-10 h-10 rounded-full overflow-hidden shadow-lg border-2 border-green-300 dark:border-green-500 transform -rotate-6">
            <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-green-100 dark:bg-green-700 opacity-20"></div>
          </div>
        </div>
        <button class="bg-gradient-to-r from-blue-400 to-green-400 text-white font-semibold py-3 px-6 rounded-full shadow-lg hover:from-blue-500 hover:to-green-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700 w-full">
          Add to Cart
        </button>
      </div>
    </div>

    <!-- Wishlist Item 3 -->
    <div class="relative bg-white dark:bg-gray-700 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 p-6 border-b-4 border-l-2 border-r-4 border-t-2 border-pink-200 dark:border-pink-600">
      <div class="absolute inset-0 bg-gradient-to-br from-pink-50 to-purple-50 dark:from-gray-800 dark:to-gray-600 opacity-30 rounded-3xl z-0"></div>
      <div class="relative z-10 flex flex-col items-center">
        <img src="https://picsum.photos/seed/product3/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-pink-100 dark:border-pink-500 transform hover:scale-105 transition-transform">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Sunset Hues Scarf</h2>
        <p class="text-gray-600 dark:text-gray-300 text-center mb-4">Wrap yourself in the warm, gentle colors of a sunset with this exquisite scarf.</p>
        <div class="flex items-center justify-between w-full mb-4">
          <span class="text-2xl font-extrabold text-pink-600 dark:text-pink-300">$79.99</span>
          <div class="relative inline-block w-10 h-10 rounded-full overflow-hidden shadow-lg border-2 border-purple-300 dark:border-purple-500 transform rotate-3">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-purple-100 dark:bg-purple-700 opacity-20"></div>
          </div>
        </div>
        <button class="bg-gradient-to-r from-pink-400 to-purple-400 text-white font-semibold py-3 px-6 rounded-full shadow-lg hover:from-pink-500 hover:to-purple-500 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700 w-full">
          Add to Cart
        </button>
      </div>
    </div>

  </div>

</div>

Two-Factor Authentication Component

A simple, responsive two-factor authentication component for e-commerce, with a Skeuomorphic design, triadic color scheme, and dark theme support.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 p-8 rounded-xl shadow-2xl transform transition-all duration-300 hover:scale-105 border-4 border-gray-500 dark:border-gray-600">
    <div class="text-center mb-6">
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2 drop-shadow-lg">2FA Required</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Please enter the verification code to proceed.</p>
    </div>

    <div class="flex justify-center space-x-3 mb-6">
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-red-500 dark:focus:border-red-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-green-500 dark:focus:border-green-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
      <input type="text" maxlength="1" class="w-12 h-16 text-center text-3xl font-bold bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-lg shadow-inner border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 transition-all duration-200" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.2)"/>
    </div>

    <button class="w-full py-3 bg-gradient-to-r from-blue-500 to-cyan-600 text-white rounded-lg shadow-lg font-bold text-lg hover:from-blue-600 hover:to-cyan-700 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transform transition-all duration-200 active:scale-95 border-b-4 border-blue-700 dark:border-blue-900">
      Verify Code
    </button>

    <p class="text-center text-gray-500 dark:text-gray-400 text-xs mt-4">
      Didn't receive a code? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Resend</a>
    </p>
  </div>
</div>

Session Timeout Alert Component

A complex, responsive session timeout alert component with a minimalist grayscale design, suitable for business websites, and includes dark theme support.

Open Preview

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-75 flex items-center justify-center p-4" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-lg w-full divide-y divide-gray-200 dark:divide-gray-700">
    <div class="p-6">
      <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-4" id="modal-title">Your Session Will Expire Soon</h3>
      <p class="text-gray-700 dark:text-gray-300 text-lg mb-6">For your security, your session is about to expire due to inactivity. Please choose an option below to continue or log out.</p>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-center mb-6">
        <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md">
          <p class="text-gray-600 dark:text-gray-400 text-sm">Time Remaining</p>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-100 mt-1">01:45</p>
        </div>
        <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md">
          <p class="text-gray-600 dark:text-gray-400 text-sm">Last Activity</p>
          <p class="text-lg font-medium text-gray-900 dark:text-gray-100 mt-1">5 minutes ago</p>
        </div>
      </div>

      <div class="space-y-4">
        <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
          <div class="flex items-center">
            <svg class="h-6 w-6 text-gray-500 dark:text-gray-300 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span class="text-gray-800 dark:text-gray-200 font-medium">Auto-renew session?</span>
          </div>
          <label for="toggle-auto-renew" class="flex items-center cursor-pointer">
            <div class="relative">
              <input type="checkbox" id="toggle-auto-renew" class="sr-only">
              <div class="block bg-gray-300 dark:bg-gray-600 w-10 h-6 rounded-full"></div>
              <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition dark:bg-gray-400"></div>
            </div>
          </label>
          <style>
            input:checked ~ .dot {
              transform: translateX(100%);
              background-color: #4CAF50; /* A touch of green for

Brutalism Tooltip Component

Brutalism-style tooltip component for social media, featuring a grayscale color scheme and complex interactive elements. It is responsive and supports dark mode using Tailwind CSS, with no JavaScript.

Open Preview

                <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Tooltip Container -->
  <div class="group relative flex flex-col items-center">
    <!-- User Avatar (Trigger for Tooltip) -->
    <img class="w-24 h-24 rounded-full border-4 border-gray-900 dark:border-gray-100 cursor-pointer object-cover" src="https://api.randomuser.me/portraits/men/32.jpg" alt="User Avatar">
    
    <!-- Tooltip Content -->
    <div class="absolute bottom-full mb-6 w-80 p-6 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 border-4 border-gray-700 dark:border-gray-300 transform translate-y-4 opacity-0 group-hover:opacity-100 group-hover:-translate-y-0 transition-all duration-300 ease-in-out pointer-events-none group-hover:pointer-events-auto shadow-[8px_8px_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_rgba(255,255,255,0.4)]">
      <h3 class="text-xl font-bold uppercase mb-2">User Profile</h3>
      <p class="text-sm border-b-2 border-gray-700 dark:border-gray-300 pb-2 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      
      <div class="flex justify-between items-center text-sm mb-2">
        <span class="font-semibold">Followers:</span>
        <span>1.2M</span>
      </div>
      <div class="flex justify-between items-center text-sm mb-4">
        <span class="font-semibold">Following:</span>
        <span>345</span>
      </div>

      <div class="grid grid-cols-3 gap-2 mb-4">
        <img class="w-full h-16 object-cover border-2 border-gray-700 dark:border-gray-300" src="https://picsum.photos/seed/social1/100/100" alt="Post 1">
        <img class="w-full h-16 object-cover border-2 border-gray-700 dark:border-gray-300" src="https://picsum.photos/seed/social2/100/100" alt="Post 2">
        <img class="w-full h-16 object-cover border-2 border-gray-700 dark:border-gray-300" src="https://picsum.photos/seed/social3/100/100" alt="Post 3">
      </div>

      <a href="#" class="block w-full py-2 text-center uppercase font-bold bg-gray-700 dark:bg-gray-300 text-gray-100 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-100 hover:bg-gray-600 dark:hover:bg-gray-400 transition-colors duration-200">
        View Profile
      </a>
      
      <!-- Brutalist Arrow -->
      <div class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-[calc(100%-8px)] w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-t-[20px] border-t-gray-900 dark:border-t-gray-100 group-hover:translate-y-[calc(100%-12px)] transition-transform duration-300"></div>
    </div>
  </div>
</div>

Columns Component

A simple, responsive column component with a dark monochromatic theme, suitable for showcasing portfolios.

Open Preview

                <div class="dark:bg-gray-900 dark:text-gray-200 min-h-screen p-8">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum1/400/300" alt="Project 1">
      <h3 class="text-xl font-semibold mb-2">Project One</h3>
      <p class="text-gray-400 text-sm">A brief description of project one, highlighting its key features and technologies used.</p>
    </div>
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum2/400/300" alt="Project 2">
      <h3 class="text-xl font-semibold mb-2">Project Two</h3>
      <p class="text-gray-400 text-sm">Another project description, focusing on the impact and results of the work.</p>
    </div>
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum3/400/300" alt="Project 3">
      <h3 class="text-xl font-semibold mb-2">Project Three</h3>
      <p class="text-gray-400 text-sm">Description for the third project, detailing the creative process and solutions.</p>
    </div>
  </div>
</div>

Community Forum Component

A Neumorphism-styled community forum component for a portfolio, featuring a pastel color scheme and a complex, responsive design with dark theme support. It includes a forum list, recent activity, and user profiles, all implemented using Tailwind CSS with no JavaScript.

Open Preview

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8 flex items-center justify-center font-sans">
  <div class="container mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">

    <!-- Left Sidebar: Forum Categories/List -->
    <div class="lg:col-span-1 bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 border-b border-gray-300 dark:border-gray-600 pb-2">Forum Categories</h2>
      <ul>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-blue-400 mr-3"></span> General Discussion
          </a>
        </li>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-green-400 mr-3"></span> Project Feedback
          </a>
        </li>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-purple-400 mr-3"></span> Tech Talk
          </a>
        </li>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-red-400 mr-3"></span> Off-Topic
          </a>
        </li>
      </ul>
    </div>

    <!-- Main Content: Forum Threads -->
    <div class="lg:col-span-2 bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 border-b border-gray-300 dark:border-gray-600 pb-2">Recent Threads</h2>

      <!-- Thread Card 1 -->
      <div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full border-2 border-blue-300 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Help needed with Neumorphism shadows</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
            <span class="mr-4">Posted by <span class="font-semibold text-blue-500 dark:text-blue-400">John Doe</span></span>
            <span>2 hours ago</span>
             <span class="ml-auto flex items-center">
                <svg class="w-4 h-4 mr-1 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
                15
            </span>
          </div>
        </div>
      </div>

      <!-- Thread Card 2 -->
      <div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full border-2 border-pink-300 dark:border-pink-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Ideas for a portfolio redesign?</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
            <span class="mr-4">Posted by <span class="font-semibold text-pink-500 dark:text-pink-400">Jane Smith</span></span>
            <span>5 hours ago</span>
            <span class="ml-auto flex items-center">
                 <svg class="w-4 h-4 mr-1 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
                27
            </span>
          </div>
        </div>
      </div>

      <!-- Thread Card 3 -->
      <div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full border-2 border-green-300 dark:border-green-500" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Best practices for responsive typography?</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
            <span class="mr-4">Posted by <span class="font-semibold text-green-500 dark:text-green-400">Alice Johnson</span></span>
            <span>Yesterday</span>
            <span class="ml-auto flex items-center">
                <svg class="w-4 h-4 mr-1 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
                12
            </span>
          </div>
        </div>
      </div>

      <button class="w-full py-3 mt-4 rounded-lg bg-blue-400 dark:bg-blue-600 text-white font-semibold shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark transition duration-300">
        Load More Threads
      </button>
    </div>

  </div>
</div>

<style>
  /* Neumorphic Shadows - Light Mode */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
  }
  .shadow-neumorphic-flat-light {
    box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-pressed-light {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
  }

  /* Neumorphic Shadows - Dark Mode */
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 15px #4a4a4a, -8px -8px 15px #2c2c2c;
  }
  .dark .shadow-neumorphic-flat-dark {
    box-shadow: 5px 5px 10px #4a4a4a, -5px -5px 10px #2c2c2c;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #2c2c2c;
  }
  .dark .shadow-neumorphic-pressed-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #2c2c2c;
  }

  /* Pastel Colors for Light Mode */
  .bg-gray-200 { background-color: #e0e5ec; } /* Light background */
  .bg-gray-300 { background-color: #dae0e8; } /* Slightly darker accent */
  .text-gray-700 { color: #5c6a7e; }
  .text-gray-600 { color: #7f8fa5; }
  .text-blue-400 { color: #87ceeb; } /* Sky Blue */
  .text-green-400 { color: #98fb98; } /* Pale Green */
  .text-purple-400 { color: #dda0dd; } /* Plum */
  .text-red-400 { color: #f08080; } /* Light Coral */
  .border-blue-300 { border-color: #a7d9f7; }
  .border-pink-300 { border-color: #f7a7d9; }
  .border-green-300 { border-color: #b3f7a7; }

  /* Pastel Colors for Dark Mode */
  .dark\:bg-gray-800 { background-color: #2c2c2c; }
  .dark\:bg-gray-700 { background-color: #3a3a3a; }
  .dark\:bg-gray-600 { background-color: #4a4a4a; }
  .dark\:text-gray-200 { color: #e0e0e0; }
  .dark\:text-gray-300 { color: #c0c0c0; }
  .dark\:text-gray-400 { color: #a0a0a0; }
  .dark\:text-gray-100 { color: #f0f0f0; }
  .dark\:text-blue-600 { color: #6495ed; } /* Cornflower Blue */
  .dark\:text-pink-600 { color: #ff69b4; } /* Hot Pink */
  .dark\:text-green-600 { color: #3cb371; } /* Medium Sea Green */
  .dark\:border-blue-500 { border-color: #4682b4; }
  .dark\:border-pink-500 { border-color: #c71585; }
  .dark\:border-green-500 { border-color: #2e8b57; }
  .dark\:focus\:ring-blue-500 { --tw-ring-color: #6495ed; }

</style>

<script>
  // You can toggle dark mode with a simple script if needed,
  // for example, by adding/removing the "dark" class to the root element.
  // This example assumes a mechanism for dark mode toggling is already in place or will be added externally.
</script>

Product Cards Component

Responsive product cards with Glassmorphism frosted glass effect using pastel colors, with dark mode support. Suitable for social media interfaces.

Open Preview

                <div class="flex flex-col min-h-screen bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-black items-center justify-center p-8">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- Product Card 1 -->
    <div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/400/250?random=1" alt="Product Image" class="rounded-lg mb-4">
      <h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Pastel Dreams</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">Embrace the soft hues and gentle vibes with this serene collection.</p>
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
        <span class="text-gray-800 dark:text-gray-200 text-sm">John Doe</span>
      </div>
      <div class="flex justify-between items-center">
        <span class="text-lg font-bold text-purple-700 dark:text-purple-300">$29.99</span>
        <button class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/400/250?random=2" alt="Product Image" class="rounded-lg mb-4">
      <h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Whispering Lilacs</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">Delicate and enchanting, perfect for a touch of elegance in your feed.</p>
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
        <span class="text-gray-800 dark:text-gray-200 text-sm">Jane Smith</span>
      </div>
      <div class="flex justify-between items-center">
        <span class="text-lg font-bold text-pink-700 dark:text-pink-300">$35.50</span>
        <button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/400/250?random=3" alt="Product Image" class="rounded-lg mb-4">
      <h3 class="font-bold text-xl text-gray-800 dark:text-gray-100 mb-2">Misty Mornings</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">Soft and inviting, ideal for sharing peaceful moments with your followers.</p>
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
        <span class="text-gray-800 dark:text-gray-200 text-sm">Peter Jones</span>
      </div>
      <div class="flex justify-between items-center">
        <span class="text-lg font-bold text-green-700 dark:text-green-300">$22.00</span>
        <button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Product</button>
      </div>
    </div>
  </div>
</div>

Community Forum Component

A minimalist community forum component with dark mode support. This component is designed for portfolios and features a simple layout with earth tone colors.

Open Preview

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-4 flex flex-col items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-stone-800 rounded-lg shadow-md p-6">
    <h1 class="text-2xl font-semibold text-stone-800 dark:text-stone-200 mb-6 text-center">Community Forum</h1>

    <!-- New Post Section -->
    <div class="mb-6">
      <textarea class="w-full p-3 rounded-md bg-stone-50 dark:bg-stone-700 text-stone-700 dark:text-stone-300 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400" rows="3" placeholder="Write a new post..."></textarea>
      <div class="flex justify-end mt-2">
        <button class="px-4 py-2 bg-stone-600 text-white rounded-md hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-500">Post</button>
      </div>
    </div>

    <!-- Forum Posts -->
    <div class="space-y-4">
      <!-- Post 1 -->
      <div class="bg-stone-50 dark:bg-stone-700 p-4 rounded-lg shadow-sm">
        <div class="flex items-center mb-3">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-stone-300 dark:border-stone-600">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">John Doe</p>
            <p class="text-sm text-stone-500 dark:text-stone-400">2 hours ago</p>
          </div>
        </div>
        <p class="text-stone-700 dark:text-stone-300 mb-3">This is a great community! I just wanted to share my latest project. Feedback is welcome!</p>
        <div class="flex justify-between text-stone-500 dark:text-stone-400 text-sm">
          <span>5 Likes</span>
          <span>3 Comments</span>
        </div>
      </div>

      <!-- Post 2 -->
      <div class="bg-stone-50 dark:bg-stone-700 p-4 rounded-lg shadow-sm">
        <div class="flex items-center mb-3">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-stone-300 dark:border-stone-600">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">Jane Smith</p>
            <p class="text-sm text-stone-500 dark:text-stone-400">Yesterday</p>
          </div>
        </div>
        <p class="text-stone-700 dark:text-stone-300 mb-3">Looking for collaborators on an exciting new open-source project. Anyone interested in web development?</p>
        <div class="flex justify-between text-stone-500 dark:text-stone-400 text-sm">
          <span>12 Likes</span>
          <span>7 Comments</span>
        </div>
      </div>

      <!-- Post 3 -->
      <div class="bg-stone-50 dark:bg-stone-700 p-4 rounded-lg shadow-sm">
        <div class="flex items-center mb-3">
          <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-stone-300 dark:border-stone-600">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">Peter Jones</p>
            <p class="text-sm text-stone-500 dark:text-stone-400">3 days ago</p>
          </div>
        </div>
        <p class="text-stone-700 dark:text-stone-300 mb-3">Just launched my new portfolio! Check it out and let me know what you think. [Link to portfolio]</p>
        <div class="flex justify-between text-stone-500 dark:text-stone-400 text-sm">
          <span>8 Likes</span>
          <span>2 Comments</span>
        </div>
      </div>
    </div>
  </div>
</div>

Two-Factor Authentication Component

A simple two-factor authentication component with Material Design aesthetics, analogous color scheme, and responsive dark theme support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div
      class="absolute inset-0 bg-gradient-to-r from-cyan-400 to-light-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"
    ></div>
    <div class="relative px-4 py-10 bg-white dark:bg-gray-800 shadow-lg sm:rounded-3xl sm:p-20">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Two-Factor Authentication</h1>
        </div>
        <div class="divide-y divide-gray-200">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 dark:text-gray-300 sm:text-lg sm:leading-7">
            <p>Please enter the 6-digit code sent to your device.</p>
            <div class="relative">
              <input
                autocomplete="off"
                id="code"
                name="code"
                type="text"
                class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 focus:outline-none focus:borer-rose-600"
                placeholder="XXXXXX"
                maxlength="6"
              />
              <label
                for="code"
                class="absolute left-0 -top-3.5 text-gray-600 dark:text-gray-400 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-440 peer-placeholder-shown:top-2 transition-all"
                >Verification Code</label
              >
            </div>
            <p class="text-xs text-gray-500 dark:text-gray-400">Can't find your code? Check your spam folder.</p>
          </div>
          <div class="pt-6 text-base leading-6 space-y-4 sm:text-lg sm:leading-7">
            <button
              class="bg-cyan-500 dark:bg-cyan-600 text-white rounded-md px-6 py-2 hover:bg-cyan-600 dark:hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"
            >
              Verify
            </button>
            <a href="#" class="ml-4 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
              >Resend Code</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 136 137 138 139 140 ... 335