Search Components

All Components

Browse all available Tailwind CSS components

Password Reset Component

A responsive password reset component with Neumorphism design, dark mode support, and no JavaScript.

                <div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-6">
  <div class="max-w-sm w-full bg-gray-200 dark:bg-gray-800 p-8 rounded-xl shadow-neumorphic dark:shadow-neumorphic-dark">
    <h2 class="text-2xl font-bold text-center text-gray-700 dark:text-gray-200 mb-6">Reset Password</h2>
    <form>
      <div class="mb-6">
        <label for="email" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">New Password</label>
        <input type="password" id="password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Enter new password">
      </div>
      <div class="mb-6">
        <label for="confirm-password" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Confirm New Password</label>
        <input type="password" id="confirm-password" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 text-gray-700 dark:text-gray-200 shadow-neumorphic-input dark:shadow-neumorphic-input-dark" placeholder="Confirm new password">
      </div>
      <button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-600 dark:focus:ring-opacity-50 shadow-neumorphic-button dark:shadow-neumorphic-button-dark">
        Reset Password
      </button>
    </form>
  </div>
</div>

<style>
  .shadow-neumorphic {
    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 5px 5px 10px #717171, -5px -5px 10px #999999;
  }
  .shadow-neumorphic-input {
    box-shadow: inset 3px 3px 5px #bebebe, inset -3px -3px 5px #ffffff;
  }
  .dark .shadow-neumorphic-input-dark {
    box-shadow: inset 3px 3px 5px #717171, inset -3px -3px 5px #999999;
  }
  .shadow-neumorphic-button {
    box-shadow: 3px 3px 7px #bebebe, -3px -3px 7px #ffffff;
  }
    .dark .shadow-neumorphic-button-dark {
    box-shadow: 3px 3px 7px #717171, -3px -3px 7px #999999;
  }
</style>

Data Tables Component

A responsive data table component themed in retro/vintage style, designed with Tailwind CSS, supporting dark mode and featuring nostalgic design elements from the 80s/90s.

Open Preview

                <div class="overflow-x-auto bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-center mb-4 text-gray-800 dark:text-gray-200">Retro Data Table</h2>
    <table class="min-w-full border-collapse border border-gray-300 dark:border-gray-600">
        <thead class="bg-gray-200 dark:bg-gray-700">
            <tr>
                <th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">#</th>
                <th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Name</th>
                <th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Email</th>
                <th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Avatar</th>
            </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-800">
            <tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="border border-gray-300 dark:border-gray-600 p-2">1</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">John Doe</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
            </tr>
            <tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="border border-gray-300 dark:border-gray-600 p-2">2</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">Jane Smith</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar"></td>
            </tr>
            <tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="border border-gray-300 dark:border-gray-600 p-2">3</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">Alice Johnson</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar"></td>
            </tr>
            <tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="border border-gray-300 dark:border-gray-600 p-2">4</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">Bob Brown</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar"></td>
            </tr>
        </tbody>
    </table>
</div>

Social Share Buttons

Social Share Buttons Component with Glassmorphism design, responsive effects, and dark theme support. No JavaScript is used.

Open Preview

                <div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="flex space-x-4 p-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg">
    <a href="#" class="p-3 rounded-full bg-white bg-opacity-50 dark:bg-gray-800 dark:bg-opacity-50 text-gray-800 dark:text-white hover:scale-110 transition duration-300">
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.367 8.367 0 01-2.605.996 4.103 4.103 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.273 4.134 4.134 0 001.27 5.51A4.073 4.073 0 01.8 7.71v.057a4.1 4.1 0 003.294 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
      </svg>
    </a>
    <a href="#" class="p-3 rounded-full bg-white bg-opacity-50 dark:bg-gray-800 dark:bg-opacity-50 text-gray-800 dark:text-white hover:scale-110 transition duration-300">
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.83 9.5v-6.533H5.933V12.017H8.83v-2.57c0-3.518 2.13-5.425 5.242-5.425 1.493 0 2.99.22 2.99.22v3.293h-1.68c-1.63.005-2.16.94-2.16 1.902v2.753h3.332l-.533 3.44H14.17V21.5c3.966-1.32 6.83-5.077 6.83-9.483C22 6.484 17.523 2 12 2z" clip-rule="evenodd"></path>
      </svg>
    </a>
    <a href="#" class="p-3 rounded-full bg-white bg-opacity-50 dark:bg-gray-800 dark:bg-opacity-50 text-gray-800 dark:text-white hover:scale-110 transition duration-300">
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path fill-rule="evenodd" d="M12.964 0H1.036C.465 0 0 .465 0 1.036v11.928c0 .571.465 1.036 1.036 1.036h11.928c.571 0 1.036-.465 1.036-1.036V1.036C14 0 .571 0 12.964 0zM4.568 11.669H2.473V4.05H4.568v7.619zM3.52 3.012c-.775 0-1.411-.636-1.411-1.416 0-.78.636-1.416 1.411-1.416.776 0 1.411.636 1.411 1.416 0 .78-.635 1.416-1.411 1.416zM11.668 11.669H9.57v-3.48c0-.831-.015-1.898-1.158-1.898-1.16 0-1.334.904-1.334 1.84v3.538H5.091V4.05h2.008v.92h.028c.277-.529.959-1.083 1.984-1.083 2.121 0 2.518 1.392 2.518 3.191v7.68z" clip-rule="evenodd"></path>
      </svg>
    </a>
  </div>
</div>

Skeuomorphism Social Component

Social media component with Skeuomorphism design, responsive effects and dark theme support.

Open Preview

                <div class="skeuosocial-component bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl p-6 max-w-sm mx-auto">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-700 shadow-md" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    <div class="ml-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>
    </div>
  </div>
  <p class="text-gray-700 dark:text-gray-300 mb-4">
    This is a skeuomophic social media component design using Tailwind CSS.
  </p>
  <img class="rounded-lg shadow-md mb-4" src="https://picsum.photos/400/250" alt="Post Image">
  <div class="flex justify-between items-center text-gray-600 dark:text-gray-400">
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.95-4.95a1 1 0 111.414 1.414L10 15.414l-6.364-6.364a1 1 0 111.414-1.414L10 12.586z"></path></svg>
      <span>120 Likes</span>
    </div>
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3 1h10v8H5V6zm1 1v6h8V7H6z"></path></svg>
      <span>Opens</span>
    </div>
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 3a1 1 0 011 1v5a1 1 0 01-2 0V6a1 1 0 011-1zm0 10a1 1 0 100-2 1 1 0 000 2z"></path></svg>
      <span>Share</span>
    </div>
  </div>
</div>

Heat Maps Component

Heat Maps Component with responsive effects and dark theme support.

Open Preview

                <div class="bg-gray-900 text-white p-8">
  <h2 class="text-2xl font-bold mb-4">Heat Map</h2>
  <div class="grid grid-cols-7 gap-1">
    <!-- Days of the week -->
    <div class="text-center text-sm text-gray-400">Sun</div>
    <div class="text-center text-sm text-gray-400">Mon</div>
    <div class="text-center text-sm text-gray-400">Tue</div>
    <div class="text-center text-sm text-gray-400">Wed</div>
    <div class="text-center text-sm text-gray-400">Thu</div>
    <div class="text-center text-sm text-gray-400">Fri</div>
    <div class="text-center text-sm text-gray-400">Sat</div>

    <!-- Heat map squares (example data) -->
    {[...Array(42)].map((_, i) => (
      `<div key=${i} class="h-8 bg-gray-700 rounded heat-square data-level-{{
        (
          () => {
            const random = Math.random();
            if (random < 0.4) return 1; /* low activity */
            if (random < 0.7) return 2; /* medium activity */
            if (random < 0.9) return 3; /* high activity */
            return 4; /* very high activity */
          }
        )()
      }}"></div>`
    )).join("")}
  </div>

  <style>
    .heat-square[data-level="1"] {
      background-color: #1e3a8a; /* blue-900 */
    }
    .heat-square[data-level="2"] {
      background-color: #1d4ed8; /* blue-700 */
    }
    .heat-square[data-level="3"] {
      background-color: #3b82f6; /* blue-500 */
    }
    .heat-square[data-level="4"] {
      background-color: #60a5fa; /* blue-400 */
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .grid-cols-7 {
        grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
      }
      .heat-square {
        height: 40px;
      }
    }
  </style>
</div>

BrutalistFollowButton

A brutalist follow button with responsive and dark mode support.

Open Preview

                <button class="bg-black text-white font-bold py-2 px-4 border border-black active:bg-zinc-700 active:border-zinc-700 focus:outline-none focus:ring-2 focus:ring-black focus:ring-opacity-50 dark:bg-white dark:text-black dark:border-white dark:active:bg-zinc-300 dark:active:border-zinc-300 dark:focus:ring-white">Follow</button>

Authentication Components Component

A responsive authentication component designed for dark mode UI, featuring a login and signup form with Tailwind CSS styling.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-900 text-white">
  <div class="bg-gray-800 rounded-lg shadow-lg p-8 w-96">
    <h2 class="text-2xl font-bold mb-6 text-center">Welcome Back!</h2>
    <form>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="email">Email</label>
        <input type="email" id="email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="[email protected]" required />
      </div>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="password">Password</label>
        <input type="password" id="password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required />
      </div>
      <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Login</button>
    </form>
    <div class="mt-4 text-center">
      <a href="#" class="text-sm text-indigo-400 hover:underline">Forgot your password?</a>
    </div>
    <div class="mt-6 border-t border-gray-600"></div>
    <h2 class="text-2xl font-bold mt-6 text-center">Create an Account</h2>
    <form>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="new-email">Email</label>
        <input type="email" id="new-email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="[email protected]" required />
      </div>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="new-password">Password</label>
        <input type="password" id="new-password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required />
      </div>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="avatar">Upload Avatar</label>
        <input type="file" id="avatar" class="block w-full text-sm text-gray-500 bg-gray-600 rounded focus:outline-none" />
      </div>
      <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Sign Up</button>
    </form>
    <div class="mt-4 text-center">
      <small>Or sign up using</small>
      <div class="flex justify-center mt-2">
        <img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
        <img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
        <img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
      </div>
    </div>
  </div>
</div>

Shopping Cart Component

A responsive shopping cart component designed with a brutalism style, featuring high contrast and unusual layouts. It supports dark theme with Tailwind CSS.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
        <div class="flex items-center justify-between border-b border-gray-300 dark:border-gray-600 pb-2 mb-2">
            <img src="https://picsum.photos/60" alt="Product Image" class="w-16 h-16 object-cover rounded-lg">
            <div class="flex-1 px-4">
                <h3 class="font-semibold text-gray-800 dark:text-white">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-300">$49.99</p>
            </div>
            <button class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition duration-200">Remove</button>
        </div>
        <div class="flex items-center justify-between border-b border-gray-300 dark:border-gray-600 pb-2 mb-2">
            <img src="https://picsum.photos/60" alt="Product Image" class="w-16 h-16 object-cover rounded-lg">
            <div class="flex-1 px-4">
                <h3 class="font-semibold text-gray-800 dark:text-white">Another Product</h3>
                <p class="text-gray-600 dark:text-gray-300">$29.99</p>
            </div>
            <button class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition duration-200">Remove</button>
        </div>
        <div class="flex justify-between items-center mt-4">
            <h4 class="text-xl font-bold text-gray-800 dark:text-white">Total:</h4>
            <p class="text-xl font-bold text-gray-800 dark:text-white">$79.98</p>
        </div>
        <button class="w-full mt-4 bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition duration-200">Checkout</button>
    </div>
    <div class="flex items-center justify-center mt-4">
        <p class="text-gray-600 dark:text-gray-300 text-sm">Need help? <a href="#" class="text-blue-500 hover:underline">Contact us</a></p>
    </div>
</div>

A responsive data table component styled with a retro/vintage 80s/90s aesthetic using Tailwind CSS. It features a blocky design, vibrant color accents (purple/orange in light mode, green/neon in dark mode), and a monospace font for a nostalgic tech feel. The table includes distinct header and row styling, bordered elements like avatars and status badges, and supports dark mode via CSS. Placeholder data includes user avatars, contact information, status badges, roles, and join dates. The table is horizontally scrollable on smaller screens for better responsiveness.

Open Preview

                <!-- Component Start -->
<div class="font-mono bg-orange-100 dark:bg-gray-900 p-4 sm:p-8 rounded-none border-4 border-purple-600 dark:border-green-400 shadow-xl">
  <h2 class="text-3xl sm:text-4xl font-bold text-purple-700 dark:text-yellow-300 mb-6 text-center uppercase tracking-wider">
    User Archives ~ System Log
  </h2>
  <div class="overflow-x-auto rounded-none border-2 border-purple-500 dark:border-green-500">
    <table class="min-w-full w-full">
      <thead class="bg-purple-500 dark:bg-green-500 text-sm uppercase">
        <tr>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest border-r-2 border-purple-400 dark:border-green-600 text-left">
            User Profile
          </th>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest border-r-2 border-purple-400 dark:border-green-600 text-left">
            Contact_Info
          </th>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest border-r-2 border-purple-400 dark:border-green-600 text-left">
            Status_Signal
          </th>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest border-r-2 border-purple-400 dark:border-green-600 text-left">
            Assigned_Role
          </th>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest text-left">
            Join_Date
          </th>
        </tr>
      </thead>
      <tbody class="bg-orange-50 dark:bg-gray-800 divide-y-2 divide-purple-300 dark:divide-green-700">
        <!-- Row 1 -->
        <tr class="hover:bg-purple-100 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-12 w-12">
                <img class="h-12 w-12 rounded-none border-2 border-purple-400 dark:border-green-300 object-cover" src="https://randomuser.me/api/portraits/men/34.jpg" alt="User Avatar Max Power">
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">Max Power</div>
                <div class="text-xs text-purple-700 dark:text-green-300">USER_ID: 101</div>
              </div>
            </div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            [email protected]
            <div class="text-xs text-purple-600 dark:text-green-400">Online</div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-none bg-green-200 text-green-800 dark:bg-green-600 dark:text-green-100 border-2 border-green-500 dark:border-green-300">
              ACTIVE
            </span>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            Net Runner
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
            1985-04-12
          </td>
        </tr>
        <!-- Row 2 -->
        <tr class="hover:bg-purple-100 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-12 w-12">
                <img class="h-12 w-12 rounded-none border-2 border-purple-400 dark:border-green-300 object-cover" src="https://randomuser.me/api/portraits/women/47.jpg" alt="User Avatar Glitch Martin">
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">Glitch Martin</div>
                <div class="text-xs text-purple-700 dark:text-green-300">USER_ID: 202</div>
              </div>
            </div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            [email protected]
            <div class="text-xs text-purple-600 dark:text-green-400">Offline</div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-none bg-red-200 text-red-800 dark:bg-red-600 dark:text-red-100 border-2 border-red-500 dark:border-red-300">
              INACTIVE
            </span>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            Code Weaver
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
            1991-11-20
          </td>
        </tr>
        <!-- Row 3 -->
        <tr class="hover:bg-purple-100 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-12 w-12">
                <img class="h-12 w-12 rounded-none border-2 border-purple-400 dark:border-green-300 object-cover" src="https://randomuser.me/api/portraits/men/62.jpg" alt="User Avatar Rex Viper">
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">Rex "Viper" Fury</div>
                <div class="text-xs text-purple-700 dark:text-green-300">USER_ID: 303</div>
              </div>
            </div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            [email protected]
            <div class="text-xs text-purple-600 dark:text-green-400">Online</div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-none bg-yellow-200 text-yellow-800 dark:bg-yellow-600 dark:text-yellow-100 border-2 border-yellow-500 dark:border-yellow-300">
              PENDING_VERIFICATION
            </span>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            System Admin
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
            1988-07-07
          </td>
        </tr>
        <!-- Row 4 -->
        <tr class="hover:bg-purple-100 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-12 w-12">
                <img class="h-12 w-12 rounded-none border-2 border-purple-400 dark:border-green-300 object-cover" src="https://randomuser.me/api/portraits/women/75.jpg" alt="User Avatar Zara Byte">
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">Zara Byte</div>
                <div class="text-xs text-purple-700 dark:text-green-300">USER_ID: 404</div>
              </div>
            </div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            [email protected]
            <div class="text-xs text-purple-600 dark:text-green-400">Idle</div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-none bg-gray-300 text-gray-800 dark:bg-gray-600 dark:text-gray-200 border-2 border-gray-500 dark:border-gray-400">
              SUSPENDED
            </span>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            Data Analyst
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
            1995-01-23
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="mt-6 text-center text-xs text-purple-700 dark:text-green-400">
    SYSTEM ONLINE | ALL RECORDS CURRENT | END OF TRANSMISSION
  </div>
</div>
<!-- Component End -->

Material Design Search Box

A Search Box component inspired by Material Design principles, built using Tailwind CSS. It features responsive behavior adapting to container width, visual feedback through hover and focus shadow transitions (depth effects), and comprehensive dark theme support. The component includes a leading search icon and ensures a clean, modern aesthetic. CSS-only implementation. Ideal for embedding in various layouts due to its `w-full` nature. For accessibility, ensure to pair the `input` element with a corresponding `<label>` or provide a descriptive `aria-label`.

Open Preview

                <!-- Component Start: Material Design Search Box -->
<div class="flex items-center w-full bg-white dark:bg-gray-700 shadow-md hover:shadow-lg focus-within:shadow-lg transition-shadow duration-200 ease-in-out rounded-lg">
  <div class="pl-4 pr-2 py-3">
    <svg class="h-5 w-5 text-gray-500 dark:text-gray-400 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
    </svg>
  </div>
  <input
    type="search"
    name="search_query"
    id="material_search_box_input"
    placeholder="Search..."
    aria-label="Search"
    class="
      appearance-none
      w-full h-12
      pl-0 pr-4 py-3
      text-base text-gray-900 dark:text-gray-100
      bg-transparent
      focus:outline-none
      placeholder-gray-500 dark:placeholder-gray-400
    "
  />
</div>
<!-- Component End -->

1 ... 292 293 294 295 296 ... 315

Search Components

Categories

All Components

Password Reset Component

Data Tables Component

Social Share Buttons

Skeuomorphism Social Component

Heat Maps Component

BrutalistFollowButton

Authentication Components Component

Shopping Cart Component

Retro Data Grid

Material Design Search Box