Search Components

All Components

Browse all available Tailwind CSS components

Activity Feed Component

Activity Feed Component with Glassmorphism style, Vibrant color scheme, Moderate complexity, and responsive dark theme support.

Open Preview

                <div class="relative antialiased px-4 dark:bg-gray-900 min-h-screen">
    <div class="max-w-xl mx-auto">
        <div class="relative">
            <span class="absolute top-0 left-2/4 -ml-px h-full" aria-hidden="true">
                <span class="w-0.5 h-full bg-gray-300 block dark:bg-gray-700"></span>
            </span>

            <ul class="relative">
                <!-- Item -->
                <li class="relative mb-6">
                    <div class="flex items-center">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-indigo-500 flex-shrink-0 shadow">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.004 9.004 0 01-4.964-1.484L3 20l1.395-3.493A8.968 8.968 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                        </div>
                        <div class="flex-grow p-3">
                            <div class="flex items-center justify-between">
                                <a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-indigo-500 dark:text-white">Alex Shatov</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">1hr ago</span>
                            </div>
                            <div class="text-gray-500 dark:text-gray-400">Preached to the choir about the importance of having a plan.</div>
                        </div>
                    </div>
                </li>
                <!-- Item -->
                <li class="relative mb-6">
                    <div class="flex items-center">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-pink-500 flex-shrink-0 shadow">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6H4m6 6H4m6 0v2m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6h2m-2 0h2m0 6h2m0-6v2"></path></svg>
                        </div>
                        <div class="flex-grow p-3">
                            <div class="flex items-center justify-between">
                                <a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-pink-500 dark:text-white">Mark Cameron</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">2hr ago</span>
                            </div>
                            <div class="text-gray-500 dark:text-gray-400">Discussed the benefits of a healthy diet and exercise.</div>
                        </div>
                    </div>
                </li>
                <!-- Item -->
                <li class="relative mb-6">
                    <div class="flex items-center">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-teal-500 flex-shrink-0 shadow animate-pulse">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        </div>
                        <div class="flex-grow p-3">
                            <div class="flex items-center justify-between">
                                <a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-500 to-teal-500 dark:text-white">Drew Berry</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">10hr ago</span>
                            </div>
                            <div class="text-gray-500 dark:text-gray-400">Is working on a new project.</div>
                        </div>
                    </div>
                </li>
                <!-- Item -->
                <li class="relative mb-6">
                    <div class="flex items-center">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-fuchsia-500 flex-shrink-0 shadow">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                        </div>
                        <div class="flex-grow p-3">
                            <div class="flex items-center justify-between">
                                <a href="#0" class="font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-fuchsia-500 dark:text-white">Danielle Price</a> <span class="text-gray-500 text-sm font-medium dark:text-gray-400">1 day ago</span>
                            </div>
                            <div class="text-gray-500 dark:text-gray-400">Completed the quarterly report.</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

Product Gallery Component

A responsive product gallery component designed with Material Design principles, featuring earth tone colors, suitable for dashboards and supporting dark mode.

Open Preview

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 bg-gray-100 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image" />
    <div class="p-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 1</h2>
      <p class="text-gray-600 dark:text-gray-400">A beautiful product description goes here.</p>
      <div class="flex items-center mt-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
        </div>
        <div class="ml-3">
          <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">Seller Name</span>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image" />
    <div class="p-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 2</h2>
      <p class="text-gray-600 dark:text-gray-400">A beautiful product description goes here.</p>
      <div class="flex items-center mt-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" />
        </div>
        <div class="ml-3">
          <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">Seller Name</span>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/202" alt="Product Image" />
    <div class="p-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 3</h2>
      <p class="text-gray-600 dark:text-gray-400">A beautiful product description goes here.</p>
      <div class="flex items-center mt-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" />
        </div>
        <div class="ml-3">
          <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">Seller Name</span>
        </div>
      </div>
    </div>
  </div>
</div>

A simple Progress Indicators component inspired by retro/vintage aesthetics of the 80s and 90s, utilizing a complementary color scheme. Designed for social media interfaces and responsive with dark theme support.

Open Preview

                <div class="flex flex-col items-center justify-center p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-white mb-4">Progress Indicators</h2>
    <div class="w-full bg-gray-700 dark:bg-gray-600 rounded-lg">
        <div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-lg" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between w-full text-sm mt-2 text-gray-300 dark:text-gray-200">
        <span>0%</span>
        <span>70%</span>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500">
        <div class="ml-3">
            <p class="text-md text-white">User Name</p>
            <p class="text-sm text-gray-400 dark:text-gray-500">Status: Active</p>
        </div>
    </div>
    <p class="text-gray-500 dark:text-gray-400 mt-2 text-center">Loading data...</p>
    <img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="mt-4 rounded-lg shadow-md">
</div>

Brutalism Pastel Add to Cart Button

Brutalism-inspired Add to Cart button with a pastel color scheme, moderate complexity, and responsive design with dark mode support. Suitable for a blog or content website.

Open Preview

                <button class="bg-pink-300 dark:bg-purple-700 text-gray-900 dark:text-gray-100 font-bold py-3 px-6 rounded-none border-4 border-black dark:border-white hover:bg-yellow-300 dark:hover:bg-yellow-600 hover:text-black dark:hover:text-white transition duration-300 ease-in-out shadow-lg dark:shadow-xl text-xl md:text-2xl">Add to Cart</button>

Social Components Component

A simple social media component using Tailwind CSS and designed with Material Design principles. It features vibrant colors and dark mode support, making it suitable for social networking interfaces.

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/200" alt="Social Media Image">
    <div class="p-4">
        <div class="flex items-center space-x-3">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div>
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-300">@johndoe</p>
            </div>
        </div>
        <p class="mt-2 text-gray-600 dark:text-gray-300">This is a sample post demonstrating the vibrant and energetic design suitable for social media engagement.</p>
        <div class="mt-4 flex justify-between">
            <button class="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">Like</button>
            <button class="px-4 py-2 text-white bg-green-500 rounded hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700">Comment</button>
        </div>
    </div>
</div>

Authentication Components

A complex, responsive Authentication component styled in a brutalism design with a dark theme, suitable for social media applications.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-gray-700 dark:bg-gray-700 p-6 rounded-lg shadow-xl w-full max-w-lg">
        <h1 class="text-3xl font-bold text-white mb-4">Join Our Community</h1>
        <div class="mb-4">
            <label for="email" class="block text-sm font-medium text-white">Email</label>
            <input type="email" id="email" class="mt-1 block w-full p-2 bg-gray-800 dark:bg-gray-800 text-white border border-gray-700 rounded-md focus:ring focus:ring-yellow-400" placeholder="[email protected]" required>
        </div>
        <div class="mb-4">
            <label for="password" class="block text-sm font-medium text-white">Password</label>
            <input type="password" id="password" class="mt-1 block w-full p-2 bg-gray-800 dark:bg-gray-800 text-white border border-gray-700 rounded-md focus:ring focus:ring-yellow-400" placeholder="********" required>
        </div>
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center">
                <input type="checkbox" id="remember" class="h-4 w-4 text-yellow-500 border-gray-300 rounded focus:ring focus:ring-yellow-400">
                <label for="remember" class="ml-2 block text-sm text-white">Remember me</label>
            </div>
            <a href="#" class="text-sm text-yellow-400 hover:underline">Forgot Password?</a>
        </div>
        <button class="w-full py-2 px-4 bg-yellow-500 hover:bg-yellow-400 text-white font-bold rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-300">Sign In</button>
        <div class="my-4 text-center"><span class="text-white">or</span></div>
        <button class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-500 text-white font-bold rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 flex items-center justify-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2"> Sign in with Google
        </button>
        <p class="mt-4 text-sm text-white text-center">
            Don't have an account? 
            <a href="#" class="text-yellow-400 hover:underline">Sign Up</a>
        </p>
    </div>
</div>

Video Player Component

A neomorphic video player component designed for portfolio showcasing, featuring a dark theme and responsive design using Tailwind CSS.

Open Preview

                <div class="flex flex-col items-center justify-center p-6 bg-gray-200 dark:bg-gray-900 rounded-lg shadow-lg">
    <div class="bg-gray-300 dark:bg-gray-800 w-full md:w-3/4 rounded-xl overflow-hidden shadow-inner">
        <video controls class="w-full h-auto">
            <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 text-center">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Showcase Title</h2>
        <p class="text-gray-600 dark:text-gray-400">A short description of the video content goes here. Highlight your work effectively.</p>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 shadow-inner">
        <div class="ml-3">
            <span class="text-gray-800 dark:text-gray-200 font-semibold">User Name</span>
        </div>
    </div>
</div>

Price Display Component

A complex price display component designed in skeuomorphic style mimicking real-world elements, suitable for blogs and content consumption with a triadic color scheme and responsive design with dark mode support.

Open Preview

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Price Display</h2>
    <div class="flex items-center justify-between mb-4">
        <img src="https://picsum.photos/80" alt="Product Image" class="w-20 h-20 rounded-full shadow-md border border-gray-300 dark:border-gray-600">
        <div class="flex-shrink-0">
            <span class="text-lg font-semibold text-gray-800 dark:text-white">$199.99</span>
            <span class="text-sm text-gray-500 dark:text-gray-300">/ each</span>
        </div>
    </div>
    <p class="text-gray-600 dark:text-gray-400 mb-6">This product is designed to give you the best experience and thus comes with an assurance of quality and excellent service.</p>
    <div class="flex items-center justify-between border-t border-gray-200 dark:border-gray-600 pt-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded shadow-md">Buy Now</button>
        <button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded shadow-md">Add to Cart</button>
    </div>
    <footer class="mt-4 text-gray-500 dark:text-gray-400 text-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mx-auto mb-1">
        <span class="text-sm">Posted by John Doe</span>
    </footer>
</div>

User Mentions Component

A Neumorphism-styled user mentions component using earth tones for a portfolio website, with responsive design and dark mode support.

Open Preview

                <div class="container mx-auto p-8 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl dark:shadow-xl-dark">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Mentions</h2>
  <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
    <div class="flex items-center bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-inner dark:shadow-inner-dark">
      <img class="w-12 h-12 rounded-full mr-4 shadow dark:shadow-dark" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
      </div>
    </div>

    <div class="flex items-center bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-inner dark:shadow-inner-dark">
      <img class="w-12 h-12 rounded-full mr-4 shadow dark:shadow-dark" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <div>
        <p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">@janesmith</p>
      </div>
    </div>

    <div class="flex items-center bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-inner dark:shadow-inner-dark">
      <img class="w-12 h-12 rounded-full mr-4 shadow dark:shadow-dark" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
      <div>
        <p class="text-gray-800 dark:text-gray-200 font-medium">Peter Jones</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">@peterjones</p>
      </div>
    </div>
  </div>
</div>

Alert Messages Component

A responsive skeuomorphic alert messages component designed for blogs/content consumption, featuring a complementary color scheme and dark theme support.

Open Preview

                <div class="max-w-md mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alert Title</h2>
    </div>
    <p class="text-gray-700 dark:text-gray-300">
        This is a simple alert message that mimics real-world alert styles, using complementary colors for the design.
    </p>
    <div class="mt-4 flex justify-end">
        <img src="https://picsum.photos/150/50?random" alt="Illustration" class="rounded-md shadow-md">
    </div>
</div>

1 ... 191 192 193 194 195 ... 335

Search Components

Categories

All Components

Activity Feed Component

Product Gallery Component

Progress Indicators Component

Brutalism Pastel Add to Cart Button

Social Components Component

Authentication Components

Video Player Component

Price Display Component

User Mentions Component

Alert Messages Component