All Components

Browse all available Tailwind CSS components

RetroSearchBox

Retro/Vintage Search Box with 80s/90s aesthetics, responsive, dark mode support.

                <div class="max-w-md mx-auto">
  <div class="relative">
    <input type="text" class="w-full py-3 px-4 pr-10 text-sm text-gray-900 placeholder-gray-600 bg-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent border-2 border-gray-400 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:border-gray-600 dark:focus:ring-purple-400" placeholder="Search...">
    <svg class="absolute right-3 top-3 w-5 h-5 text-gray-600 dark:text-gray-400" 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>
  </div>
</div>

Retro Vintage Mega Menu

A responsive mega menu component designed in a retro/vintage style inspired by the 80s and 90s aesthetics, featuring dark theme support and placeholder images.

Open Preview

                <nav class="bg-gray-800 text-white p-4 dark:bg-gray-900">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-2xl font-bold">
      Retro Menu
    </div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="hover:text-gray-400 transition duration-200">Home</a>
      <a href="#" class="hover:text-gray-400 transition duration-200">About</a>
      <a href="#" class="hover:text-gray-400 transition duration-200">Services</a>
      <a href="#" class="hover:text-gray-400 transition duration-200">Contact</a>
      <div class="relative group">
        <button class="hover:text-gray-400 transition duration-200">
          More
        </button>
        <div class="absolute left-0 hidden bg-gray-800 text-white group-hover:block transition duration-200 rounded shadow-lg">
          <div class="p-4">
            <h3 class="text-lg font-semibold">Categories</h3>
            <div class="flex flex-col mt-2 space-y-2">
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=1" alt="Category 1" class="rounded-full">
                <span>Category 1</span>
              </a>
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=2" alt="Category 2" class="rounded-full">
                <span>Category 2</span>
              </a>
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=3" alt="Category 3" class="rounded-full">
                <span>Category 3</span>
              </a>
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=4" alt="Category 4" class="rounded-full">
                <span>Category 4</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="md:hidden">
      <button class="hover:text-gray-400 transition duration-200">
        Menu
      </button>
    </div>
  </div>
</nav>

<div class="bg-gray-100 dark:bg-gray-800">
  <div class="container mx-auto p-6">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Featured Items</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/300?random=5" alt="Featured Item 1" class="w-full">
        <div class="p-4">
          <h3 class="text-lg font-bold text-gray-900 dark:text-white">Featured Item 1</h3>
          <p class="text-gray-600 dark:text-gray-300">Description of the item goes here.</p>
        </div>
      </div>
      <div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/300?random=6" alt="Featured Item 2" class="w-full">
        <div class="p-4">
          <h3 class="text-lg font-bold text-gray-900 dark:text-white">Featured Item 2</h3>
          <p class="text-gray-600 dark:text-gray-300">Description of the item goes here.</p>
        </div>
      </div>
      <div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/300?random=7" alt="Featured Item 3" class="w-full">
        <div class="p-4">
          <h3 class="text-lg font-bold text-gray-900 dark:text-white">Featured Item 3</h3>
          <p class="text-gray-600 dark:text-gray-300">Description of the item goes here.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Dark mode styles */
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #1a202c;
      color: white;
    }
  }
</style>

Success Messages Component

A responsive success messages component designed in skeuomorphic style using Tailwind CSS, providing dark theme support.

Open Preview

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-lg">
        <div class="ml-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h3>
            <p class="text-gray-600 dark:text-gray-400">Your action was successful. The data has been saved.</p>
        </div>
    </div>
    <img src="https://picsum.photos/200/100?random=1" alt="Success Image" class="rounded-lg shadow-lg w-full">
    <div class="mt-4">
        <a href="#" class="inline-block bg-blue-500 text-white rounded-lg py-2 px-4 shadow hover:bg-blue-600 transition duration-200">View Details</a>
    </div>
</div>

<!-- Dark Mode Styles -->
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
    }
</style>

Skeuomorphism-styled Notifications Component with responsive design and dark theme support. This component features a realistic, embossed look for notifications, including a subtle shadow and gleam effect. It is fully responsive and includes distinct styles for dark mode, ensuring readability and aesthetic appeal in all lighting conditions. Uses placeholder images for avatars.

Open Preview

                <div class="p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4 dark:bg-gray-800">
  <h2 class="text-xl font-bold text-gray-900 dark:text-white">Notifications</h2>

  <!-- Notification 1 -->
  <div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
    <img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/women/68.jpg" alt="Avatar">
    <div class="flex-1">
      <p class="text-sm font-medium text-gray-900 dark:text-gray-200">New message from <span class="font-semibold">Alice</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Hey, are you free to chat?</p>
    </div>
  </div>

  <!-- Notification 2 -->
  <div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
    <img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Avatar">
    <div class="flex-1">
      <p class="text-sm font-medium text-gray-900 dark:text-gray-200">You have a new follower: <span class="font-semibold">Bob</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Started following you 5m ago.</p>
    </div>
  </div>

  <!-- Notification 3 -->
  <div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
    <img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://picsum.photos/id/237/80/80" alt="Event Image">
    <div class="flex-1">
      <p class="text-sm font-medium text-gray-900 dark:text-gray-200">Event Reminder: <span class="font-semibold">Team Meeting</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Tomorrow at 10:00 AM.</p>
    </div>
  </div>

</div>

Brutalist Audio Player

A brutalist audio player component with responsive design, dark mode support, and no JavaScript.

Open Preview

                <div class="min-h-screen bg-stone-100 dark:bg-black p-8 flex items-center justify-center">
  <div class="w-full max-w-md bg-white dark:bg-stone-900 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] border-[4px] border-black dark:border-white overflow-hidden">
    <div class="p-6">
      <h3 class="text-2xl font-bold text-black dark:text-white mb-4 border-b-4 border-black dark:border-white pb-2">Now Playing</h3>
      <div class="flex items-center mb-6">
        <img class="w-16 h-16 object-cover border-4 border-black dark:border-white mr-4" src="https://picsum.photos/100/100" alt="Album Art">
        <div>
          <p class="text-xl font-semibold text-black dark:text-white">Track Title</p>
          <p class="text-black dark:text-white">Artist Name</p>
        </div>
      </div>
      <div class="mb-6">
        <div class="h-4 bg-gray-300 dark:bg-stone-700 border-2 border-black dark:border-white"></div>
      </div>
      <div class="flex justify-between text-black dark:text-white mb-6">
        <span>0:00</span>
        <span>3:45</span>
      </div>
      <div class="flex justify-center space-x-6">
        <button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Prev</button>
        <button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Play</button>
        <button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Next</button>
      </div>
    </div>
  </div>
</div>

CAPTCHA Component

Responsive CAPTCHA component with microinteractions, dark theme support, and random placeholder images.

Open Preview

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">CAPTCHA Challenge</h2>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Please verify you are not a robot.</p>
    <div class="flex items-center justify-center space-x-4 mb-4">
      <img src="https://picsum.photos/150" alt="CAPTCHA image" class="rounded">
      <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200 ease-in-out">
        Reload
      </button>
    </div>
    <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter the characters...">
    <button class="mt-4 w-full px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 transition duration-200 ease-in-out">
      Submit
    </button>
  </div>
</div>

Neumorphic Cards Component

A responsive cards component designed in the Neumorphism style with dark theme support, featuring subtle shadows and flexible layout.

Open Preview

                <div class="flex flex-wrap justify-center gap-4 p-6 bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
        <img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/200/100" alt="Card Image">
        <div class="p-4">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white">Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">This is a short description of the card content.</p>
        </div>
        <div class="flex items-center mt-4">
            <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="ml-2">
                <h3 class="text-md text-gray-800 dark:text-white">User Name</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
        <img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/201/100" alt="Card Image">
        <div class="p-4">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white">Another Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">More details about the content of this card.</p>
        </div>
        <div class="flex items-center mt-4">
            <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
            <div class="ml-2">
                <h3 class="text-md text-gray-800 dark:text-white">Another User</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
        <img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/202/100" alt="Card Image">
        <div class="p-4">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white">Third Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">Description of the card content goes here.</p>
        </div>
        <div class="flex items-center mt-4">
            <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
            <div class="ml-2">
                <h3 class="text-md text-gray-800 dark:text-white">User Three</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
            </div>
        </div>
    </div>
</div>

Like/Reaction Buttons Component

A web component that features Like and Reaction buttons designed in a skeuomorphic style, with responsive effects and dark theme support using Tailwind CSS.

Open Preview

                <div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-xs mx-auto">
    <div class="flex items-center justify-between w-full">
        <img src="https://picsum.photos/50/50?random=1" alt="Avatar" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <div class="flex space-x-2">
            <button class="flex items-center bg-gradient-to-br from-blue-400 to-blue-600 text-white py-2 px-4 rounded-lg shadow-md transform hover:scale-105 hover:shadow-xl transition-all duration-300">
                <span>👍</span> Like
            </button>
            <button class="flex items-center bg-gradient-to-br from-yellow-400 to-yellow-600 text-white py-2 px-4 rounded-lg shadow-md transform hover:scale-105 hover:shadow-xl transition-all duration-300">
                <span>❤️</span> Love
            </button>
            <button class="flex items-center bg-gradient-to-br from-red-400 to-red-600 text-white py-2 px-4 rounded-lg shadow-md transform hover:scale-105 hover:shadow-xl transition-all duration-300">
                <span>😂</span> Haha
            </button>
            <button class="flex items-center bg-gradient-to-br from-green-400 to-green-600 text-white py-2 px-4 rounded-lg shadow-md transform hover:scale-105 hover:shadow-xl transition-all duration-300">
                <span>😮</span> Wow
            </button>
        </div>
    </div>
    <div class="mt-4 text-center text-gray-700 dark:text-gray-300">
        <p class="text-sm">Tap your reaction!</p>
    </div>
</div>

Glassmorphism Grid Layout Component

Glassmorphism Grid Layout Component with responsive and dark theme support

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">Glassmorphism Grid Layout</h2>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Card 1 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum1/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 1</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum2/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 2</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
            </div>

            <!-- Card 3 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum3/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 3</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
            </div>

             <!-- Card 4 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum4/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 4</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>

            <!-- Card 5 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum5/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 5</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Sed ut perspiciatis unde omnis iste natus error sit voluptatem doloremque laudantium.</p>
                </div>
            </div>

            <!-- Card 6 -->
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden">
                 <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum6/400/300" alt="Placeholder Image">
                <div class="p-6">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Card Title 6</h3>
                    <p class="text-gray-700 dark:text-gray-300 text-base">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
                </div>
            </div>
        </div>
    </div>
</div>

3D Footer Fade-in

Responsive Footer with 3D Design elements and Dark Mode support

Open Preview

                <footer class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-10">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/3 mb-6 md:mb-0">
        <h3 class="text-xl font-bold mb-3">3D Footer</h3>
        <p class="text-sm">Explore the depths of our amazing footer. Designed with a touch of 3D for an immersive experience.</p>
      </div>
      <div class="w-full md:w-1/3 mb-6 md:mb-0">
        <h4 class="text-lg font-semibold mb-3">Quick Links</h4>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Home</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Services</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">About Us</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Contact</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/3">
        <h4 class="text-lg font-semibold mb-3">Contact Us</h4>
        <p class="text-sm">Email: [email protected]</p>
        <p class="text-sm">Phone: +1 234 567 890</p>
        <div class="flex mt-4 space-x-4">
          <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">
            <i class="fab fa-facebook-f"></i>
          </a>
          <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">
            <i class="fab fa-twitter"></i>
          </a>
          <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">
            <i class="fab fa-instagram"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="mt-8 text-center text-sm">
      <p>&copy; 2023 3D Footer. All rights reserved.</p>
    </div>
  </div>
</footer>

1 ... 203 204 205 206 207 ... 242