All Components

Browse all available Tailwind CSS components

Data Tables Component

A Data Tables Component designed with Brutalism style featuring high-saturation colors for e-commerce, responsive with dark theme support.

Open Preview

                <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
        <thead class="bg-blue-600 dark:bg-blue-900">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">#</th>
                <th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Product</th>
                <th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Price</th>
                <th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Availability</th>
                <th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Action</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
            <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">1</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">\n                    <div class="flex items-center space-x-2">
                        <img src="https://picsum.photos/50/50" alt="Product Image" class="w-12 h-12 rounded-md">
                        <span>Awesome Product</span>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">$39.99</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">In Stock</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <a href="#" class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400">Buy Now</a>
                </td>
            </tr>
            <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">\n                    <div class="flex items-center space-x-2">
                        <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="w-12 h-12 rounded-md">
                        <span>Amazing Gadget</span>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">$29.99</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">Limited Stock</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <a href="#" class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400">Buy Now</a>
                </td>
            </tr>
            <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">3</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">\n                    <div class="flex items-center space-x-2">
                        <img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="w-12 h-12 rounded-md">
                        <span>Stylish Widget</span>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">$19.99</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">Out of Stock</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <a href="#" class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400">Notify Me</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Skeuomorphic Social Share Buttons

Responsive Social Share Buttons Component with Skeuomorphic design, Monochromatic color scheme, and Complex interactions, with dark theme support. Designed for blogs and content sites.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="flex space-x-4">

        <!-- Facebook Button -->
        <a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
            <div class="flex items-center justify-center w-12 h-12 bg-blue-600 dark:bg-blue-800 text-white rounded-full shadow-lg">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.299c-1.213 0-1.587.753-1.587 1.517V12h3.328l-.53 3.663h-2.798V22c4.781-.75 8.437-4.887 8.437-9.878z" />
                </svg>
            </div>
        </a>

        <!-- Twitter Button -->
        <a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
            <div class="flex items-center justify-center w-12 h-12 bg-blue-400 dark:bg-blue-600 text-white rounded-full shadow-lg">
                <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-.004-.357-.012-.534A8.358 8.358 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 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.477A4.073 4.073 0 014 10.20c0 .038 0 .077.01.116A11.703 11.703 0 0012.31 21.5a4.141 4.141 0 01-1.854-.054 4.002 4.002 0 01-1.495-.385 4.017 4.017 0 002.965-1.636c-.379-.09-.73-.28-1.014-.542-.283-.263-.51-.59-.656-.954a4.102 4.102 0 01-.166-1.095v-.049c.39.22.84.38 1.301.407a4.011 4.011 0 01-1.791-3.5z" />
                </svg>
            </div>
        </a>

        <!-- LinkedIn Button -->
        <a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
            <div class="flex items-center justify-center w-12 h-12 bg-blue-700 dark:bg-blue-900 text-white rounded-full shadow-lg">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                  <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.583-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
                </svg>
            </div>
        </a>

         <!-- Pinterest Button -->
         <a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
            <div class="flex items-center justify-center w-12 h-12 bg-red-600 dark:bg-red-800 text-white rounded-full shadow-lg">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 0C6.477 0 2 4.477 2 10a8.015 8.015 0 002.161 5.411c-.066.241-.19.763-.217.862-.046.168-.113.471-.127.524-.014.052-.024.08-.024.08l-.001.003a1.04 1.04 0 01-.188.505 1 1 0 00.951 1.349l2.436-.002c.321 0 .627-.148.824-.404.196-.256.392-.786.476-1.042.284-.86.776-2.3.776-2.3.208.36.519.687.89.927A7.947 7.947 0 0012 18a8 8 0 100-16zM8.5 13C7.67 13 7 12.33 7 11.5S7.67 10 8.5 10 10 10.67 10 11.5 9.33 13 8.5 13zm7-2c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8 17 8.67 17 9.5 16.33 11 15.5 11z"/>
                </svg>
            </div>
        </a>

    </div>
</div>

Forms Component

A responsive forms component designed in minimalist style, suitable for social media interfaces, featuring vibrant colors, dark mode support, and complex interactions.

Open Preview

                <div class="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center">
    <div class="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
        <h2 class="text-2xl font-bold text-vibrant-600 dark:text-vibrant-400 text-center">Join Our Community</h2>
        <form class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
                <input type="text" placeholder="Your Name" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" required>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
                <input type="email" placeholder="Your Email" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" required>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
                <input type="password" placeholder="Your Password" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" required>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Profile Picture</label>
                <input type="file" class="mt-1 block w-full mb-4 text-sm text-gray-500 dark:text-gray-400 dark:bg-gray-600" accept="image/*">
                <img src="https://picsum.photos/200" alt="Profile Preview" class="w-full h-32 object-cover rounded-lg mb-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Bio</label>
                <textarea placeholder="Tell us about yourself" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:border-vibrant-400 focus:ring focus:ring-vibrant-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:focus:border-vibrant-500 dark:focus:ring-vibrant-400" rows="4" required></textarea>
            </div>
            <button type="submit" class="w-full py-2 px-4 mt-4 text-white bg-vibrant-600 rounded-md hover:bg-vibrant-700 focus:outline-none focus:ring-2 focus:ring-vibrant-500 dark:bg-vibrant-500 dark:hover:bg-vibrant-600">Submit</button>
        </form>
        <p class="text-center text-sm text-gray-500 dark:text-gray-400">Already have an account? <a href="#" class="text-vibrant-600 dark:text-vibrant-400 hover:underline">Log in</a></p>
    </div>
</div>

Neumorphism Sidebar Component

A responsive sidebar component with Neumorphism design, Earth tones color scheme, and simple complexity, suitable for blogs or content consumption. Includes dark mode support.

Open Preview

                <div class="flex h-screen bg-gray-200 dark:bg-gray-800">
  <!-- Sidebar -->
  <div class="w-64 bg-gray-300 dark:bg-gray-700 p-6 space-y-6 shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <!-- Logo or Blog Title -->
    <div class="text-2xl font-bold text-gray-800 dark:text-white">My Blog</div>
    
    <!-- Navigation -->
    <nav>
      <a href="#" class="block py-2 px-4 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 hover:text-gray-800 dark:hover:text-white shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">Home</a>
      <a href="#" class="block py-2 px-4 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 hover:text-gray-800 dark:hover:text-white shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">About</a>
      <a href="#" class="block py-2 px-4 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 hover:text-gray-800 dark:hover:text-white shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">Contact</a>
    </nav>

    <!-- Categories or other links -->
    <div class="space-y-2">
      <div class="text-sm font-semibold text-gray-600 dark:text-gray-300">Categories</div>
      <a href="#" class="block py-1 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Technology</a>
      <a href="#" class="block py-1 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Travel</a>
      <a href="#" class="block py-1 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Food</a>
    </div>
  </div>

  <!-- Main Content Area (optional - just for demonstration) -->
  <div class="flex-1 p-6 overflow-y-auto">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Welcome to the Blog</h1>
    <p class="text-gray-700 dark:text-gray-300">This is the main content area. The sidebar is on the left.</p>
  </div>
</div>

<!-- Add custom CSS for Neumorphism effect -- In a separate CSS file or style tag -->
<style>
.shadow-neumorphic-light {
  box-shadow: 7px 7px 15px #a7acb1, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
  box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #323232;
}
.shadow-neumorphic-inset-light {
  box-shadow: inset 5px 5px 10px #a7acb1, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-inset-dark {
  box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #323232;
}
</style>

Social Components Component

A responsive social media component designed with Neumorphism style and dark theme support, featuring a simple layout and minimal elements.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-md mx-auto mt-10">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
        <div>
            <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-300">@john_doe</p>
        </div>
    </div>
    <p class="mt-4 text-gray-800 dark:text-gray-400">Just another day exploring the wonders of nature!</p>
    <img src="https://picsum.photos/400/200" alt="Nature Image" class="mt-4 rounded-lg shadow-lg">
    <div class="mt-4 flex justify-between">
        <button class="bg-blue-500 text-white rounded-full px-4 py-2 shadow-md hover:bg-blue-600 focus:outline-none">Like</button>
        <button class="bg-blue-500 text-white rounded-full px-4 py-2 shadow-md hover:bg-blue-600 focus:outline-none">Comment</button>
    </div>
</div>

Rating System Component

A minimalist flat design rating system component suitable for business websites, with a responsive layout and dark theme support.

Open Preview

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Rate Our Service</h2>
    <div class="flex items-center space-x-2 mb-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-gray-700 dark:text-gray-300">John Doe</span>
    </div>
    <div class="flex">
        <span class="text-gray-600 dark:text-gray-400 mr-2">Rating:</span>
        <div class="flex items-center space-x-1">
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
        </div>
    </div>
    <textarea class="w-full p-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-md focus:outline-none focus:ring focus:ring-yellow-300 dark:focus:ring-yellow-400" placeholder="Leave your feedback here..."></textarea>
    <button class="mt-4 px-4 py-2 bg-yellow-500 dark:bg-yellow-400 text-white rounded-md hover:bg-yellow-600 dark:hover:bg-yellow-500">Submit</button>
</div>

Glassmorphism Filters Component

Glassmorphism Filters Component for Social Media with responsive design and dark theme support.

Open Preview

                ```html
<div class="flex flex-col md:flex-row items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 w-full max-w-sm md:max-w-md lg:max-w-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Filters</h2>
    <div class="space-y-4">
      <div>
        <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category</label>
        <select id="category" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-pink-500 focus:border-pink-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
          <option>All</option>
          <option>Photos</option>
          <option>Videos</option>
          <option>Articles</option>
        </select>
      </div>
      <div>
        <label for="sort" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Sort By</label>
        <select id="sort" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
          <option>Newest</option>
          <option>Popular</option>
          <option>Trending</option>
        </select>
      </div>
      <div>
        <label for="date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Date Range</label>
        <input type="date" id="date" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tags</label>
        <div class="mt-2 flex flex-wrap gap-2">
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">#travel</span>
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">#food</span>
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100">#nature</span>
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">#technology</span>
        </div>
      </div>
      <div class="flex items-center">
        <input id="darkMode" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
        <label for="darkMode" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">Enable Dark Mode</label>
      </div>
    </div>
    <div class="mt-6">
      <button class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-pink-500 hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-500">
        Apply Filters
      </button>
    </div>
  </div>
</div>

```

Password Reset Component

A 3D-styled, vibrant Password Reset component for blogs and content consumption. It supports dark theme and is rich in interactive elements.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 dark:from-blue-900 dark:to-purple-800 p-6 rounded-lg shadow-lg transform transition-all duration-300 ease-in-out hover:scale-105">
    <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
        <h2 class="text-3xl font-semibold text-center text-blue-600 dark:text-blue-400">Reset Your Password</h2>
        <p class="text-center text-gray-600 dark:text-gray-300 mb-6">Enter your email address to receive a link to reset your password.</p>
        <form>
            <div class="mb-4">
                <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email Address</label>
                <input type="email" id="email" required class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" placeholder="[email protected]">
            </div>
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 text-white font-semibold py-2 px-4 rounded-md transition duration-200">Send Password Reset Link</button>
        </form>
        <div class="mt-4 text-center">
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Go back to login</a>
        </div>
    </div>
    <div class="mt-6 flex justify-center">
        <img src="https://picsum.photos/60" alt="User Avatar" class="rounded-full border-4 border-white dark:border-gray-800">
    </div>
</div>

Interactive Components Component

A brutalist-inspired interactive component for a blog, featuring high contrast earth tones, responsive design, and dark mode support.

Open Preview

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-6 lg:p-12 font-mono">

  <!-- Article Card with Brutalist Elements -->
  <div class="max-w-xl mx-auto bg-amber-700 dark:bg-amber-900 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000,12px_12px_0_0_#a16207] dark:shadow-[8px_8px_0_0_#fff,12px_12px_0_0_#44403c] transition duration-300 hover:shadow-[16px_16px_0_0_#000,20px_20px_0_0_#a16207] dark:hover:shadow-[16px_16px_0_0_#fff,20px_20px_0_0_#44403c]">
    <div class="p-6 border-b-4 border-black dark:border-white">
      <div class="text-sm font-bold mb-2 uppercase">Featured Article</div>
      <h2 class="text-3xl font-bold mb-4 leading-tight">The Unyielding Spirit of Brutalist Architecture</h2>
      <img src="https://picsum.photos/seed/brutalism/600/400" alt="Brutalist building" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
      <p class="mb-4">
        Exploring the raw beauty and controversial history of Brutalist structures. Their imposing forms and
        unadorned surfaces evoke a sense of permanence and honesty.
      </p>
      <a href="#" class="inline-block bg-black dark:bg-white text-white dark:text-black px-6 py-3 font-bold border-4 border-black dark:border-white transform translate-y-1 translate-x-1 hover:translate-y-0 hover:translate-x-0 transition duration-100">
        Read More
      </a>
    </div>

    <!-- Related Articles Section -->
    <div class="p-6 border-b-4 border-black dark:border-white">
      <h3 class="text-2xl font-bold mb-4">More to Explore</h3>
      <ul>
        <li class="mb-4 pb-4 border-b border-stone-700 dark:border-stone-300 last:border-b-0">
          <a href="#" class="block hover:underline">
            <h4 class="text-xl font-bold mb-1">Concrete Jungle: Brutalism in Urban Landscapes</h4>
            <p class="text-sm text-stone-700 dark:text-stone-300">An analysis of Brutalism

Minimalist Social Media Footer

A minimalist footer component with earth tones color scheme for social media interfaces. Responsive with dark theme support.

Open Preview

                <footer class="bg-gray-200 dark:bg-gray-800 py-6">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row justify-between items-center">
      <div class="mb-4 md:mb-0">
        <p class="text-gray-700 dark:text-gray-300 text-sm">&copy; 2023 SocialMedia. All rights reserved.</p>
      </div>
      <div class="flex space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300 ease-in-out">
          <i class="fab fa-facebook-f"></i>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300 ease-in-out">
          <i class="fab fa-twitter"></i>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300 ease-in-out">
          <i class="fab fa-instagram"></i>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300 ease-in-out">
          <i class="fab fa-linkedin-in"></i>
        </a>
      </div>
    </div>
  </div>
</footer>

1 ... 109 110 111 112 113 ... 242