Search Components

All Components

Browse all available Tailwind CSS components

Search Box Component

A minimalist search box component designed with Tailwind CSS, featuring responsive effects and dark theme support.

                <div class="flex justify-center items-center p-4">
  <div class="w-full max-w-md">
    <form class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
      <div class="relative">
        <input type="text" class="w-full py-2 pl-10 pr-4 border border-gray-300 rounded text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Search..." />
        <svg class="absolute left-3 top-2.5 w-5 h-5 text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.5 17.5a7 7 0 100-15 7 7 0 000 15zm0 0l5 5m-5-5l-5-5"/>
        </svg>
      </div>
      <button type="submit" class="mt-4 w-full py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-500">Search</button>
    </form>
  </div>
</div>

Badges Component

A responsive badges component with a 3D design, featuring depth and dark theme support. Each badge represents a user with a name, image, and description, designed using Tailwind CSS.

Open Preview

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4">
    <!-- Badge 1 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h4>
        <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
    </div>
    <!-- Badge 2 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h4>
        <p class="text-gray-600 dark:text-gray-400">Graphic Designer</p>
    </div>
    <!-- Badge 3 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Michael Johnson</h4>
        <p class="text-gray-600 dark:text-gray-400">Product Manager</p>
    </div>
    <!-- Badge 4 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sarah Connor</h4>
        <p class="text-gray-600 dark:text-gray-400">UI/UX Designer</p>
    </div>
    <!-- Badge 5 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">David Lee</h4>
        <p class="text-gray-600 dark:text-gray-400">Content Writer</p>
    </div>
    <!-- Badge 6 -->
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar" class="rounded-full w-16 h-16 mb-2 shadow-md">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Emily Davis</h4>
        <p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
    </div>
</div>

Data Visualization Components

A Data Visualization component designed in Brutalist style with Tailwind CSS, featuring responsive layouts and dark theme support.

Open Preview

                <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Data Visualization</h2>
    <div class="flex flex-col md:flex-row space-x-0 md:space-x-4 space-y-4 md:space-y-0">
        <div class="w-full md:w-1/2 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Bar Chart</h3>
            <img src="https://picsum.photos/400/200?random=1" alt="Bar Chart Placeholder" class="w-full h-auto rounded-lg">
        </div>
        <div class="w-full md:w-1/2 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Pie Chart</h3>
            <img src="https://picsum.photos/400/200?random=2" alt="Pie Chart Placeholder" class="w-full h-auto rounded-lg">
        </div>
    </div>
    <div class="mt-4 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">User Statistics</h3>
        <div class="flex flex-wrap items-center space-x-4">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-200">User 1</span>
            </div>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-200">User 2</span>
            </div>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-200">User 3</span>
            </div>
        </div>
    </div>
</div>

Data Visualization Components

A responsive data visualization component featuring 3D design elements with support for dark themes.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center py-10">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden transform transition-all hover:scale-105 hover:shadow-2xl">
    <div class="p-6">
      <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Sales Data Visualization</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
        <div class="bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg p-4 flex flex-col items-center shadow-lg">
          <h3 class="text-xl text-white font-medium">Monthly Sales</h3>
          <img class="rounded-lg mt-2" src="https://picsum.photos/300/200?random=1" alt="Sales Chart">
          <p class="text-white mt-2">Total Sales: $15,000</p>
        </div>
        <div class="bg-gradient-to-br from-green-400 to-green-600 rounded-lg p-4 flex flex-col items-center shadow-lg">
          <h3 class="text-xl text-white font-medium">User Growth</h3>
          <img class="rounded-lg mt-2" src="https://picsum.photos/300/200?random=2" alt="User Growth Chart">
          <p class="text-white mt-2">New Users: 500</p>
        </div>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-6">
      <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Team Members</h2>
      <div class="flex justify-around mt-4">
        <div class="flex flex-col items-center">
          <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1">
          <p class="text-sm text-gray-700 dark:text-gray-300">John Doe</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Sales Manager</p>
        </div>
        <div class="flex flex-col items-center">
          <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar 2">
          <p class="text-sm text-gray-700 dark:text-gray-300">Jane Smith</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Data Analyst</p>
        </div>
      </div>
    </div>
  </div>
</div>

Social Components

A social components section designed in skeuomorphic style, with responsive effects and dark theme support.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto flex flex-col items-center">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Connect with Us</h2>
    <div class="flex flex-row space-x-4">
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/100/100?random=1" alt="Facebook" class="rounded-full mb-2">
            <h3 class="font-bold text-gray-700 dark:text-gray-200">Facebook</h3>
            <p class="text-gray-600 dark:text-gray-400">Follow us on Facebook.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/100/100?random=2" alt="Twitter" class="rounded-full mb-2">
            <h3 class="font-bold text-gray-700 dark:text-gray-200">Twitter</h3>
            <p class="text-gray-600 dark:text-gray-400">Follow us on Twitter.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/100/100?random=3" alt="Instagram" class="rounded-full mb-2">
            <h3 class="font-bold text-gray-700 dark:text-gray-200">Instagram</h3>
            <p class="text-gray-600 dark:text-gray-400">Follow us on Instagram.</p>
        </div>
    </div>
    <div class="mt-6 flex flex-col items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-16 h-16 mb-2">
        <h4 class="font-semibold text-gray-800 dark:text-white">John Doe</h4>
        <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
    </div>
</div>

Product Reviews Component

A web component displaying user reviews for a product, featuring microinteractions and dark theme support using Tailwind CSS.

Open Preview

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Product Reviews</h2>
        <div class="space-y-4">
            <!-- Review Item -->
            <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105 duration-300 ease-in-out">
                <div class="flex items-center mb-2">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
                    <div class="ml-3">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-300">5 stars</p>
                    </div>
                </div>
                <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">2 days ago</span>
            </div>
            <!-- Review Item -->
            <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105 duration-300 ease-in-out">
                <div class="flex items-center mb-2">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
                    <div class="ml-3">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Jane Smith</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-300">4 stars</p>
                    </div>
                </div>
                <p class="text-gray-700 dark:text-gray-300">Praesent nec nisl a purus blandit viverra. Proin nunc est, faucibus ut, ullamcorper id, dapibus id, sapien.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">5 days ago</span>
            </div>
            <!-- Review Item -->
            <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105 duration-300 ease-in-out">
                <div class="flex items-center mb-2">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
                    <div class="ml-3">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Michael Johnson</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-300">3 stars</p>
                    </div>
                </div>
                <p class="text-gray-700 dark:text-gray-300">Curabitur bibendum, felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">1 week ago</span>
            </div>
        </div>
    </div>
</div>

Infographics Component

A minimalist infographics component featuring clean spaces and minimal elements, support for responsive design and dark theme.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Infographics Title</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for statistic 1</p>
        </div>
        <div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for statistic 2</p>
        </div>
        <div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for statistic 3</p>
        </div>
    </div>
    <div class="mt-6 border-t pt-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Additional Insights</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <p class="text-gray-600 dark:text-gray-400">This is an additional insight provided by User</p>
        </div>
    </div>
</div>

Two-Factor Authentication Component

A simple and clean two-factor authentication component design using Tailwind CSS with responsive effects and dark theme support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 w-96">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Two-Factor Authentication</h2>
    <p class="text-gray-600 dark:text-gray-400 text-center mb-4">Please enter the code sent to your email.</p>
    <div class="mb-4">
      <input type="text" placeholder="Enter your code" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600" />
    </div>
    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">Verify</button>
    <div class="flex items-center justify-between mt-6">
      <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Resend Code</a>
      <a href="#" class="text-gray-500 dark:text-gray-400 hover:underline">Need Help?</a>
    </div>
    <div class="flex items-center justify-center mt-6">
      <img src="https://picsum.photos/50/50" alt="Placeholder Image" class="rounded-full shadow-md" />
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full shadow-md ml-2" />
    </div>
  </div>
</div>

Video Player Component

A responsive video player component designed with Neumorphism style, using Tailwind CSS. It features support for dark mode with subtle shadows to give a soft UI appearance.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 max-w-lg w-full">
        <div class="flex justify-center mb-4">
            <video class="rounded-lg shadow-lg" controls>
                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
            <div class="text-sm">
                <p class="text-gray-900 dark:text-white font-medium">John Doe</p>
                <p class="text-gray-500 dark:text-gray-300">Uploaded 2 days ago</p>
            </div>
        </div>
        <div class="mt-4">
            <p class="text-gray-800 dark:text-gray-300">A brief description of the video content goes here. It can detail key points or the overall theme of the video.</p>
        </div>
    </div>
</div>

Mega Menu Component

A responsive Mega Menu Component designed with Glassmorphism style, featuring frosted glass-like translucent elements with blur effects, supporting dark themes using Tailwind CSS.

Open Preview

                <div class="relative bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
    <div class="absolute inset-0 bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 backdrop-blur-md"></div>
    <nav class="relative z-10">
        <div class="container mx-auto px-4 py-6">
            <div class="flex justify-between items-center">
                <div class="text-2xl font-bold text-gray-800 dark:text-white">Brand</div>
                <div class="hidden lg:flex space-x-8">
                    <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Home</a>
                    <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">About</a>
                    <div class="relative group">
                        <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Services</a>
                        <div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-900 rounded-lg shadow-lg group-hover:block">
                            <div class="p-4">
                                <a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Web Design</a>
                                <a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">SEO Services</a>
                                <a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Marketing</a>
                            </div>
                        </div>
                    </div>
                    <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Contact</a>
                </div>
                <div class="lg:hidden">
                    <button class="text-gray-800 dark:text-white focus:outline-none">
                        <svg class="w-6 h-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 12h16m-7 6h7"/></svg>
                    </button>
                </div>
            </div>
        </div>
    </nav>
    <div class="hidden lg:block relative overflow-hidden">
        <img class="object-cover w-full h-64 opacity-50" src="https://picsum.photos/800/400" alt="Mega Menu Background">
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 p-6 rounded-lg shadow-lg">
                <h2 class="text-3xl font-bold text-gray-800 dark:text-white">Welcome to Our Services</h2>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Explore our range of services tailored for your business needs.</p>
                <a href="#" class="mt-4 inline-block bg-blue-500 text-white font-bold py-2 px-4 rounded-lg shadow hover:bg-blue-600">Get Started</a>
            </div>
        </div>
    </div>
    <footer class="text-center py-4 bg-gray-200 dark:bg-gray-700">
        <p class="text-gray-800 dark:text-white">© 2023 My Company</p>
    </footer>
</div>

1 ... 295 296 297 298 299 ... 315

Search Components

Categories

All Components