All Components

Browse all available Tailwind CSS components

OAuth Buttons Component

Retro/Vintage/80s/90s themed OAuth Buttons Component with Analogous color scheme, Moderate complexity, for Social Media, responsive design with dark mode support. No JS, only HTML with Tailwind classes.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Connect with:</h2>
    <div class="space-y-4">
      <button class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path d="M6.29 18.29c-.89 0-1.6-.72-1.6-1.6V3.31c0-.89.72-1.6 1.6-1.6h7.42c.89 0 1.6.72 1.6 1.6v13.38c0 .89-.72 1.6-1.6 1.6H6.29zm0-14.78v13.38h7.42V3.51H6.29zM10 14.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
        </svg>
        Sign in with Google
      </button>
      <button class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path d="M18 3.001A1.997 1.997 0 0016 2c-1.1 0-2 .9-2 2v1h-3V4c0-1.1-.9-2-2-2S7 2.9 7 4v1H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h3v-1c0-1.1.9-2 2-2s2 .9 2 2v1h3c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2h-3V4c0-1.1.9-2 2-2s2 .9 2 2v1h-3V4c0-1.1-.9-2-2-2S7 2.9 7 4v1h-3V4c0-1.1-.9-2-2-2S2 2.9 2 4v3h1c1.1 0 2 .9 2 2s-.9 2-2 2H2v3h1c1.1 0 2 .9 2 2s-.9 2-2 2H2v1h3c1.1 0 2-.9 2-2s.9-2 2-2v1h3c1.1 0 2-.9 2-2s-.9-2-2-2v1h3c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2h-3z"/>
        </svg>
        Sign in with Twitter
      </button>
      <button class="flex items-center justify-center w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path d="M10 0C4.477 0 0 4.477 0 10c0 4.991 3.643 9.185 8.438 9.87a.866.866 0 00.502-.5c.136-.97-.06-2.014-.11-2.355-.058-.387-.267-1.178 0-2.013.262-.834 1.496-.53 1.496-.53.636.443 1.486.67 2.021.96.535.289.774.85.774 1.62 0 1.18-.854 2.567-2.2 2.978-.356.105-.704.156-1.052.156-.983 0-1.94-.344-2.797-.98-1.627-1.203-2.103-3.31-.56-5.04 1.542-1.73 3.982-2.25 5.513-.97.333.27.643.616.92 1.01-.283.13-.572.248-.85.368-.578.248-1.19-.092-1.546-.408-.2.4-.55.76-.953 1.05-.5.36-1.073.59-1.642.64-.568.05-1.12-.093-1.56-.378-.44-.286-.68-1.043-.46-1.57.22-.524.87-.877 1.35-.877.642 0 1.195.21 1.66.612.464.403.783.97.953 1.57.17.6.217 1.216.147 1.838-.07.62.017 1.24-.116 1.85-.93 4.66-3.75 6.89-8.562 6.89-5.523 0-10-4.477-10-10z"/>
        </svg>
        Sign in with GitHub
      </button>
    </div>
  </div>
</div>

Social Media Data Table Monochromatic 3D Simple

A simple, monochromatic 3D design data table component for social media interfaces with dark theme support.

Open Preview

                <div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg shadow-lg overflow-hidden">  <div class="overflow-x-auto">    <table class="min-w-full bg-gray-300 dark:bg-gray-700 rounded-lg">      <thead>        <tr class="bg-gray-400 dark:bg-gray-600 text-gray-800 dark:text-gray-200 uppercase text-sm leading-normal">          <th class="py-3 px-6 text-left">User</th>          <th class="py-3 px-6 text-left">Activity</th>          <th class="py-3 px-6 text-center">Likes</th>          <th class="py-3 px-6 text-center">Comments</th>        </tr>      </thead>      <tbody class="text-gray-800 dark:text-gray-200 text-sm font-light">        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900">          <td class="py-3 px-6 text-left whitespace-nowrap">            <div class="flex items-center">              <div class="mr-2">                <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar"/>              </div>              <span>John Doe</span>            </div>          </td>          <td class="py-3 px-6 text-left">Posted a photo</td>          <td class="py-3 px-6 text-center">125</td>          <td class="py-3 px-6 text-center">36</td>        </tr>        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900">          <td class="py-3 px-6 text-left whitespace-nowrap">            <div class="flex items-center">              <div class="mr-2">                <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar"/>              </div>              <span>Jane Smith</span>            </div>          </td>          <td class="py-3 px-6 text-left">Commented on a post</td>          <td class="py-3 px-6 text-center">88</td>          <td class="py-3 px-6 text-center">12</td>        </tr>        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900">          <td class="py-3 px-6 text-left whitespace-nowrap">            <div class="flex items-center">              <div class="mr-2">                <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar"/>              </div>              <span>Peter Jones</span>            </div>          </td>          <td class="py-3 px-6 text-left">Shared a link</td>          <td class="py-3 px-6 text-center">54</td>          <td class="py-3 px-6 text-center">7</td>        </tr>        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900">          <td class="py-3 px-6 text-left whitespace-nowrap">            <div class="flex items-center">              <div class="mr-2">                <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar"/>              </div>              <span>Mary Williams</span>            </div>          </td>          <td class="py-3 px-6 text-left">Liked a photo</td>          <td class="py-3 px-6 text-center">201</td>          <td class="py-3 px-6 text-center">45</td>        </tr>      </tbody>    </table>  </div></div>

Image Lightbox Component

Minimalist Image Lightbox Component with responsive design and dark theme support for Dashboard purposes. Uses picsum.photos for images.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
    <!-- Image 1 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/1/300/200" alt="Image 1" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 2 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/2/300/200" alt="Image 2" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 3 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/3/300/200" alt="Image 3" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 4 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/4/300/200" alt="Image 4" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>
  </div>

  <!-- Lightbox Overlay (hidden by default) -->
  <div id="lightbox-overlay" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-75 hidden">
    <div class="relative">
      <img id="lightbox-image" src="" alt="Lightbox Image" class="max-w-3xl max-h-screen">
      <button id="close-lightbox" class="absolute top-4 right-4 text-white text-2xl font-bold">&times;</button>
    </div>
  </div>
</div>

Footer Component

Responsive Footer Component with Skeuomorphism style, Earth tones color scheme, and dark theme support, designed for Social Media."

Open Preview

                <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Component</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 dark:bg-gray-900">

<footer class="bg-gradient-to-b from-yellow-800 to-yellow-900 text-gray-200 py-8 dark:from-gray-800 dark:to-gray-900">
  <div class="container mx-auto px-4 flex flex-col items-center">

    <!-- Social Media Links (Skeuomorphism style) -->
    <div class="flex space-x-6 mb-6">
      <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
                        bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
                        px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
        Facebook
      </a>
      <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
                        bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
                        px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
        Twitter
      </a>
      <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
                        bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
                        px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
        Instagram
      </a>
    </div>

    <!-- Copyright Information -->
    <p class="text-sm text-gray-400 dark:text-gray-600">& Animations Copyright &copy; 2023 Your Company. All rights reserved.</p>

  </div>
</footer>

</body>
</html>

CommentsSection

A responsive, dark theme compatible Comments Section Component for e-commerce with minimalist/flat design, triadic color scheme, and complex interaction elements, built with Tailwind CSS. Uses picsum.photos and randomuser.me for demo images.

Open Preview

                <div class="container mx-auto p-4 dark:bg-gray-900 dark:text-white">
  <h2 class="text-2xl font-bold mb-6">Customer Reviews</h2>

  </div>

Comments Section Component

Comments Section Component with Neumorphism design, Triadic color scheme, and Moderate complexity for Social Media, implemented using Tailwind CSS with responsive design and dark theme support.

Open Preview

                
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comments Section</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .neumorphism {
            box-shadow: 5px 5px 10px #cbced1, -5px -5px 10px #ffffff;
        }
        .dark .neumorphism {
            box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #333333;
        }
        .neumorphism-inset {
            box-shadow: inset 5px 5px 10px #cbced1, inset -5px -5px 10px #ffffff;
        }
        .dark .neumorphism-inset {
            box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #333333;
        }
    </style>
</head>
<body class="bg-gray-200 dark:bg-gray-800 transition duration-300">
    <div class="container mx-auto p-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg p-6 neumorphism transition duration-300">
            <h2 class="text-2xl font-bold mb-4 text-center text-gray-800 dark:text-white">Comments</h2>

            <!-- Comment Input -->
            <div class="mb-6">
                <textarea class="w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white neumorphism-inset focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 transition duration-300" rows="4" placeholder="Add a comment..."></textarea>
                <button class="mt-3 w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 neumorphism transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">Post Comment</button>
            </div>

            <!-- Comment List -->
            <div class="space-y-4">
                <!-- Single Comment -->
                <div class="bg-gray-100 dark:bg-gray-600 p-4 rounded-lg neumorphism transition duration-300">
                    <div class="flex items-start space-x-4">
                        <img class="w-10 h-10 rounded-full object-cover neumorphism" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
                        <div class="flex-1">
                            <div class="flex justify-between items-center">
                                <span class="font-semibold text-gray-800 dark:text-white">Sarah Johnson</span>
                                <span class="text-sm text-gray-500 dark:text-gray-300">2 hours ago</span>
                            </div>
                            <p class="text-gray-700 dark:text-gray-200 mt-1">This is a great post! Very informative.</p>
                            <div class="flex space-x-4 mt-3">
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Like</button>
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Reply</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Single Comment -->
                <div class="bg-gray-100 dark:bg-gray-600 p-4 rounded-lg neumorphism transition duration-300">
                    <div class="flex items-start space-x-4">
                        <img class="w-10 h-10 rounded-full object-cover neumorphism" src="https://randomuser.me/api/portraits/men/76.jpg" alt="User Avatar">
                        <div class="flex-1">
                            <div class="flex justify-between items-center">
                                <span class="font-semibold text-gray-800 dark:text-white">David Miller</span>
                                <span class="text-sm text-gray-500 dark:text-gray-300">1 hour ago</span>
                            </div>
                            <p class="text-gray-700 dark:text-gray-200 mt-1">I agree! Looking forward to more content like this.</p>
                             <div class="flex space-x-4 mt-3">
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Like</button>
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Reply</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                 <!-- Reply Example -->
                 <div class="ml-14 bg-gray-200 dark:bg-gray-700 p-4 rounded-lg neumorphism transition duration-300">
                    <div class="flex items-start space-x-4">
                        <img class="w-8 h-8 rounded-full object-cover neumorphism" src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar">
                        <div class="flex-1">
                            <div class="flex justify-between items-center">
                                <span class="font-semibold text-gray-800 dark:text-white">Emily Clark</span>
                                <span class="text-sm text-gray-500 dark:text-gray-300">45 minutes ago</span>
                            </div>
                            <p class="text-gray-700 dark:text-gray-200 mt-1">Thanks David! Glad you liked it.</p>
                             <div class="flex space-x-4 mt-3">
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Like</button>
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Reply</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
</html>

Neumorphic 360 Viewer Component

A 360° Viewer Component with Neumorphism design, Triadic color scheme (example: light blue, pink, yellow-orange) and moderate complexity for social media applications. The component is responsive, supports dark mode using Tailwind classes, and uses picsum.photos for images and randomuser.me for avatars. No JavaScript is required.

Open Preview

                <div class="flex justify-center items-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">

  <!-- Neumorphic Container -->
  <div class="relative w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl shadow-xl p-6
              dark:shadow-[7px_7px_15px_#1c1c1c,-7px_-7px_15px_#343434]
              shadow-[7px_7px_15px_#a3a3a3,-7px_-7px_15px_#ffffff] md:max-w-md">

    <!-- 360 Viewer Placeholder (using an image for demonstration) -->
    <!-- In a real application, this would be a canvas or iframe with a 360 viewer library -->
    <div class="relative w-full h-64 rounded-lg overflow-hidden
                shadow-inner dark:shadow-[inset_5px_5px_10px_#1c1c1c,inset_-5px_-5px_10px_#343434]
                shadow-[inset_5px_5px_10px_#a3a3a3,inset_-5px_-5px_10px_#ffffff]">
      <img src="https://picsum.photos/600/400" alt="360 View Placeholder" class="w-full h-full object-cover">
      <!-- Example Triadic Colors for potential UI elements layered over the image -->
      <div class="absolute top-2 right-2 w-8 h-8 bg-blue-400 dark:bg-blue-600 rounded-full opacity-75"></div>
      <div class="absolute bottom-2 left-2 w-8 h-8 bg-pink-400 dark:bg-pink-600 rounded-full opacity-75"></div>
      <div class="absolute bottom-2 right-2 w-8 h-8 bg-yellow-500 dark:bg-yellow-700 rounded-full opacity-75"></div>
    </div>

    <!-- Component Title -->
    <div class="mt-6 text-center text-gray-700 dark:text-gray-300 text-xl font-semibold">
      Interactive 360° View
    </div>

    <!-- User Avatar and Info -->
    <div class="flex items-center justify-center mt-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-600">
      <div class="ml-3 text-gray-600 dark:text-gray-400">
        <p class="font-medium">John Doe</p>
        <p class="text-sm">Exploring the view</p>
      </div>
    </div>

    <!-- Interactive Buttons Placeholder -->
    <div class="flex justify-around mt-6">
      <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700
                     shadow-md dark:shadow-[5px_5px_10px_#1c1c1c,-5px_-5px_10px_#343434]
                     shadow-[5px_5px_10px_#a3a3a3,-5px_-5px_10px_#ffffff]
                     text-gray-700 dark:text-gray-300 hover:shadow-inner
                     dark:hover:shadow-[inset_2px_2px_5px_#1c1c1c,inset_-2px_-2px_5px_#343434]
                     hover:shadow-[inset_2px_2px_5px_#a3a3a3,inset_-2px_-2px_5px_#ffffff]
                     transition duration-200">
        <!-- Example Icon - Replace with a real icon -->
        <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="M15 10l4.555-4.555A1.5 1.5 0 0017.444 ..."/>
        </svg>
      </button>
      <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700
                     shadow-md dark:shadow-[5px_5px_10px_#1c1c1c,-5px_-5px_10px_#343434]
                     shadow-[5px_5px_10px_#a3a3a3,-5px_-5px_10px_#ffffff]
                     text-gray-700 dark:text-gray-300 hover:shadow-inner
                     dark:hover:shadow-[inset_2px_2px_5px_#1c1c1c,inset_-2px_-2px_5px_#343434]
                     hover:shadow-[inset_2px_2px_5px_#a3a3a3,inset_-2px_-2px_5px_#ffffff]
                     transition duration-200">
        <!-- Example Icon - Replace with a real icon -->
        <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
        </svg>
      </button>
    </div>

  </div>

</div>

Header Component

tailwind header component with 3D design, pastel color scheme, complex complexity, dashboard purpose, responsive design, and dark theme support

Open Preview

                <header class="relative w-full py-4 dark:bg-gray-800">
  <div class="container mx-auto flex justify-between items-center px-4">
    <div class="text-2xl font-bold text-gray-800 dark:text-white relative">
      Dashboard
      <span class="absolute top-0 right-0 transform translate-x-1 -translate-y-1 w-3 h-3 bg-purple-300 rounded-full animate-ping"></span>
      <span class="absolute top-0 right-0 transform translate-x-1 -translate-y-1 w-3 h-3 bg-purple-500 rounded-full"></span>
    </div>
    <nav class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105">Overview</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
    </nav>
    <div class="flex items-center space-x-4">
      <div class="relative">
        <input type="text" placeholder="Search..." class="px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-400 transition duration-300 ease-in-out">
        <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-600 dark:text-gray-300">
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </span>
      </div>
      <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-purple-200 dark:hover:bg-purple-600 transition duration-300 ease-in-out">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0a6 6 0 00-6 0m6 0h-6"></path></svg>
      </button>
      <img class="h-10 w-10 rounded-full border-2 border-purple-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    </div>
    <button class="md:hidden text-gray-600 dark:text-gray-300">
      <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
    </button>
  </div>
</header>

Loaders Component

A simple loaders component designed for dark mode social media interfaces using a monochromatic color scheme.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="flex">
        <div class="loader bg-gray-600 dark:bg-gray-400 rounded-full w-16 h-16 animate-bounce mr-4"></div>
        <div class="loader bg-gray-600 dark:bg-gray-400 rounded-full w-16 h-16 animate-bounce"></div>
    </div>
    <div class="flex flex-col items-center ml-4">
        <h2 class="text-gray-200 dark:text-gray-100 text-xl mb-2">Loading...</h2>
        <div class="flex space-x-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600 dark:border-gray-400">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600 dark:border-gray-400">
        </div>
    </div>
</div>
<style>
    @keyframes bounce {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-15px);
        }
    }
</style>

Loaders Component

A Loaders Component designed with a skeuomorphic style using a triadic color scheme for a blog or content-focused website. It features a simple layout appropriate for content consumption, incorporating dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="loader">
        <div class="rounded-lg border-4 border-blue-500 dark:border-blue-300 h-16 w-16 animate-spin"></div>
        <div class="mt-5 text-center">
            <img class="rounded-full h-12 w-12 mx-auto" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" />
            <div class="text-lg font-bold text-gray-800 dark:text-gray-200">Loading Content...</div>
        </div>
    </div>
</div>
<style>
    .loader {
        background: linear-gradient(145deg, #e6e6e6, #f0f0f0);
        border-radius: 15px;
        box-shadow: 20px 20px 60px #d1d1d1,
                    -20px -20px 60px #ffffff;
        padding: 20px;
    }
</style>

1 ... 116 117 118 119 120 ... 242

Categories

All Components