Search Components

All Components

Browse all available Tailwind CSS components

Badges Component

A simple Glassmorphism-styled badges component for social media, featuring frosted glass effects with blur, analogous colors, and dark mode support using Tailwind CSS. It's responsive and uses picsum.photos for images and randomuser.me for avatars where necessary. No JavaScript is included.

Open Preview

                <div class="flex flex-wrap gap-2 p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
  <span class="px-3 py-1 rounded-full text-sm font-semibold bg-indigo-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-indigo-700 dark:text-gray-200">
    #SocialLife
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-purple-700 dark:text-gray-200">
    #Connections
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-blue-700 dark:text-gray-200">
    #Community
  </span>
</div>

Media Components Component

A complex, responsive, dark-mode compatible social media media component with a Glassmorphism style using vibrant colors.

Open Preview

                <div class="p-4 lg:p-8 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl shadow-xl max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-20">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full object-cover mr-4 border-2 border-purple-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
    <div>
      <p class="text-lg font-semibold text-indigo-700 dark:text-indigo-400">Alice Smith</p>
      <p class="text-gray-600 text-sm dark:text-gray-400">Posted on August 25, 2023</p>
    </div>
  </div>
  <div class="mb-4">
    <img class="rounded-lg object-cover w-full h-48 border-2 border-pink-500" src="https://picsum.photos/seed/social1/600/400" alt="Post Image">
  </div>
  <p class="text-gray-800 leading-relaxed mb-4 dark:text-gray-300">
    This is an example of a social media post content. Engaging and vibrant!
  </p>
  <div class="flex justify-between items-center text-gray-700 dark:text-gray-400">
    <div class="flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-red-500" 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" />
      </svg>
      <span>120 Likes</span>
    </div>
    <div class="flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-blue-500" 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.986 9.986 0 01-4.196-1.113A14.732 14.732 0 0112 20c-4.97 0-9-3.582-9-8s4.03-8 9-8a9.986 9.986 0 014.196 1.113A14.732 14.732 0 0112 4c4.97 0 9 3.582 9 8z" />
      </svg>
      <span>45 Comments</span>
    </div>
    <div class="flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 13.938 9 14.595 9 15.25V17.586a2 2 0 01-2.298 1.995L5 19.258V7.762c0-1.04.283-2.042.857-2.914m14.091 2.914c.574.872.857 1.874.857 2.914v10.492l-2.702 1.351A3 3 0 0115 19.586V15.25c0-.655.118-1.312.316-1.908a2.001 2.001 0 002.005-2.005L17.5 9.25v-2.702a2 2 0 00-2-2H11.7S9.25 4 7.709 4c-1.54 0-3.09.958-3.09 3.154V9l-.708-.354a2 2 0 00-2 0L3 9.25v-1.5c0-2.206 2.94-4.75 6-4.75S15 4 15 6.75v.5l1 .5H17a2 2 0 012 2v.993M2.44 19.09V15c0-1.414-.917-2.73-2.185-2.995M22.56 19.09V15c0-1.414.917-2.73 2.185-2.995" />
      </svg>
      <span>Share</span>
    </div>
  </div>
</div>

FiltersComponent

A responsive Filters Component designed in Material Design style for E-commerce applications with a dark theme support. It includes multiple interactive elements for an enhanced shopping experience.

Open Preview

                <div class="p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-lg font-bold mb-4 text-gray-900 dark:text-gray-100">Filters</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Categories</h3>
            <ul class="mt-2">
                <li><input type="checkbox" id="category1" class="mr-2"> <label for="category1" class="text-gray-700 dark:text-gray-300">Electronics</label></li>
                <li><input type="checkbox" id="category2" class="mr-2"> <label for="category2" class="text-gray-700 dark:text-gray-300">Fashion</label></li>
                <li><input type="checkbox" id="category3" class="mr-2"> <label for="category3" class="text-gray-700 dark:text-gray-300">Home Appliances</label></li>
                <li><input type="checkbox" id="category4" class="mr-2"> <label for="category4" class="text-gray-700 dark:text-gray-300">Books</label></li>
            </ul>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Price Range</h3>
            <input type="range" class="w-full" min="0" max="1000" step="10" value="500">
            <div class="flex justify-between text-gray-700 dark:text-gray-300">
                <span>$0</span>
                <span>$1000</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Brands</h3>
            <ul class="mt-2">
                <li><input type="checkbox" id="brand1" class="mr-2"> <label for="brand1" class="text-gray-700 dark:text-gray-300">Brand A</label></li>
                <li><input type="checkbox" id="brand2" class="mr-2"> <label for="brand2" class="text-gray-700 dark:text-gray-300">Brand B</label></li>
                <li><input type="checkbox" id="brand3" class="mr-2"> <label for="brand3" class="text-gray-700 dark:text-gray-300">Brand C</label></li>
            </ul>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Ratings</h3>
            <ul class="mt-2">
                <li><input type="radio" id="rating1" name="rating" class="mr-2" value="5"> <label for="rating1" class="text-gray-700 dark:text-gray-300">5 Stars</label></li>
                <li><input type="radio" id="rating2" name="rating" class="mr-2" value="4"> <label for="rating2" class="text-gray-700 dark:text-gray-300">4 Stars</label></li>
                <li><input type="radio" id="rating3" name="rating" class="mr-2" value="3"> <label for="rating3" class="text-gray-700 dark:text-gray-300">3 Stars</label></li>
            </ul>
        </div>
    </div>
    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">Apply Filters</button>
</div>

Gallery Component

A responsive Gallery Component using Tailwind CSS with Material Design style, suitable for a dashboard with dark theme support.

Open Preview

                <div class="container mx-auto p-6">
    <h2 class="text-3xl font-bold text-center text-gray-900 dark:text-gray-100 mb-6">Gallery Component</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <!-- Card 1 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/300" alt="Image 1" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 1</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 1.</p>
        </div>
        
        <!-- Card 2 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/301" alt="Image 2" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 2</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 2.</p>
        </div>
        
        <!-- Card 3 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/302" alt="Image 3" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 3</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 3.</p>
        </div>
        
        <!-- Card 4 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/303" alt="Image 4" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 4</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 4.</p>
        </div>
        
        <!-- More cards -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/304" alt="Image 5" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 5</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 5.</p>
        </div>
        
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/200/305" alt="Image 6" class="rounded-lg mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 6</h3>
            <p class="text-gray-600 dark:text-gray-300">Description of image 6.</p>
        </div>
    </div>
</div>

Feedback Components Component

Minimalist/Flat Design Feedback Component for Dashboard with Complementary Color Scheme and Moderate Complexity, Responsive and Dark Theme Support. Uses HTML and Tailwind CSS. No JavaScript. Features interactive elements. Images from picsum.photos and avatars from randomuser.me.

Open Preview

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
  <div class="flex items-center justify-between mb-4">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white">User Feedback</h2>
    <span class="text-sm text-gray-500 dark:text-gray-400">Last 30 days</span>
  </div>
  <div class="space-y-4">
    <div class="flex items-start space-x-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="flex items-center justify-between">
          <h4 class="text-sm font-medium text-gray-900 dark:text-white">John Doe</h4>
          <span class="text-xs text-gray-500 dark:text-gray-400">2 days ago</span>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-300">This dashboard is very helpful. The data is presented clearly.</p>
      </div>
    </div>
    <div class="flex items-start space-x-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="flex items-center justify-between">
          <h4 class="text-sm font-medium text-gray-900 dark:text-white">Jane Smith</h4>
          <span class="text-xs text-gray-500 dark:text-gray-400">5 days ago</span>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-300">I love the new features! Especially the real-time updates.</p>
      </div>
    </div>
    <div class="flex items-start space-x-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="flex items-center justify-between">
          <h4 class="text-sm font-medium text-gray-900 dark:text-white">Peter Jones</h4>
          <span class="text-xs text-gray-500 dark:text-gray-400">1 week ago</span>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-300">Could you add an option to export data as a CSV file?</p>
      </div>
    </div>
  </div>
  <div class="mt-6 flex justify-center">
    <button class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-indigo-700 dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800">View All Feedback</button>
  </div>
</div>

Neumorphism Product Comparison Component

A simple, responsive product comparison component in Neumorphism style with earth tones, dark theme support, and no JavaScript.

Open Preview

                <div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl dark:shadow-inner">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    </div>
</div>

Skip to Content Link Component

A visually engaging 'Skip to Content' link component designed for dashboards with a focus on microinteractions, utilizing a complementary color scheme and dark mode support through Tailwind CSS.

Open Preview

                <div class="relative">
    <a href="#content" class="skip-to-content block p-4 text-white bg-blue-500 transition-opacity duration-300 ease-in-out hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 dark:bg-purple-500 dark:hover:bg-purple-600 dark:focus:ring-pink-400">
        Skip to Content
    </a>
    <div class="absolute top-0 left-0 p-2 mt-2 rounded-md bg-gray-800 dark:bg-gray-900">
        <p class="text-sm text-gray-300 dark:text-gray-200">Press <span class="font-semibold">Tab</span> to focus on the link and skip to the main content.</p>
    </div>
</div>
<div id="content" class="mt-10 p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Dashboard Content</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="p-4 bg-white dark:bg-gray-900 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100" alt="Data Visualization" class="w-full h-auto rounded-md">
            <p class="mt-2 text-lg font-semibold text-gray-700 dark:text-gray-300">Data Visualization 1</p>
        </div>
        <div class="p-4 bg-white dark:bg-gray-900 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100" alt="Data Visualization" class="w-full h-auto rounded-md">
            <p class="mt-2 text-lg font-semibold text-gray-700 dark:text-gray-300">Data Visualization 2</p>
        </div>
    </div>
</div>

E-commerce Components Component

A responsive E-commerce component designed for dark mode with triadic color scheme, featuring product listings, a shopping cart icon, and user avatar.

Open Preview

                <div class="bg-gray-900 text-white min-h-screen p-8">
    <header class="flex justify-between items-center mb-8">
        <h1 class="text-3xl font-bold">ShopEase</h1>
        <div class="relative">
            <button class="bg-blue-600 p-2 rounded-full hover:bg-blue-500 focus:outline-none">
                <svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 2H7v2h6a1 1 0 011 1v12a1 1 0 01-1 1H7a1 1 0 01-1-1v-6H4v7a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"/></svg>
            </button>
            <span class="absolute top-0 right-0 bg-red-600 text-white text-xs font-bold rounded-full px-1">3</span>
        </div>
    </header>

    <main class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200/300" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-semibold">Product Title</h2>
                <p class="text-gray-400">$29.99</p>
                <button class="mt-2 bg-green-600 text-white py-1 px-4 rounded hover:bg-green-500 focus:outline-none">Add to Cart</button>
            </div>
        </div>
        
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200/300?random=1" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-semibold">Another Product</h2>
                <p class="text-gray-400">$54.99</p>
                <button class="mt-2 bg-green-600 text-white py-1 px-4 rounded hover:bg-green-500 focus:outline-none">Add to Cart</button>
            </div>
        </div>
        
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200/300?random=2" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-semibold">Cool Gadget</h2>
                <p class="text-gray-400">$19.99</p>
                <button class="mt-2 bg-green-600 text-white py-1 px-4 rounded hover:bg-green-500 focus:outline-none">Add to Cart</button>
            </div>
        </div>
    </main>

    <footer class="mt-10 text-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mx-auto mb-2">
        <p class="font-semibold">Welcome, User!</p>
    </footer>
</div>

Buttons Component

A minimalist/flat design Buttons Component with a grayscale color scheme. It is suitable for business/corporate websites and has moderate complexity with some interactive features. It is responsive and supports dark theme using Tailwind CSS.

Open Preview

                <div class="flex flex-wrap justify-center gap-4 p-4">
  <!-- Primary Button -->
  <button class="px-6 py-3 font-semibold text-white bg-gray-800 rounded-md shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-50
                     dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-300">
    Primary Button
  </button>

  <!-- Secondary Button -->
  <button class="px-6 py-3 font-semibold text-gray-800 bg-white border border-gray-300 rounded-md shadow-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50
                     dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800 dark:focus:ring-gray-700">
    Secondary Button
  </button>

  <!-- Tertiary Button -->
  <button class="px-6 py-3 font-semibold text-gray-600 bg-transparent rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50
                     dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-700">
    Tertiary Button
  </button>

  <!-- Disabled Button -->
  <button class="px-6 py-3 font-semibold text-gray-400 bg-gray-200 rounded-md cursor-not-allowed
                     dark:bg-gray-700 dark:text-gray-600" disabled>
    Disabled Button
  </button>

  <!-- Button with Icon -->
  <button class="flex items-center px-6 py-3 font-semibold text-white bg-gray-800 rounded-md shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-50
                     dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-300">
    <svg class="w-5 h-5 mr-2" 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 4v16m8-8H4"></path></svg>
    Button with Icon
  </button>

  <!-- Outline Button with Icon -->
  <button class="flex items-center px-6 py-3 font-semibold text-gray-800 bg-white border border-gray-300 rounded-md shadow-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50
                     dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800 dark:focus:ring-gray-700">
    <svg class="w-5 h-5 mr-2" 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="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
    Outline Button with Icon
  </button>
</div>

Retro Vintage Header Component

A responsive header component with a Retro/Vintage style tailored for a dashboard with dark theme support.

Open Preview

                <header class="bg-gradient-to-r from-purple-700 via-pink-500 to-yellow-500 dark:bg-gradient-to-r dark:from-purple-900 dark:via-pink-700 dark:to-yellow-700 p-5">
    <div class="flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/50" alt="Logo" class="rounded-full mr-3">
            <h1 class="text-white text-3xl font-bold">My Dashboard</h1>
        </div>
        <nav class="space-x-4">
            <a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Home</a>
            <a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Reports</a>
            <a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Settings</a>
        </nav>
    </div>
    <div class="mt-4">
        <input type="text" placeholder="Search..." class="p-2 rounded-md bg-white dark:bg-gray-800 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-yellow-500 w-full max-w-md">
    </div>
    <div class="mt-4 flex items-center space-x-3">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-8 w-8">
            <span class="ml-2 text-white">John Doe</span>
        </div>
        <button class="bg-yellow-500 text-white px-4 py-2 rounded-md hover:bg-yellow-400 transition duration-300">Logout</button>
    </div>
</header>

1 ... 159 160 161 162 163 ... 335