Search Components

All Components

Browse all available Tailwind CSS components

Product Reviews Component (Skeuomorphic Pastel)

A complex and responsive Product Reviews component styled with a Skeuomorphic design aesthetic using pastel colors and supporting dark mode. Features layered cards, subtle gradients, and shadows to create depth. Includes avatar, name, star rating, review text, and optional images. Uses Tailwind CSS exclusively with no JavaScript.

Open Preview

                <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-4xl bg-blue-50 dark:bg-gray-900">
    <!-- Reviews Header -->
    <div class="mb-8 text-center">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-2">Customer Reviews</h2>
        <!-- Static Average Rating - Skeuomorphic feel -->
        <div class="inline-block bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-4 py-2 shadow-md dark:shadow-xl dark:shadow-gray-950">
            <span class="text-xl font-semibold text-yellow-600 dark:text-yellow-400 mr-2">★★★★☆</span>
            <span class="text-gray-700 dark:text-gray-300 font-medium">4.5 out of 5</span>
        </div>
    </div>

    <!-- Reviews List -->
    <div class="space-y-6">
        <!-- Individual Review Card -->
        <div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
            <div class="flex items-start space-x-4 mb-4">
                <!-- Avatar - Skeuomorphic border/shadow -->
                <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Reviewer Avatar">
                <div class="flex-1">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alice Wonderland</span>
                        <!-- Star Rating - Skeuomorphic feel -->
                        <div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★★★</div>
                    </div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 15, 2023</span></p>
                </div>
            </div>

            <h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Absolutely Love This Product!</h4>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
                The quality is outstanding, and it exceeded all my expectations. It feels premium and works flawlessly. Highly recommend!
            </p>

            <!-- Review Images - Skeuomorphic border/shadow -->
            <div class="flex space-x-3 mb-4">
                <img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review1a/200/200" alt="Review Image 1">
                <img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review1b/200/200" alt="Review Image 2">
            </div>

            <!-- Static Helpful/Report buttons - Skeuomorphic feel -->
             <div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(42)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(5)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">🚩</span> Report
                </div>
            </div>
        </div>

         <!-- Individual Review Card 2 -->
         <div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
            <div class="flex items-start space-x-4 mb-4">
                <!-- Avatar - Skeuomorphic border/shadow -->
                <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Reviewer Avatar">
                <div class="flex-1">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Bob The Builder</span>
                        <!-- Star Rating - Skeuomorphic feel -->
                         <div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★★☆</div>
                    </div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 10, 2023</span></p>
                </div>
            </div>

            <h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Very Good, Minor Issue</h4>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
                Overall this product is excellent and performs well. The setup was straightforward. My only minor complaint is...
            </p>

            <!-- No images for this review -->

             <div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(18)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(2)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">🚩</span> Report
                </div>
            </div>
        </div>

        <!-- Individual Review Card 3 - Lower rating -->
         <div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
            <div class="flex items-start space-x-4 mb-4">
                <!-- Avatar - Skeuomorphic border/shadow -->
                <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/women/19.jpg" alt="Reviewer Avatar">
                <div class="flex-1">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Charlie Davis</span>
                        <!-- Star Rating - Skeuomorphic feel -->
                         <div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★☆☆</div>
                    </div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 05, 2023</span></p>
                </div>
            </div>

            <h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">It's Okay, Not What I Expected</h4>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
                The features are decent, but it feels a bit flimsy compared to the description. It gets the job done, but I wouldn't purchase it again.
            </p>

            <!-- Review Images -->
             <div class="flex space-x-3 mb-4">
                <img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review3a/200/200" alt="Review Image 1">
             </div>

             <div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(7)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(15)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">🚩</span> Report
                </div>
            </div>
        </div>
    </div>
</div>

Functional Components Component

A dashboard component with functional components using Material Design principles, an analogous color scheme, and moderate complexity. The component includes responsive design and dark theme support using Tailwind CSS. No JavaScript is included.

Open Preview

                <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Functional Components Dashboard</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* Analogous Colors (example: blue-green, blue, blue-violet) */
    /* Using shades of Tailwind's built-in colors for simplicity */
    .bg-primary {
      background-color: #437c90; /* A blue-green */
    }
    .text-primary {
      color: #437c90;
    }
    .bg-secondary {
      background-color: #325a6c; /* A bluer tone */
    }
     .text-secondary {
      color: #325a6c;
    }
    .bg-tertiary {
      background-color: #5a6c8c; /* A blue-violet */
    }
     .text-tertiary {
      color: #5a6c8c;
    }

    /* Dark Mode Styles */
    .dark .bg-primary {
      background-color: #1e3a48;
    }
    .dark .text-primary {
      color: #1e3a48;
    }
     .dark .bg-secondary {
      background-color: #152c3a;
    }
     .dark .text-secondary {
      color: #152c3a;
    }
     .dark .bg-tertiary {
      background-color: #2c3a4e;
    }
     .dark .text-tertiary {
      color: #2c3a4e;
    }

    /* Material Design Shadows (using Tailwind's built-in shadows) */
    .shadow-material {
      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    }
    .dark .shadow-material {
       box-shadow: 0 3px 1px -2px rgba(255, 255, 255, 0.2), 0 2px 2px 0 rgba(255, 255, 255, 0.14), 0 1px 5px 0 rgba(255, 255, 255, 0.12);
    }

  </style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4">

  <div class="container mx-auto">

    <!-- Header -->
    <header class="flex justify-between items-center mb-8">
      <h1 class="text-2xl font-bold">Dashboard</h1>
      <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
        <!-- Dark mode toggle - functional implementation would require JS -->
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
        </svg>
      </button>
    </header>

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

      <!-- Component 1: Stats Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-primary mb-2">Total Users</h2>
        <p class="text-3xl font-bold">1,234</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">+10% from last month</p>
      </div>

      <!-- Component 2: Recent Activity Feed -->
      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-secondary mb-4">Recent Activity</h2>
        <ul>
          <li class="flex items-center mb-3">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
            <div>
              <p class="text-sm font-semibold">John Doe</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Added new report</p>
            </div>
          </li>
           <li class="flex items-center mb-3">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
            <div>
              <p class="text-sm font-semibold">Jane Smith</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Updated user profile</p>
            </div>
          </li>
           <li class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
            <div>
              <p class="text-sm font-semibold">Peter Jones</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Generated weekly summary</p>
            </div>
          </li>
        </ul>
      </div>

      <!-- Component 3: Quick Links -->
      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-tertiary mb-4">Quick Links</h2>
        <div class="grid grid-cols-2 gap-4">
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Settings</a>
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Reports</a>
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Analytics</a>
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Users</a>
        </div>
      </div>

      <!-- Component 4: Image Card (example) -->
       <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-primary mb-4">Data Visualization (Placeholder)</h2>
        <img src="https://picsum.photos/seed/dashboard/400/200" alt="Placeholder Image" class="rounded-md w-full">
      </div>

       <!-- Component 5: Another Stats Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-secondary mb-2">Revenue</h2>
        <p class="text-3xl font-bold">$56,789</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">-5% from last quarter</p>
      </div>

       <!-- Component 6: Text Block (example) -->
       <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
        <h2 class="text-lg font-semibold text-tertiary mb-4">Notes</h2>
        <p class="text-sm text-gray-700 dark:text-gray-300">This is a placeholder for important notes or messages for the user.</p>
      </div>

    </div>

  </div>

  <!-- Basic Dark Mode Toggle Script (for demonstration, not a full implementation) -->
  <script>
    const toggleButton = document.querySelector('header button');
    const html = document.querySelector('html');

    toggleButton.addEventListener('click', () => {
      html.classList.toggle('dark');
    });
  </script>

</body>
</html>

Content Display Components

A responsive social media content display component designed in skeuomorphic style with pastel colors, featuring multiple interactive elements and dark mode support.

Open Preview

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 max-w-lg mx-auto">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
        </div>
    </div>
    <p class="text-gray-800 dark:text-gray-300 mb-4">This is an example of skeuomorphic design in a social media component. The layout mimics a real-world interaction device.</p>
    <img src="https://picsum.photos/400/200?random=1" alt="Content Image" class="rounded-lg mb-4 shadow-lg">
    <div class="flex justify-between items-center">
        <button class="bg-pink-300 dark:bg-pink-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-pink-400 dark:hover:bg-pink-500 transition">Like</button>
        <button class="bg-blue-300 dark:bg-blue-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-blue-400 dark:hover:bg-blue-500 transition">Comment</button>
        <button class="bg-green-300 dark:bg-green-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-green-400 dark:hover:bg-green-500 transition">Share</button>
    </div>
</div>

Social Media Form Component with 3D Design and Vibrant Colors

A complex, responsive, and vibrant 3D-inspired social media form component with dark theme support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-600 to-pink-500 dark:from-gray-900 dark:to-black p-10">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden md:max-w-2xl">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/social/400/600" alt="Social media background">
      </div>
      <div class="p-8 flex flex-col justify-between">
        <div>
          <div class="uppercase tracking-wide text-sm text-indigo-700 dark:text-indigo-400 font-semibold">Connect & Share</div>
          <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Join the Conversation</a>
          <p class="mt-2 text-gray-600 dark:text-gray-400 text-sm">Enter your details below to connect with friends and family and share your moments.</p>
        </div>
        <div class="mt-6">
          <form>
            <div class="mb-4">
              <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="username">
                Username
              </label>
              <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Choose a username">
            </div>
            <div class="mb-4">
              <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="email">
                Email
              </label>
              <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="Enter your email">
            </div>
            <div class="mb-6">
              <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="password">
                Password
              </label>
              <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="Create a password">
            </div>
            <div class="flex items-center justify-between">
              <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline transform transition duration-500 hover:scale-105" type="button">
                Sign Up
              </button>
              <a class="inline-block align-baseline font-bold text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600" href="#">
                Forgot Password?
              </a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

Checkout Form Component

A complex, responsive Checkout Form Component with Material Design principles, grayscale color scheme, and dark mode support, implemented using Tailwind CSS for social media interfaces.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 w-full max-w-md">
    <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Checkout</h2>
    <form>
      <div class="mb-4">
        <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Full Name</label>
        <input type="text" id="name" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
      </div>
      <div class="mb-4">
        <label for="card-number" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Card Number</label>
        <input type="text" id="card-number" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
      </div>
      <div class="grid grid-cols-2 gap-4 mb-4">
        <div>
          <label for="expiry-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Expiry Date</label>
          <input type="text" id="expiry-date" placeholder="MM/YY" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
        </div>
        <div>
          <label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CVV</label>
          <input type="text" id="cvv" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
        </div>
      </div>
      <div class="mb-6">
        <label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Country</label>
        <select id="country" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
          <option value="">Select Country</option>
          <option value="us">United States</option>
          <option value="ca">Canada</option>
          <!-- Add more countries as needed -->
        </select>
      </div>
      <button type="submit" class="w-full bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 py-2 px-4 rounded-md shadow-md hover:bg-gray-900 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">Pay Now</button>
    </form>
  </div>
</div>

Skeuomorphic Earth Tone Social Share Buttons

A set of social share buttons styled in a Skeuomorphic design using earth tones. Features include responsive layout and dark mode support with interactive press effects on hover, built purely with HTML and Tailwind CSS classes.

Open Preview

                <div class="flex justify-center p-6 bg-stone-100 dark:bg-stone-900 min-h-screen">
  <div class="flex space-x-4 md:space-x-6 flex-wrap justify-center w-full max-w-lg gap-y-4">

    <!-- Facebook Button -->
    <a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
                      bg-neutral-200 text-stone-700
                      shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
                      dark:bg-neutral-800 dark:text-stone-300
                      dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
                      transition transform duration-200 ease-in-out
                      hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
                      dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
        aria-label="Share on Facebook">
       <svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.675 0H1.325C0.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.691v-3.621h3.129V8.41c0-3.11 1.893-4.82 4.66-4.82 1.314 0 2.417.097 2.745.141v3.208h-1.949c-1.534 0-1.841.724-1.841 1.793v2.358h3.56L19.524 14.71h-3.154V24h6.294c0.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg>
    </a>

    <!-- Twitter Button -->
    <a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
                      bg-neutral-200 text-stone-700
                      shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
                      dark:bg-neutral-800 dark:text-stone-300
                      dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
                      transition transform duration-200 ease-in-out
                      hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
                      dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
        aria-label="Share on Twitter">
      <svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.716 11.492H16.35l-5.21-6.893L6.66 21.75H3.34l8.495-9.52-8.046-9.488h7.56zm-.493 1.374L5.207 21.02h3.75l9.138-12.874h-7.81z"/></svg>
    </a>

    <!-- Instagram Button -->
    <a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
                      bg-neutral-200 text-stone-700
                      shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
                      dark:bg-neutral-800 dark:text-stone-300
                      dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
                      transition transform duration-200 ease-in-out
                      hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
                      dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
        aria-label="Share on Instagram">
      <svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C8.74 0 8.333.014 7.053.072 5.775.132 4.9.333 4.073.668c-.844.331-1.592.726-2.34 1.473S.998 3.228.668 4.073c-.333.836-.534 1.701-.592 2.98-.058 1.28-.072 1.69-.072 4.9s.014 3.62.072 4.9c.058 1.278.259 2.144.592 2.977.33.844.726 1.592 1.473 2.34s1.5.998 2.34 1.473c.835.331 1.7.534 2.978.592 1.28.058 1.689.072 4.9.072s3.62.014 4.9-.072c1.277-.058 2.144-.259 2.977-.592.844-.33 1.592-.726 2.34-1.473s.998-1.5 1.473-2.34c.331-.836.534-1.7.592-2.977.058-1.28.072-1.69.072-4.9s-.014-3.62-.072-4.9c-.058-1.278-.259-2.144-.592-2.977-.33-.844-.726-1.592-1.473-2.34S20.772.998 19.927.668c-.835-.333-1.7-.534-2.978-.592C16.38.014 15.97.001 12 0zm0 2.16c3.203 0 3.585.016 4.85.074 1.05.049 1.791.217 2.41.465.639.254 1.129.596 1.597 1.064s.81 1.007 1.063 1.645c.248.62.416 1.36.465 2.41.058 1.264.074 1.646.074 4.85s-.016 3.585-.074 4.85c-.049 1.05-.217 1.791-.465 2.41-.254.639-.596 1.129-1.064 1.597s-1.007.81-1.645 1.063c-.62.248-1.36.416-2.41.465-1.264.058-1.646.074-4.85.074s-3.585-.016-4.85-.074c-1.05-.049-1.791-.217-2.41-.465-.639-.254-1.129-.596-1.597-1.064s-.81-1.007-1.063-1.645c-.248-.62-.416-1.36-.465-2.41C2.16 15.585 2.14 15.203 2.14 12s.016-3.585.074-4.85c.049-1.05.217-1.791.465-2.41.254-.639.596-1.129 1.064-1.597S3.29 3.361 3.929 3.106c.62-.248 1.36-.416 2.41-.465C8.414 2.16 8.796 2.14 12 2.14zm0 3.615a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm0 2.16a2.34 2.34 0 1 1 0 4.68 2.34 2.34 0 0 1 0-4.68z"/></svg>
    </a>

    <!-- LinkedIn Button -->
    <a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
                      bg-neutral-200 text-stone-700
                      shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
                      dark:bg-neutral-800 dark:text-stone-300
                      dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
                      transition transform duration-200 ease-in-out
                      hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
                      dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
        aria-label="Share on LinkedIn">
      <svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.04-.826-4.068c-.796-1.029-1.835-1.675-3.305-1.675c-2.137 0-3.205 1.578-3.205 4.125v5.187H6.88v-9.45h3.388v1.452h.046c.447-.863 1.607-1.77 3.29-1.77C17.357 8.116 18 9.769 18 12.15v8.302zM3.633 7.514c-1.002-.02-1.28.737-1.28 1.618c0 .88.282 1.617 1.28 1.637c.998.02 1.28-.737 1.28-1.617c0-.88-.282-1.618-1.28-1.638zm-.013-2.5c-1.328 0-2.158.891-2.158 2.035c0 1.143.83 2.035 2.148 2.035c1.328 0 2.157-.891 2.157-2.035c-.014-1.144-.83-2.035-2.147-2.035h.01zM6.88 20.452H3.633V11h3.25zm14.104 0h-3.554v-5.569c0-1.328-.027-3.04-.826-4.068c-.796-1.029-1.835-1.675-3.305-1.675c-2.137 0-3.205 1.578-3.205 4.125v5.187H6.88v-9.45h3.388v1.452h.046c.447-.863 1.607-1.77 3.29-1.77C17.357 8.116 18 9.769 18 12.15v8.302z"/></svg>
    </a>

  </div>
</div>

Product Comparison Component

Minimalist/Flat Design, Grayscale color scheme, complex product comparison component for social media with responsive design and dark theme support.

Open Preview

                <div class="bg-white dark:bg-gray-900 py-12">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="lg:text-center">
      <h2 class="text-base text-gray-600 dark:text-gray-300 font-semibold tracking-wide uppercase">Compare</h2>
      <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">Product Comparison</p>
    </div>

    <div class="mt-10">
      <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
        <!-- Product 1 -->
        <div class="pt-6">
          <div class="flow-root bg-gray-50 dark:bg-gray-800 rounded-lg px-6 pb-8">
            <div class="-mt-6">
              <div>
                <span class="inline-flex items-center justify-center p-3 bg-black rounded-md shadow-lg">
                  <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                </span>
              </div>
              <h3 class="mt-8 text-lg font-medium tracking-tight text-gray-900 dark:text-white">Product A</h3>
              <p class="mt-5 text-base text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              <div class="mt-5">
                <img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/seed/producta/600/400" alt="Product A">
              </div>
              <ul class="mt-5 space-y-2 text-gray-500 dark:text-gray-400">
                <li>Feature 1</li>
                <li>Feature 2</li>
                <li>Feature 3</li>
              </ul>
              <div class="mt-6">
                <button class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-black hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">Learn More</button>
              </div>
            </div>
          </div>
        </div>

        <!-- Product 2 -->
        <div class="pt-6">
          <div class="flow-root bg-gray-50 dark:bg-gray-800 rounded-lg px-6 pb-8">
            <div class="-mt-6">
              <div>
                <span class="inline-flex items-center justify-center p-3 bg-black rounded-md shadow-lg">
                  <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                </span>
              </div>
              <h3 class="mt-8 text-lg font-medium tracking-tight text-gray-900 dark:text-white">Product B</h3>
              <p class="mt-5 text-base text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
               <div class="mt-5">
                <img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/seed/productb/600/400" alt="Product B">
              </div>
               <ul class="mt-5 space-y-2 text-gray-500 dark:text-gray-400">
                <li>Feature A</li>
                <li>Feature B</li>
                <li>Feature C</li>
              </ul>
              <div class="mt-6">
                <button class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-black hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">Learn More</button>
              </div>
            </div>
          </div>
        </div>

        <!-- Product 3 -->
        <div class="pt-6">
          <div class="flow-root bg-gray-50 dark:bg-gray-800 rounded-lg px-6 pb-8">
            <div class="-mt-6">
              <div>
                <span class="inline-flex items-center justify-center p-3 bg-black rounded-md shadow-lg">
                  <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                </span>
              </div>
              <h3 class="mt-8 text-lg font-medium tracking-tight text-gray-900 dark:text-white">Product C</h3>
              <p class="mt-5 text-base text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
               <div class="mt-5">
                <img class="h-48 w-full object-cover rounded-md" src="https://picsum.photos/seed/productc/600/400" alt="Product C">
              </div>
               <ul class="mt-5 space-y-2 text-gray-500 dark:text-gray-400">
                <li>Feature X</li>
                <li>Feature Y</li>
                <li>Feature Z</li>
              </ul>
              <div class="mt-6">
                <button class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-black hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">Learn More</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mt-12 lg:grid lg:grid-cols-3 lg:gap-8">
        <div class="sm:col-span-3">
            <div class="px-4 py-5 sm:px-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Comparison Table</h3>
            </div>
            <div class="border-t border-gray-200 dark:border-gray-700 px-4 py-5 sm:p-0">
                <dl class="sm:divide-y sm:divide-gray-200 dark:sm:divide-gray-700">
                    <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Feature 1 / Feature A / Feature X</dt>
                        <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">Description of feature comparison.</dd>
                    </div>
                    <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Feature 2 / Feature B / Feature Y</dt>
                        <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">Description of feature comparison.</dd>
                    </div>
                     <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Feature 3 / Feature C / Feature Z</dt>
                        <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:mt-0 sm:col-span-2">Description of feature comparison.</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>

  </div>
</div>

Comments Section Component

A responsive comments section component designed for business/corporate websites, featuring engaging animations, vibrant colors, and dark mode support.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-shadow duration-300 hover:shadow-xl">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Comments</h2>
    <div class="space-y-4">
        <div class="flex items-start gap-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full"> 
            <div class="flex-1">
                <div class="bg-blue-100 dark:bg-blue-500 p-4 rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105">
                    <p class="text-gray-700 dark:text-gray-200">This is a fantastic article! I learned so much.</p>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">- John Doe</span>
            </div>
        </div>
        <div class="flex items-start gap-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            <div class="flex-1">
                <div class="bg-green-100 dark:bg-green-500 p-4 rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105">
                    <p class="text-gray-700 dark:text-gray-200">Great insights! Looking forward to more posts.</p>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">- Jane Smith</span>
            </div>
        </div>
        <div class="flex items-start gap-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            <div class="flex-1">
                <div class="bg-red-100 dark:bg-red-500 p-4 rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105">
                    <p class="text-gray-700 dark:text-gray-200">I completely agree with this perspective. Well said!</p>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">- Tom Brown</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Leave a Comment:</h3>
        <textarea class="w-full p-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 resize-none" rows="4" placeholder="Type your message here..."></textarea>
        <button class="mt-4 w-full bg-blue-500 text-white font-semibold py-2 rounded-lg transition-colors duration-300 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500">Submit</button>
    </div>
</div>

Data Visualization Components Component

Glassmorphism Data Visualization Component for Blog/Content

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 py-12 px-4 min-h-screen flex items-center justify-center">
    <div class="max-w-7xl w-full mx-auto">
        <div class="glass rounded-xl p-8 md:p-12 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
            <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-8 text-center">Site Traffic Overview</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Traffic Source Breakdown -->
                <div class="glass rounded-xl p-6 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Traffic Source Breakdown</h3>
                    <div class="h-48 flex items-center justify-center">
                        <!-- Placeholder for Pie Chart -->
                        <div class="w-32 h-32 rounded-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 animate-pulse"></div>
                    </div>
                    <ul class="mt-4 space-y-2 text-gray-800 dark:text-gray-200">
                        <li>Direct: <span class="font-semibold">35%</span></li>
                        <li>Search Engines: <span class="font-semibold">45%</span></li>
                        <li>Referral: <span class="font-semibold">15%</span></li>
                        <li>Social Media: <span class="font-semibold">5%</span></li>
                    </ul>
                </div>

                <!-- Page Views Over Time -->
                <div class="glass rounded-xl p-6 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Page Views Over Time</h3>
                    <div class="h-48 flex items-center justify-center">
                        <!-- Placeholder for Line Chart -->
                        <div class="w-full h-32 bg-gradient-to-r from-green-500 via-yellow-500 to-red-500 animate-pulse"></div>
                    </div>
                    <div class="mt-4 text-center text-gray-800 dark:text-gray-200">
                        Daily Average: <span class="font-semibold">1,200</span>
                    </div>
                </div>
            </div>

            <!-- Popular Articles -->
            <div class="glass rounded-xl p-6 md:p-8 mt-8 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Popular Articles</h3>
                <div class="space-y-4">

                    <div class="flex items-center glass rounded-xl p-4 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                        <img src="https://picsum.photos/80/80?random=1" alt="Article thumbnail" class="w-16 h-16 object-cover rounded-lg mr-4">
                        <div>
                            <h4 class="font-semibold text-gray-800 dark:text-white">How to Master Tailwind CSS</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Views: <span class="font-semibold">5,400</span></p>
                        </div>
                    </div>

                    <div class="flex items-center glass rounded-xl p-4 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                        <img src="https://picsum.photos/80/80?random=2" alt="Article thumbnail" class="w-16 h-16 object-cover rounded-lg mr-4">
                        <div>
                            <h4 class="font-semibold text-gray-800 dark:text-white">Getting Started with Glassmorphism</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Views: <span class="font-semibold">3,800</span></p>
                        </div>
                    </div>

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

<style>
/* Add a basic glassmorphism effect using a pseudo-element or backdrop-filter */
.glass {
    /* Example glassmorphism styles */
    /* The backdrop-filter and background-color with opacity are key */
    /* backdrop-filter: blur(10px); */
    /* background-color: rgba(255, 255, 255, 0.1); */
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}
</style>

Shopping Cart Component

A complex, responsive Shopping Cart Component with Grayscale color scheme, designed for a Blog/Content purpose. Features microinteractions using Tailwind CSS, with dark mode support and no JavaScript.

Open Preview

                <div class="container mx-auto p-4 dark:bg-gray-900">
  <h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Shopping Cart</h1>

  </div>

1 ... 190 191 192 193 194 ... 335

Search Components

Categories

All Components