Search Components

All Components

Browse all available Tailwind CSS components

Registration Form Component

A responsive registration form component featuring microinteractions and dark theme support, styled with Tailwind CSS.

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 w-11/12 max-w-md">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200 mb-6">Create an Account</h2>
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-1" for="name">Full Name</label>
        <input type="text" id="name" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-200" placeholder="John Doe" required>
      </div>

      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-1" for="email">Email Address</label>
        <input type="email" id="email" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-200" placeholder="[email protected]" required>
      </div>

      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-1" for="password">Password</label>
        <input type="password" id="password" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-200" placeholder="********" required>
      </div>

      <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-1" for="avatar">Profile Picture</label>
        <div class="flex items-center mb-2">
          <img id="avatar" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 mr-3">
          <input type="file" class="bg-gray-200 dark:bg-gray-700 rounded p-2 dark:border-gray-700" accept="image/*">
        </div>
        <div class="text-xs text-gray-500 dark:text-gray-400">Upload a profile picture (optional)</div>
      </div>

      <button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 rounded transition duration-200">Register</button>
    </form>
  </div>
</div>

Navigation Enhancement Component

A navigation enhancement component designed in a brutalist style. Featuring responsive effects, dark theme support, and placeholder images.

Open Preview

                <nav class="bg-white dark:bg-gray-900 p-6 text-center">
  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center space-x-4">
      <img src="https://picsum.photos/50" alt="Logo" class="rounded-full border-2 border-black dark:border-white">
      <h1 class="text-3xl font-bold text-black dark:text-white">Brutalist Navigation</h1>
    </div>
    <ul class="flex space-x-6 mt-4 md:mt-0">
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Home</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">About</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Services</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Contact</a></li>
    </ul>
  </div>
  <div class="mt-8">
    <h2 class="text-xl text-black dark:text-white">Featured</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100" alt="Placeholder Image 1" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">Raw and bold imagery.</p>
      </div>
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image 2" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">Unusual and eye-catching layouts.</p>
      </div>
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image 3" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">High contrast designs.</p>
      </div>
    </div>
  </div>
</nav>

3D Design Header

A responsive header component with 3D design elements and dark mode support.

Open Preview

                <header class="bg-white shadow-lg dark:bg-gray-800">
  <div class="container mx-auto px-6 py-4">
    <div class="flex items-center justify-between">
      <div class="text-xl font-semibold text-gray-700 dark:text-white">3D Header</div>
      <div class="hidden md:block">
        <nav>
          <a href="#" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white px-4">Home</a>
          <a href="#" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white px-4">About</a>
          <a href="#" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white px-4">Contact</a>
        </nav>
      </div>
    </div>
  </div>
</header>

Navigation Enhancement Component

A responsive navigation component designed for dark mode with Tailwind CSS, featuring placeholders for logos, images, and avatars.

Open Preview

                <nav class="bg-gray-900 text-white p-4 shadow-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/50" alt="Logo" class="mr-3 rounded-full">
            <span class="text-xl font-bold">MyApp</span>
        </div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="hover:text-gray-300">Home</a>
            <a href="#" class="hover:text-gray-300">About</a>
            <a href="#" class="hover:text-gray-300">Services</a>
            <a href="#" class="hover:text-gray-300">Contact</a>
        </div>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border border-gray-700">
            <button class="ml-4 p-2 bg-gray-700 rounded hover:bg-gray-600 focus:outline-none">Menu</button>
        </div>
    </div>
</nav>
<div class="bg-gray-800 text-white p-4">
    <div class="container mx-auto flex flex-col md:flex-row md:justify-between">
        <div class="flex items-center mb-4 md:mb-0">
            <img src="https://picsum.photos/100/100" alt="Placeholder Image" class="rounded-lg">
            <p class="ml-4">This is a simple navigation enhancement component in dark mode.</p>
        </div>
        <div class="flex space-x-4">
            <a href="#" class="bg-gray-700 px-4 py-2 rounded hover:bg-gray-600">Action 1</a>
            <a href="#" class="bg-gray-700 px-4 py-2 rounded hover:bg-gray-600">Action 2</a>
        </div>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: #fff;
        }
    }
</style>

Video Player Component

A responsive video player component designed with glassmorphism style, featuring frosted glass-like translucent elements with blur effects, dark theme support, and placeholder images.

Open Preview

                <div class="flex flex-col items-center justify-center w-full h-screen bg-gray-800">
    <div class="bg-white bg-opacity-20 backdrop-blur-lg p-4 rounded-lg shadow-lg w-full max-w-md">
        <div class="relative w-full aspect-w-16 aspect-h-9">
            <video class="rounded-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="mt-4 flex items-center">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="text-white">
                <h3 class="text-lg font-semibold">Video Title</h3>
                <p class="text-sm text-gray-300">Uploaded by User Name</p>
            </div>
        </div>
        <div class="flex justify-around mt-4">
            <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 focus:outline-none">Like</button>
            <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 focus:outline-none">Share</button>
        </div>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
        .bg-white {
            background-color: rgba(255, 255, 255, 0.2);
        }
        .text-white {
            color: #edf2f7;
        }
        .text-gray-300 {
            color: #e2e8f0;
        }
    }
</style>

Sticky Navigation (Glassmorphism)

Sticky Navigation Component with Glassmorphism style, responsive, and dark theme support.

Open Preview

                <nav class="sticky top-0 z-10 backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white shadow-lg">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between items-center h-16">
      <div class="flex-shrink-0">
        <span class="text-2xl font-semibold text-gray-900 dark:text-white">Glassmorphism Nav</span>
      </div>
      <div class="hidden md:block">
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Services</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
      </div>
      <div class="-mr-2 flex md:hidden">
        <button type="button" class="bg-gray-100 dark:bg-gray-700 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-200 dark:hover:text-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" 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="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Services</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
    </div>
  </div>
</nav>

Columns Component Neumorphism - A soft UI style that creates elements appearing to extrude from the background using subtle shadows. this component is responsive and have dark theme support. No JavaScript code is needed. For dark mode, CSS support is sufficient.

Open Preview

                <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 p-4 dark:bg-gray-800">
  <div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
    <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 1</h3>
    <p class="text-gray-600 dark:text-gray-300 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
    <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 2</h3>
    <p class="text-gray-600 dark:text-gray-300 text-center">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="flex-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-xl shadow-xl dark:shadow-xl-dark flex flex-col items-center">
    <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Column 3</h3>
    <p class="text-gray-600 dark:text-gray-300 text-center">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
</div>

<style>
/* Basic Neumorphism shadows - adjust values for desired effect */
.shadow-xl {
  box-shadow: 8px 8px 15px #b0b0b0, -8px -8px 15px #ffffff;
}

.dark .shadow-xl-dark {
  box-shadow: 8px 8px 15px #444444, -8px -8px 15px #333333;
}
</style>

Content Display Component

A responsive content display component styled with Glassmorphism, featuring blurred background and translucent elements with support for dark mode.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-5">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 backdrop-filter backdrop-blur-lg bg-opacity-30 border border-gray-200 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Content Display Title</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">This component features a glassmorphism style with blurred background and translucent elements.</p>
        <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">User Name</h3>
                <span class="text-sm text-gray-500 dark:text-gray-400">User Title</span>
            </div>
        </div>
        <img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-lg mb-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition duration-200">Read More</button>
    </div>
</div>

Navigation Component

A responsive navigation component styled for dark mode using Tailwind CSS.

Open Preview

                <nav class="bg-gray-900 text-white p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-lg font-semibold">Brand</a>
            <a href="#" class="hidden md:block">Home</a>
            <a href="#" class="hidden md:block">About</a>
            <a href="#" class="hidden md:block">Services</a>
            <a href="#" class="hidden md:block">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <input type="text" placeholder="Search..." class="bg-gray-800 text-white p-2 rounded-md" />
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full"/>
        </div>
    </div>
</nav>

<main class="bg-gray-800 min-h-screen p-4">
    <h1 class="text-3xl mb-4">Welcome to Our Website</h1>
    <img src="https://picsum.photos/800/300" alt="Placeholder" class="w-full rounded-lg mb-4" />
    <p class="text-gray-300">This is a simple layout demo for the Navigation Component.</p>
</main>

<footer class="bg-gray-900 text-white p-4">
    <div class="container mx-auto text-center">
        <p>© 2023 Navigation Component. All rights reserved.</p>
    </div>
</footer>

Error Messages Component

This component displays error messages with engaging animations that respond to user actions. It includes support for dark mode and features responsive effects using Tailwind CSS.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
  <div class="max-w-md w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 transition duration-300 hover:shadow-xl transform hover:-translate-y-1">
    <div class="flex items-center mb-4">
      <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Error Title</h2>
    </div>
    <p class="text-gray-600 dark:text-gray-400 mb-4">
      This is an error message that explains what went wrong. Please check your input and try again.
    </p>
    <div class="flex items-center justify-between mt-4">
      <button class="px-4 py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 transition duration-200 dark:bg-blue-700 dark:hover:bg-blue-800">Retry</button>
      <button class="px-4 py-2 bg-red-500 text-white font-semibold rounded-md hover:bg-red-600 transition duration-200 dark:bg-red-700 dark:hover:bg-red-800">Cancel</button>
    </div>
    <img class="mt-4 w-full h-32 object-cover rounded" src="https://picsum.photos/400/200?random=1" alt="Error Illustration">
  </div>
</div>

1 ... 277 278 279 280 281 ... 335

Search Components

Categories

All Components