All Components

Browse all available Tailwind CSS components

Product Cards Component

A responsive product card component designed in Material Design style, featuring a grayscale color scheme. It includes an image, title, description, and a button with dark mode support using Tailwind CSS.

Open Preview

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Product Image">
    <div class="p-4">
        <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Product Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product showcasing its features and benefits.</p>
        <div class="mt-4">
            <a href="#" class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Product</a>
        </div>
    </div>
</div>

<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-6">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/301" alt="Product Image">
    <div class="p-4">
        <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Product Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product showcasing its features and benefits.</p>
        <div class="mt-4">
            <a href="#" class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Product</a>
        </div>
    </div>
</div>

<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-6">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/302" alt="Product Image">
    <div class="p-4">
        <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Product Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product showcasing its features and benefits.</p>
        <div class="mt-4">
            <a href="#" class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">View Product</a>
        </div>
    </div>
</div>

<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-6">
    <div class="flex items-center p-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <div class="ml-3">
            <h3 class="text-gray-800 dark:text-gray-200 font-bold">User Name</h3>
            <p class="text-gray-600 dark:text-gray-400">Product Owner</p>
        </div>
    </div>
</div>

Gallery Component

A responsive gallery component with microinteractions for social media, designed with a dark theme and a simple layout using Tailwind CSS.

Open Preview

                <div class="container mx-auto p-4">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/200?random=1" alt="Gallery image 1" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-blue-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
            <div class="absolute bottom-0 left-0 p-4 text-white">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                    <span class="font-bold">John Doe</span>
                </div>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/201?random=2" alt="Gallery image 2" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-green-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
            <div class="absolute bottom-0 left-0 p-4 text-white">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                    <span class="font-bold">Jane Smith</span>
                </div>
            </div>
        </div>
        <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
            <img src="https://picsum.photos/300/202?random=3" alt="Gallery image 3" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-purple-500 opacity-0 group-hover:opacity-75 transition-opacity duration-300"></div>
            <div class="absolute bottom-0 left-0 p-4 text-white">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                    <span class="font-bold">Michael Johnson</span>
                </div>
            </div>
        </div>
        <!-- Repeat as necessary for more images -->
    </div>
</div>

Retro Vintage Authentication Components

A complex responsive authentication component with a retro/vintage design, suitable for a data visualization and control dashboard. It features triadic colors and interactive elements.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-900 text-white">
    <div class="bg-gray-800 shadow-lg rounded-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-center mb-6">Welcome Back!</h2>
        <form>
            <div class="mb-4">
                <label class="block text-sm font-medium mb-2">Email</label>
                <input type="email" class="block w-full p-2 border border-gray-600 rounded-md bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500" placeholder="[email protected]" required>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium mb-2">Password</label>
                <input type="password" class="block w-full p-2 border border-gray-600 rounded-md bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500" placeholder="Your password" required>
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" id="remember-me">
                    <label for="remember-me" class="ml-2 text-sm">Remember me</label>
                </div>
                <a href="#" class="text-sm text-blue-400 hover:underline">Forgot password?</a>
            </div>
            <button type="submit" class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-md transition-colors">Login</button>
        </form>
        <div class="mt-6 text-center">
            <p class="text-sm">Don't have an account? <a href="#" class="text-blue-400 hover:underline">Sign up</a></p>
        </div>
        <div class="mt-6 flex items-center justify-between border-t border-gray-600 pt-4">
            <div class="flex items-center">
                <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full border border-gray-600">
                <span class="ml-2 text-sm">John Doe</span>
            </div>
            <a href="#" class="text-sm text-blue-400 hover:underline">Settings</a>
        </div>
    </div>
</div>

Brutal Pagination Component

A simple, brutalist-style pagination component for social media interfaces with pastel colors, dark mode support, and responsiveness.

Open Preview

                <nav aria-label="Pagination" class="flex justify-between text-pastel-600 dark:text-pastel-400 font-mono text-lg">
  <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">Previous</a>
  <div>
    <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">1</a>
    <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">2</a>
    <a href="#" aria-current="page" class="bg-pastel-400 dark:bg-pastel-600 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1">3</a>
    <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">4</a>
    <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">5</a>
  </div>
  <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">Next</a>
</nav>

3D-Vibrant-Follow-Button

A simple, 3D-inspired follow button component with vibrant colors for business websites. It's responsive and includes dark theme support using only HTML and Tailwind CSS.

Open Preview

                <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md shadow-lg transform transition duration-300 hover:scale-105 active:scale-95 dark:bg-blue-800 dark:hover:bg-blue-900 dark:shadow-xl"> Follow </button>

Social Media E-commerce Card

E-commerce component with a social media focus, Glassmorphism style, monochromatic color scheme, complex layout, responsive, and dark theme support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex flex-wrap items-center justify-center">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 m-4">
    <div class="relative">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/social1/400/300" alt="Product Image">
      <div class="absolute top-0 right-0 bg-black bg-opacity-50 text-white text-xs font-bold px-3 py-1 m-2 rounded-full">Featured</div>
    </div>
    <div class="p-6">
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of Jonathan Reinink">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none">Jonathan Reinink</p>
            <p class="text-gray-600 dark:text-gray-400">Aug 14</p>
          </div>
        </div>
        <button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-white">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
          </svg>
        </button>
      </div>
      <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Product Title</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-gray-900 dark:text-white">$19.99</span>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Add to Cart</button>
      </div>
      <div class="mt-4 flex items-center">
        <button class="flex items-center text-gray-700 dark:text-gray-300 mr-4">
          <svg class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
          </svg>
          <span>24 Likes</span>
        </button>
        <button class="flex items-center text-gray-700 dark:text-gray-300">
          <svg class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.913 9.913 0 01-3.981-.82A10.022 10.022 0 003 4.636v0a10.029 10.029 0 011.021-.304A10.021 10.021 0 0012 21c4.97 0 9-3.582 9-8z"></path>
          </svg>
          <span>12 Comments</span>
        </button>
      </div>
    </div>
  </div>
</div>

Neumorphism Carousel Slider

Responsive Carousel Slider Component with Neumorphism style, Pastel color scheme, Moderate complexity, Social Media purpose, and Dark theme support using Tailwind CSS.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md p-6 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl neumorphism-light dark:neumorphism-dark">
    <div class="text-center text-gray-700 dark:text-gray-300 mb-6">
      <h2 class="text-2xl font-semibold">Social Media Carousel</h2>
    </div>
    <div class="relative">
      <div class="overflow-hidden rounded-lg">
        <div class="flex transition-transform duration-500 ease-in-out">
          <!-- Carousel Item 1 -->
          <div class="w-full flex-shrink-0">
            <img src="https://picsum.photos/400/250?random=1" alt="Carousel Image 1" class="w-full h-48 object-cover rounded-t-lg">
            <div class="p-4 bg-gray-300 dark:bg-gray-700 rounded-b-lg">
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-pink-300 dark:border-pink-700">
                <div>
                  <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
                </div>
              </div>
              <p class="text-gray-700 dark:text-gray-300">This is a great social media post! #tailwind #neumorphism</p>
            </div>
          </div>
          <!-- Carousel Item 2 -->
          <div class="w-full flex-shrink-0">
            <img src="https://picsum.photos/400/250?random=2" alt="Carousel Image 2" class="w-full h-48 object-cover rounded-t-lg">
            <div class="p-4 bg-gray-300 dark:bg-gray-700 rounded-b-lg">
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-purple-300 dark:border-purple-700">
                <div>
                  <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">@janesmith</p>
                </div>
              </div>
              <p class="text-gray-700 dark:text-gray-300">Enjoying the pastel vibes! ✨ #pastelaesthetic</p>
            </div>
          </div>
           <!-- Carousel Item 3 -->
          <div class="w-full flex-shrink-0">
            <img src="https://picsum.photos/400/250?random=3" alt="Carousel Image 3" class="w-full h-48 object-cover rounded-t-lg">
            <div class="p-4 bg-gray-300 dark:bg-gray-700 rounded-b-lg">
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-green-300 dark:border-green-700">
                <div>
                  <p class="font-semibold text-gray-800 dark:text-gray-200">Peter Jones</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">@peterjones</p>
                </div>
              </div>
              <p class="text-gray-700 dark:text-gray-300">Learning about Neumorphism. So cool! #uidesign</p>
            </div>
          </div>
        </div>
      </div>
      <!-- Navigation Dots (optional, requires JS for full functionality) -->
      <div class="flex justify-center mt-4 space-x-2">
        <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
        <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
        <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
      </div>
    </div>
  </div>
</div>

<style>
.neumorphism-light {
  box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}

.dark .neumorphism-dark {
  box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #2e2e2e;
}
</style>

Password Reset Component

A Password Reset component designed with a skeuomorphic style, using earth tones for a natural aesthetic and structured for dashboard applications. It supports dark mode and is responsive.

Open Preview

                <div class="max-w-md mx-auto mt-10 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Reset Your Password</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">Please enter your email address to receive a password reset link.</p>
    <form>
        <div class="mb-4">
            <label for="email" class="block text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
            <input type="email" id="email" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="[email protected]" required />
        </div>
        <div class="mb-4">
            <label for="new-password" class="block text-gray-700 dark:text-gray-300 mb-2">New Password</label>
            <input type="password" id="new-password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="Enter new password" required />
        </div>
        <div class="mb-4">
            <label for="confirm-password" class="block text-gray-700 dark:text-gray-300 mb-2">Confirm Password</label>
            <input type="password" id="confirm-password" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-400" placeholder="Re-enter new password" required />
        </div>
        <button type="submit" class="w-full py-3 bg-green-500 hover:bg-green-600 text-white rounded-lg transition duration-200">Reset Password</button>
    </form>
    <div class="mt-4 text-center">
        <p class="text-gray-600 dark:text-gray-400">Remembered your password? <a href="#" class="text-green-500 hover:underline">Log in</a></p>
    </div>
</div>

Filters Component

A skeuomorphic style filters component designed for dashboards with a grayscale color scheme and responsive design with dark theme support.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
    <h2 class="text-gray-900 dark:text-gray-100 text-lg font-bold mb-4">Filters</h2>
    <form class="flex flex-col space-y-4">
        <div class="flex items-center">
            <label for="search" class="text-gray-700 dark:text-gray-300 mr-2">Search:</label>
            <input type="text" id="search" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500" placeholder="Search..." />
        </div>
        <div class="flex items-center">
            <label for="category" class="text-gray-700 dark:text-gray-300 mr-2">Category:</label>
            <select id="category" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500">
                <option>All</option>
                <option>Category 1</option>
                <option>Category 2</option>
                <option>Category 3</option>
            </select>
        </div>
        <div class="flex items-center">
            <label for="date" class="text-gray-700 dark:text-gray-300 mr-2">Date:</label>
            <input type="date" id="date" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500" />
        </div>
        <button type="submit" class="bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-800 rounded-lg py-2 hover:bg-gray-700 dark:hover:bg-gray-200 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500 transition">Apply Filters</button>
    </form>
</div>

Glassmorphism Sales Chart

A simple, responsive chart component with a Glassmorphism style, vibrant color scheme, and dark mode support, suitable for e-commerce dashboards.

Open Preview

                <div class="p-4 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-30">
  <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h3>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="text-center">
      <p class="text-sm text-gray-600 dark:text-gray-300">Weekly Sales</p>
      <p class="text-2xl font-bold text-purple-600 dark:text-purple-400">$5,200</p>
    </div>
    <div class="text-center">
      <p class="text-sm text-gray-600 dark:text-gray-300">Monthly Sales</p>
      <p class="text-2xl font-bold text-teal-600 dark:text-teal-400">$18,500</p>
    </div>
  </div>
  <div class="mt-6">
    <div class="h-32 bg-gradient-to-r from-purple-400 to-teal-400 rounded-lg dark:from-purple-600 dark:to-teal-600"></div>
  </div>
</div>

1 ... 113 114 115 116 117 ... 242

Categories

All Components