Search Components

All Components

Browse all available Tailwind CSS components

Infographics Component

Infographics Component with Brutalism style, high contrast, unusual layout, responsive with dark mode support using tailwind css

Open Preview

                <section class="bg-white dark:bg-stone-900 text-stone-900 dark:text-white p-8 sm:p-12 md:p-16 lg:p-20 font-mono">
  <div class="container mx-auto">
    <h2 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-12 uppercase border-b-8 border-stone-900 dark:border-white pb-4">Infographic Insights</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
        <h3 class="text-2xl font-bold mb-4 uppercase">Data Point 1</h3>
        <p class="text-lg mb-4">Quis at aute sint partem non, sed literis minim ea.</p>
        <div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">123</div>
      </div>
      <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
        <h3 class="text-2xl font-bold mb-4 uppercase">Data Point 2</h3>
        <p class="text-lg mb-4">Esse cillum fore consequat, nam magna tempor a fore quam.</p>
        <div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">45%</div>
      </div>
      <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:scale-105">
        <h3 class="text-2xl font-bold mb-4 uppercase">Data Point 3</h3>
        <p class="text-lg mb-4">Do eu lorem ne nescius, ex ut laboris constructio.</p>
        <div class="text-5xl font-bold text-right text-red-700 dark:text-yellow-400">$999</div>
      </div>
    </div>
    <div class="mt-12 grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white flex items-center transform transition-transform duration-300 hover:rotate-2">
            <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="w-16 h-16 rounded-none mr-6 border-4 border-stone-900 dark:border-white">
            <div>
                <h3 class="text-2xl font-bold mb-2 uppercase">Key Stat with Image</h3>
                <p class="text-lg">Non pariatur quae ne amet, admodum non expetendis.</p>
                 <div class="text-5xl font-bold text-left text-red-700 dark:text-yellow-400 mt-4">7890</div>
            </div>
        </div>
         <div class="bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white transform transition-transform duration-300 hover:-rotate-2">
            <h3 class="text-2xl font-bold mb-4 uppercase">Image Highlight</h3>
            <img src="https://picsum.photos/id/237/400/250" alt="Placeholder Image" class="w-full h-64 object-cover border-4 border-stone-900 dark:border-white mb-4">
            <p class="text-lg">Id sint singulis aut ullamco. lorem nescius aut cupidatat.</p>
        </div>
    </div>
     <div class="mt-12 bg-gray-300 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-white overflow-x-auto">
        <h3 class="text-2xl font-bold mb-4 uppercase">Scrolling Data</h3>
        <div class="flex space-x-8">
            <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">1024</div>
                <p class="text-lg">Specific insight one</p>
            </div>
             <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">2048</div>
                <p class="text-lg">Specific insight two</p>
            </div>
             <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">4096</div>
                <p class="text-lg">Specific insight three</p>
            </div>
             <div class="flex-none w-64">
                <div class="text-4xl font-bold text-red-700 dark:text-yellow-400 mb-2">8192</div>
                <p class="text-lg">Specific insight four</p>
            </div>
        </div>
    </div>
  </div>
</section>

Session Timeout Alert Component

A Session Timeout Alert Component designed in a brutalist style with raw, bold aesthetics, high contrast, and responsive effects. This component supports dark theme using Tailwind CSS styling and utilizes placeholder images from picsum.photos and randomuser.me.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg text-center p-6 max-w-md w-full">
        <img src="https://picsum.photos/200/100?random=1" alt="Session Timeout" class="w-full h-24 rounded-md object-cover mb-4">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Session Timeout Warning</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Your session is about to expire due to inactivity. Please save your work and log in again to continue.</p>
        <div class="flex justify-between mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-400 dark:border-gray-600">
            <p class="text-base font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
        </div>
        <div class="flex space-x-4">
            <button class="px-4 py-2 bg-blue-600 text-white font-bold rounded hover:bg-blue-700 transition duration-200">Stay Logged In</button>
            <button class="px-4 py-2 bg-red-600 text-white font-bold rounded hover:bg-red-700 transition duration-200">Log Out</button>
        </div>
    </div>
</div>

Footer Component

A Footer component designed in a Neumorphism style, supporting responsive effects and dark themes using Tailwind CSS.

Open Preview

                <footer class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <div class="container mx-auto">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">About Us</h5>
                <p class="text-gray-600 dark:text-gray-400">We are dedicated to providing the best service to our customers.</p>
            </div>
            <div class="mb-4 md:mb-0">
                <h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Us</h5>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">Facebook</a>
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">Twitter</a>
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">Instagram</a>
                </div>
            </div>
            <div class="mb-4 md:mb-0">
                <h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Contact Us</h5>
                <p class="text-gray-600 dark:text-gray-400">Email: [email protected]</p>
            </div>
            <div class="hidden md:block">
                <img src="https://picsum.photos/50" alt="Placeholder" class="rounded-full w-10 h-10" />
            </div>
        </div>
        <div class="text-center mt-6">
            <p class="text-gray-600 dark:text-gray-400">© 2023 Company. All Rights Reserved.</p>
        </div>
    </div>
</footer>

Data Tables Component

A responsive data tables component with a glassmorphism design, featuring translucent frosted glass-like elements, blur effects, and support for dark mode.

Open Preview

                <div class="container mx-auto my-10 p-5 bg-white bg-opacity-30 backdrop-blur-lg shadow-lg rounded-lg dark:bg-gray-800 dark:bg-opacity-30">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center">Data Tables</h2>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-600">
            <thead class="bg-gray-50 dark:bg-gray-700">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avatar</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Profile Image</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-600">
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">1</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">John Doe</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/200/300" alt="Profile Image"></td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">Jane Smith</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar"></td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/201/300" alt="Profile Image"></td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">3</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">Michael Johnson</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar"></td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/202/300" alt="Profile Image"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<style>
    /* Additional styles for glassmorphism */
    body {
        background: rgb(239, 246, 255);
        background: linear-gradient(90deg, rgba(239, 246, 255, 1) 0%, rgba(255, 255, 255, 0.75) 100%);
    }
    .bg-white {
        background: rgba(255, 255, 255, 0.9) !important;
    }
    /* Dark mode adjustments */
    .dark .bg-white {
        background: rgba(31, 41, 55, 0.7) !important;
    }
</style>

Grid Layout Component

A responsive grid layout component following Material Design principles, featuring shadow effects and dark mode support, using Tailwind CSS.

Open Preview

                <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Material Design Grid Layout</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?2" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?3" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?4" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 4</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?5" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 5</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?6" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 6</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
    </div>
</div>

<!-- Tailwind CSS styles for dark mode support -->
<style>
    @media (prefers-color-scheme: dark) {
        .dark .bg-white { background-color: #1f2937; /* Gray-800 */ }
        .dark .text-gray-700 { color: #e5e7eb; /* Gray-200 */ }
        .dark .text-gray-600 { color: #d1d5db; /* Gray-400 */ }
    }
</style>

Glassmorphism Sidebar Navigation

A responsive Sidebar Navigation Component with Glassmorphism design, dark mode support, and using Tailwind CSS. Features frosted glass-like translucent elements with blur effects.

Open Preview

                ```html
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">

    <!-- Backdrop -->
    <div id="sidebarBackdrop" class="fixed inset-0 z-10 bg-black opacity-0 md:hidden" onclick="closeSidebar()"></div>

    <!-- Sidebar -->
    <div id="sidebar" class="w-64 space-y-6 py-7 px-2 fixed inset-y-0 left-0 transform -translate-x-full md:translate-x-0 transition duration-200 ease-in-out z-20
                bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-10 backdrop-filter backdrop-blur-lg dark:text-white text-gray-900">

        <!-- Logo -->
        <a class="text-white flex items-center space-x-2 px-4" href="#">
            <svg class="w-8 h-8" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.024 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.024 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.024 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.024 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.024 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.516.315 1.208.1 1.724-.51z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
            <span class="text-2xl font-extrabold">TailwindCSS</span>
        </a>

        <!-- Nav -->
        <nav>
            <a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">Home</a>
            <a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">About</a>
            <a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">Services</a>
            <a class="block py-2.5 px-4 rounded transition duration-200 hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-20" href="#">Contact</a>
        </nav>
    </div>

    <!-- Content -->
    <div class="flex-1 p-10 text-2xl font-bold">
        <button onclick="openSidebar()" class="md:hidden text-gray-500 dark:text-gray-400 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 12h16M4 18h16"></path></svg>
        </button>
        Content goes here...
    </div>

</div>

<style>
    /* For Glassmorphism effect in dark mode */
    .dark .backdrop-blur-lg {
        backdrop-filter: blur(16px);
    }

    /* For Glassmorphism effect in light mode */
    .backdrop-blur-lg {
        backdrop-filter: blur(16px);
    }
</style>

<script>
    function openSidebar() {
        document.getElementById('sidebar').classList.remove('-translate-x-full');
        document.getElementById('sidebarBackdrop').classList.remove('opacity-0');
        document.getElementById('sidebarBackdrop').classList.add('opacity-50');
    }

    function closeSidebar() {
        document.getElementById('sidebar').classList.add('-translate-x-full');
        document.getElementById('sidebarBackdrop').classList.remove('opacity-50');
        document.getElementById('sidebarBackdrop').classList.add('opacity-0');
    }
</script>
```

User Profiles Component

A responsive User Profile component with Neumorphism design and dark mode support.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-4">
  <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-6 space-y-6">
    <div class="flex flex-col items-center">
      <img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark" src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar">
      <h2 class="mt-4 text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-300">Software Engineer</p>
    </div>
    
    <div class="border-t border-b border-gray-300 dark:border-gray-600 py-4 space-y-4">
      <div class="flex justify-between text-gray-700 dark:text-gray-200">
        <span>Location:</span>
        <span>San Francisco, CA</span>
      </div>
      <div class="flex justify-between text-gray-700 dark:text-gray-200">
        <span>Joined:</span>
        <span>January 2023</span>
      </div>
      <div class="flex justify-between text-gray-700 dark:text-gray-200">
        <span>Projects:</span>
        <span>15</span>
      </div>
    </div>
    
    <div class="flex justify-around">
      <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition duration-200">
        <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 4v16m8-8H4" />
        </svg>
      </button>
      <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition duration-200">
        <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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg>
      </button>
      <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition duration-200">
        <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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4m-4 4L14 6m-6 6l2-2m0 0l2-2m-3 3L9 9" />
        </svg>
      </button>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #7c7c7c;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
   .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #7c7c7c;
  }
</style>

Navigation Components Component

A responsive navigation bar with dark mode support.

Open Preview

                <nav class="bg-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <img class="h-8 w-8" src="https://www.picsum.photos/id/237/200/300" alt="Workflow">
        </div>
        <div class="hidden md:block">
          <div class="ml-10 flex items-baseline space-x-4">
            <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>

            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>

            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>

            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>

            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Reports</a>
          </div>
        </div>
      </div>
      <div class="-mr-2 flex md:hidden">
        <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          
          <svg class="block h-6 w-6" 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="M4 6h16M4 12h16M4 18h16" />
          </svg>
          
          <svg class="hidden h-6 w-6" 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="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  
  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a>

      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>

      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>

      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>

      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a>
    </div>
  </div>
</nav>

Table of Contents Component

A responsive Table of Contents Component styled with Neumorphism using Tailwind CSS, featuring dark theme support and showing placeholder images and avatars.

Open Preview

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-md space-y-4">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Table of Contents</h2>
    <ul class="space-y-2">
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section1" class="text-lg text-gray-800 dark:text-gray-200">Section 1</a>
            </div>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section2" class="text-lg text-gray-800 dark:text-gray-200">Section 2</a>
            </div>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section3" class="text-lg text-gray-800 dark:text-gray-200">Section 3</a>
            </div>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section4" class="text-lg text-gray-800 dark:text-gray-200">Section 4</a>
            </div>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
            <div class="flex items-center space-x-3">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
                <a href="#section5" class="text-lg text-gray-800 dark:text-gray-200">Section 5</a>
            </div>
        </li>
    </ul>
</div>

Authentication Components Component

A responsive authentication component with dark theme support, done in Skeuomorphism style.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-900 py-12 px-4 sm:px-6 lg:px-8 flex flex-col justify-center">
  <div class="sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-white dark:bg-gray-700 py-8 px-4 shadow-xl rounded-3xl sm:rounded-br-none sm:rounded-tl-none sm:px-10 border-t-4 border-b-4 border-gray-300 dark:border-gray-600">
      <div class="sm:mx-auto sm:w-full sm:max-w-md text-center">
        <svg class="mx-auto h-12 w-12 text-gray-600 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
        </svg>
        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
          Sign in to your account
        </h2>
      </div>

      <form class="mt-8 space-y-6" action="#" method="POST">
        <input type="hidden" name="remember" value="true">
        <div class="rounded-md shadow-sm -space-y-px">
          <div>
            <label for="email-address" class="sr-only">Email address</label>
            <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="Email address">
          </div>
          <div>
            <label for="password" class="sr-only">Password</label>
            <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="Password">
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded dark:bg-gray-500 dark:border-gray-400">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">
              Remember me
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-r from-indigo-600 to-indigo-700 hover:from-indigo-700 hover:to-indigo-800 focus:outline-none focus:ring-2 focus:ring- offsetting-2 focus:ring-indigo-500 shadow-lg transform transition duration-300 ease-in-out hover:scale-105">
            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
              <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2h1a2 2 0 012 2v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2h1zm5-3a1 1 0 011 1v3a1 1 0 11-2 0V7a1 1 0 011-1z" clip-rule="evenodd" />
              </svg>
            </span>
            Sign in
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

1 ... 271 272 273 274 275 ... 315

Search Components

Categories

All Components