Search Components

All Components

Browse all available Tailwind CSS components

Content Display Components Component

A simple and vibrant content display component with micro-interactions, responsive design, and dark theme support, suitable for blogs and content consumption. Uses picsum.photos for images and randomuser.me for avatars.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-black p-4 flex items-center justify-center">
  <div class="max-w-md w-full bg-white dark:bg-gray-700 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-purple-500/50 dark:hover:shadow-red-500/50">
    <div class="relative">
      <img class="w-full h-48 object-cover transition-opacity duration-300 hover:opacity-80" src="https://picsum.photos/600/400?random=1" alt="Article Thumbnail">
      <div class="absolute bottom-0 left-0 bg-black bg-opacity-50 dark:bg-opacity-70 text-white px-3 py-1 rounded-tr-lg text-sm font-semibold">
        Article
      </div>
    </div>
    <div class="p-5">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 transition-colors duration-300 hover:text-purple-700 dark:hover:text-red-400">
        The Future of Web Development
      </h3>
      <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed">
        Explore the exciting new trends and technologies shaping the web, from AI-powered tools to immersive user experiences.
      </p>
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-3">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-purple-500 dark:border-red-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
          <div>
            <p class="text-gray-800 dark:text-white font-semibold text-sm">John Doe</p>
            <p class="text-gray-500 dark:text-gray-400 text-xs">2 hours ago</p>
          </div>
        </div>
        <a href="#" class="text-purple-600 dark:text-red-400 hover:text-purple-800 dark:hover:text-red-600 transition-colors duration-300 font-medium text-sm flex items-center group">
          Read More
          <svg class="ml-1 w-4 h-4 transform transition-transform duration-300 group-hover:translate-x-1" 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="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
        </a>
      </div>
    </div>
  </div>
</div>

Product Comparison Component

A product comparison component with Skeuomorphism design style, Pastel color scheme, and Moderate complexity level, designed for dashboards. It includes responsive design and dark theme support using Tailwind CSS.

Open Preview

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Comparison</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'selector',
            theme: {
                extend: {
                    colors: {
                        pastelPink: '#FFD1DC',
                        pastelBlue: '#AEC6CF',
                        pastelGreen: '#77DD77',
                        pastelYellow: '#FDFD96',
                        pastelPurple: '#B39EB5',
                        darkBackground: '#2D3748',
                        darkCard: '#4A5568',
                        darkText: '#E2E8F0'
                    },
                    boxShadow: {
                        skeuo: '9px 9px 18px #a7a7a7, -9px -9px 18px #ffffff',
                        skeuoDark: '9px 9px 18px #222B36, -9px -9px 18px #384350'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-200 dark:bg-darkBackground p-8">

    <div class="max-w-6xl mx-auto bg-white dark:bg-darkCard rounded-xl shadow-skeuo dark:shadow-skeuoDark p-8">
        <h1 class="text-3xl font-bold mb-8 text-gray-800 dark:text-darkText text-center">Product Comparison</h1>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

            <!-- Product 1 -->
            <div class="bg-pastelPink dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:scale-105 active:scale-95 ease-in-out border-t-4 border-l-4 border-gray-300 dark:border-gray-600">
                <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-darkText">Product Alpha</h2>
                <img src="https://picsum.photos/300/200?random=1" alt="Product Alpha" class="w-full h-48 object-cover rounded-md mb-4 shadow-inner">
                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature A</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature B</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-red-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg> Feature C</li>
                </ul>
                <div class="mt-6 text-center">
                    <button class="bg-pastelPurple dark:bg-purple-700 text-white font-bold py-2 px-6 rounded-full shadow-md text-lg active:shadow-none">
                        View Details
                    </button>
                </div>
            </div>

            <!-- Product 2 -->
            <div class="bg-pastelBlue dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:scale-105 active:scale-95 ease-in-out border-t-4 border-l-4 border-gray-300 dark:border-gray-600">
                <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-darkText">Product Beta</h2>
                <img src="https://picsum.photos/300/200?random=2" alt="Product Beta" class="w-full h-48 object-cover rounded-md mb-4 shadow-inner">
                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature A</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature D</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature E</li>
                </ul>
                <div class="mt-6 text-center">
                    <button class="bg-pastelPurple dark:bg-purple-700 text-white font-bold py-2 px-6 rounded-full shadow-md text-lg active:shadow-none">
                        View Details
                    </button>
                </div>
            </div>

            <!-- Product 3 -->
            <div class="bg-pastelGreen dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:scale-105 active:scale-95 ease-in-out border-t-4 border-l-4 border-gray-300 dark:border-gray-600">
                <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-darkText">Product Gamma</h2>
                <img src="https://picsum.photos/300/200?random=3" alt="Product Gamma" class="w-full h-48 object-cover rounded-md mb-4 shadow-inner">
                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature A</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature F</li>
                    <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Feature G</li>
                </ul>
                <div class="mt-6 text-center">
                    <button class="bg-pastelPurple dark:bg-purple-700 text-white font-bold py-2 px-6 rounded-full shadow-md text-lg active:shadow-none">
                        View Details
                    </button>
                </div>
            </div>

        </div>
    </div>

</body>
</html>

Tabs Component

A responsive Tabs Component with a Skeuomorphic design, an Analogous color scheme, and a dark theme support, suitable for professional business websites. The component uses Tailwind CSS for styling and includes no JavaScript.

Open Preview

                <div class="bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-950 p-8 rounded-xl shadow-2xl m-4
            font-sans text-gray-800 dark:text-gray-200">

  <div class="flex border-b-2 border-gray-300 dark:border-gray-700 mb-6 space-x-2">
    <!-- Tab 1 Button -->
    <input type="radio" name="tabs" id="tab1" class="hidden" checked>
    <label for="tab1" class="relative block cursor-pointer px-6 py-3 text-lg font-semibold
                          text-gray-600 dark:text-gray-400
                          hover:text-amber-700 hover:dark:text-amber-300
                          transition-colors duration-300
                          peer-checked:text-amber-800 peer-checked:dark:text-white
                          peer-checked:bg-gradient-to-b peer-checked:from-white peer-checked:via-gray-100 peer-checked:to-gray-200
                          peer-checked:dark:from-gray-700 peer-checked:dark:via-gray-800 peer-checked:dark:to-gray-900
                          peer-checked:border-x peer-checked:border-t peer-checked:border-gray-300 peer-checked:dark:border-gray-700
                          rounded-tl-lg rounded-tr-lg
                          before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1 before:bg-transparent
                          peer-checked:before:bg-amber-500 peer-checked:before:dark:bg-amber-400
                          peer-checked:before:shadow-[0_0_15px_rgba(251,191,36,0.6)]">
      Company Profile
    </label>

    <!-- Tab 2 Button -->
    <input type="radio" name="tabs" id="tab2" class="hidden">
    <label for="tab2" class="relative block cursor-pointer px-6 py-3 text-lg font-semibold
                          text-gray-600 dark:text-gray-400
                          hover:text-amber-700 hover:dark:text-amber-300
                          transition-colors duration-300
                          peer-checked:text-amber-800 peer-checked:dark:text-white
                          peer-checked:bg-gradient-to-b peer-checked:from-white peer-checked:via-gray-100 peer-checked:to-gray-200
                          peer-checked:dark:from-gray-700 peer-checked:dark:via-gray-800 peer-checked:dark:to-gray-900
                          peer-checked:border-x peer-checked:border-t peer-checked:border-gray-300 peer-checked:dark:border-gray-700
                          rounded-tl-lg rounded-tr-lg
                          before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1 before:bg-transparent
                          peer-checked:before:bg-amber-500 peer-checked:before:dark:bg-amber-400
                          peer-checked:before:shadow-[0_0_15px_rgba(251,191,36,0.6)]">
      Our Services
    </label>

    <!-- Tab 3 Button -->
    <input type="radio" name="tabs" id="tab3" class="hidden">
    <label for="tab3" class="relative block cursor-pointer px-6 py-3 text-lg font-semibold
                          text-gray-600 dark:text-gray-400
                          hover:text-amber-700 hover:dark:text-amber-300
                          transition-colors duration-300
                          peer-checked:text-amber-800 peer-checked:dark:text-white
                          peer-checked:bg-gradient-to-b peer-checked:from-white peer-checked:via-gray-100 peer-checked:to-gray-200
                          peer-checked:dark:from-gray-700 peer-checked:dark:via-gray-800 peer-checked:dark:to-gray-900
                          peer-checked:border-x peer-checked:border-t peer-checked:border-gray-300 peer-checked:dark:border-gray-700
                          rounded-tl-lg rounded-tr-lg
                          before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1 before:bg-transparent
                          peer-checked:before:bg-amber-500 peer-checked:before:dark:bg-amber-400
                          peer-checked:before:shadow-[0_0_15px_rgba(251,191,36,0.6)]">
      Contact Us
    </label>
  </div>

  <!-- Tab Content 1 -->
  <div role="tabpanel" aria-labelledby="tab1" class="tab-content" id="content1">
    <h2 class="text-3xl font-bold text-amber-700 dark:text-amber-300 mb-4
               drop-shadow-lg">About Our Company</h2>
    <p class="mb-6 leading-relaxed text-gray-700 dark:text-gray-300">
      Founded in 2005, we have grown into a leading innovator in sustainable energy solutions.
      Our commitment to excellence and customer satisfaction drives us to deliver cutting-edge technologies.
      We believe in a future powered by clean, renewable resources, and we are dedicated to making that a reality.
    </p>
    <img src="https://picsum.photos/id/150/800/400" alt="Modern Office Building" class="rounded-lg shadow-xl mb-6">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div>
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Our Mission</h3>
        <p class="text-gray-600 dark:text-gray-400">To empower businesses and communities with reliable,
          eco-friendly energy alternatives, fostering a greener planet for generations to come.</p>
      </div>
      <div>
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Our Vision</h3>
        <p class="text-gray-600 dark:text-gray-400">To be the global leader in renewable energy, recognized for our
          innovation, integrity, and significant positive impact on the environment.</p>
      </div>
    </div>
  </div>

  <!-- Tab Content 2 -->
  <div role="tabpanel" aria-labelledby="tab2" class="tab-content hidden" id="content2">
    <h2 class="text-3xl font-bold text-amber-700 dark:text-amber-300 mb-4
               drop-shadow-lg">Comprehensive Service Portfolio</h2>
    <p class="mb-6 leading-relaxed text-gray-700 dark:text-gray-300">
      We offer a wide array of services designed to meet the diverse needs of our clients,
      from initial consultation and system design to installation and ongoing maintenance.
      Our solutions are tailored to maximize efficiency and deliver sustainable results.
    </p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700
                  hover:shadow-xl transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Solar Solutions</h3>
        <p class="text-gray-600 dark:text-gray-400">Residential and commercial solar panel installation and maintenance.</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700
                  hover:shadow-xl transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Wind Energy Consulting</h3>
        <p class="text-gray-600 dark:text-gray-400">Site assessment, turbine selection, and project management.</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700
                  hover:shadow-xl transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Energy Audits</h3>
        <p class="text-gray-600 dark:text-gray-400">Thorough analysis to identify energy inefficiencies and recommend improvements.</p>
      </div>
    </div>
    <img src="https://picsum.photos/id/152/800/400" alt="Renewable Energy Solutions" class="rounded-lg shadow-xl">
  </div>

  <!-- Tab Content 3 -->
  <div role="tabpanel" aria-labelledby="tab3" class="tab-content hidden" id="content3">
    <h2 class="text-3xl font-bold text-amber-700 dark:text-amber-300 mb-4
               drop-shadow-lg">Connect With Us</h2>
    <p class="mb-6 leading-relaxed text-gray-700 dark:text-gray-300">
      We are always eager to hear from you. Whether you have a question, a project inquiry, or just want to chat,
      our team is ready to assist. Reach out to us through the methods below!
    </p>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Our Office</h3>
        <p class="text-gray-600 dark:text-gray-400">123 Eco-Friendly Lane, Green City, GC 12345</p>
        <p class="text-gray-600 dark:text-gray-400">United States</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Get in Touch</h3>
        <p class="text-gray-600 dark:text-gray-400">Email: <a href="mailto:[email protected]"
                                                              class="text-amber-600 dark:text-amber-400 hover:underline">[email protected]</a></p>
        <p class="text-gray-600 dark:text-gray-400">Phone: (123) 456-7890</p>
      </div>
    </div>
    <div class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Service Representative"
           class="w-20 h-20 rounded-full shadow-lg border-4 border-amber-400 dark:border-amber-500">
      <div>
        <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe, Lead Representative</p>
        <p class="text-gray-600 dark:text-gray-400">"We're here to help you power your future."</p>
      </div>
    </div>
  </div>

</div>

<style>
  /* Base styling for the tab content - hidden by default */
  .tab-content {
    display: none;
  }

  /* Show the content associated with the checked radio button */
  input[name="tabs"]:checked + label + .tab-content {
    display: block;
  }

  /* If using sibling combinator for tab content not directly adjacent */
  input#tab1:checked ~ #content1,
  input#tab2:checked ~ #content2,
  input#tab3:checked ~ #content3 {
    display: block;
  }
</style>

Notifications Component

A Notifications component featuring a glassmorphism design with a monochromatic color scheme, tailored for business/corporate web applications. The component includes various interactive elements and supports dark mode.

Open Preview

                <div class="flex flex-col items-center justify-center p-8 bg-gray-900 text-white min-h-screen">
    <div class="bg-gray-800 backdrop-blur-md bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-2xl font-bold mb-4">Notifications</h2>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">John Doe</p>
                <p class="text-sm">You have a meeting scheduled at 3 PM.</p>
                <span class="text-xs text-gray-400">10 minutes ago</span>
            </div>
        </div>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">Jane Smith</p>
                <p class="text-sm">Your invoice has been paid.</p>
                <span class="text-xs text-gray-400">15 minutes ago</span>
            </div>
        </div>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/men/13.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">Mike Johnson</p>
                <p class="text-sm">New comment on your post.</p>
                <span class="text-xs text-gray-400">30 minutes ago</span>
            </div>
        </div>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/women/14.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">Emily Davis</p>
                <p class="text-sm">Project deadline is approaching.</p>
                <span class="text-xs text-gray-400">1 hour ago</span>
            </div>
        </div>
        <div class="mt-4 text-center">
            <button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                View All Notifications
            </button>
        </div>
    </div>
</div>

Social Share Buttons Component

A minimalist social share buttons component designed for dashboards, featuring a vibrant color scheme and responsive design, with dark mode support.

Open Preview

                <div class="flex items-center justify-center space-x-4 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Share this Dashboard</h2>
  <div class="flex space-x-2">
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-red-500 text-white hover:bg-red-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=1" alt="Share on Facebook" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=2" alt="Share on Twitter" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-green-500 text-white hover:bg-green-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=3" alt="Share on LinkedIn" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-yellow-500 text-white hover:bg-yellow-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=4" alt="Share via Email" class="w-5 h-5" />
    </a>
  </div>
</div>

Back to Top Button Component

A minimalist and flat Back to Top Button Component for dashboards, featuring a monochromatic color scheme. It's moderately complex with interactive features, a responsive design, and dark theme support, built purely with HTML and Tailwind CSS.

Open Preview

                <div class="fixed bottom-4 right-4">
  <a href="#" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-full shadow-md hover:bg-gray-400 dark:hover:bg-gray-600 transition-colors duration-300 ease-in-out flex items-center justify-center">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
    </svg>
  </a>
</div>

Mega Menu Component

A responsive Mega Menu Component designed in Dark Mode UI with a Grayscale color scheme for social media interfaces.

Open Preview

                <div class="bg-gray-900 text-white p-5">
    <div class="container mx-auto">
        <div class="flex justify-between items-center">
            <h1 class="text-xl font-bold">Social Media</h1>
            <nav class="hidden md:flex space-x-4">
                <a href="#" class="hover:underline">Home</a>
                <a href="#" class="hover:underline">Profile</a>
                <a href="#" class="hover:underline">Messages</a>
                <a href="#" class="hover:underline">Settings</a>
            </nav>
            <div class="md:hidden cursor-pointer">
                <span class="block w-6 h-1 bg-white mb-1"></span>
                <span class="block w-6 h-1 bg-white mb-1"></span>
                <span class="block w-6 h-1 bg-white"></span>
            </div>
        </div>
        <div class="mt-5 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
                <img src="https://picsum.photos/200/150" alt="Image 1" class="rounded-lg mb-3">
                <p class="text-center">Title 1</p>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
                <img src="https://picsum.photos/200/150" alt="Image 2" class="rounded-lg mb-3">
                <p class="text-center">Title 2</p>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
                <img src="https://picsum.photos/200/150" alt="Image 3" class="rounded-lg mb-3">
                <p class="text-center">Title 3</p>
            </div>
        </div>
    </div>
</div>

<div class="bg-gray-800 text-gray-300 p-5">
    <div class="container mx-auto">
        <h2 class="text-lg font-semibold">User Profiles</h2>
        <div class="mt-4 grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 1</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 2" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 2</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User 3" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 3</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User 4" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 4</p>
            </div>
        </div>
    </div>
</div>

Community Forum Component

A minimalist community forum component for e-commerce, featuring a clean design, triadic color scheme, and dark mode support.

Open Preview

                <div class="max-w-5xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <!-- Forum Header -->
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
    <p class="text-gray-600 dark:text-gray-300 mb-6">Join the conversation about your favorite products!</p>

    <!-- Post List -->
    <div class="space-y-4">
        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
                <p class="text-gray-600 dark:text-gray-300">What is the best camera for beginners?</p>
                <div class="text-sm text-gray-500 dark:text-gray-400">12 Replies | 2 Days Ago</div>
            </div>
        </div>

        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Jane Smith</h3>
                <p class="text-gray-600 dark:text-gray-300">Can anyone recommend a good laptop?</p>
                <div class="text-sm text-gray-500 dark:text-gray-400">8 Replies | 3 Days Ago</div>
            </div>
        </div>

        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Michael Johnson</h3>
                <p class="text-gray-600 dark:text-gray-300">Best headphones under $100?</p>
                <div class="text-sm text-gray-500 dark:text-gray-400">5 Replies | 1 Week Ago</div>
            </div>
        </div>
    </div>

    <!-- Post Input -->
    <div class="mt-6">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Start a New Discussion</h4>
        <textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-lg focus:outline-none focus:ring focus:ring-blue-400 dark:focus:ring-blue-500" rows="4" placeholder="Write your message..."></textarea>
        <button class="mt-2 px-6 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Post</button>
    </div>
</div>

Functional Components Dashboard

A responsive dashboard component designed with Material Design principles and a monochromatic color scheme. It features grid-based layouts, interactive elements, and dark theme support using Tailwind CSS.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 1</h2>
            <img src="https://picsum.photos/200?random=1" alt="Image 1" class="w-full h-48 object-cover rounded my-2">
            <p class="text-gray-600 dark:text-gray-400">Details about card 1.</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 2</h2>
            <img src="https://picsum.photos/200?random=2" alt="Image 2" class="w-full h-48 object-cover rounded my-2">
            <p class="text-gray-600 dark:text-gray-400">Details about card 2.</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 3</h2>
            <img src="https://picsum.photos/200?random=3" alt="Image 3" class="w-full h-48 object-cover rounded my-2">
            <p class="text-gray-600 dark:text-gray-400">Details about card 3.</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">User Profile</h2>
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-20 h-20 rounded-full mb-2">
            <p class="text-gray-600 dark:text-gray-400">User Name</p>
            <p class="text-gray-500 dark:text-gray-500">User Email</p>
        </div>
    </div>
</div>

Image Lightbox Component

A responsive image lightbox component with dark mode support. This component displays a gallery of images, and clicking on an image opens a full-screen modal with navigation arrows to browse through the images. It features a close button and uses vibrant colors for highlighting interactive elements. The design is tailored for a business/corporate context, ensuring a professional yet engaging user experience.

Open Preview

                <div class="bg-gray-900 min-h-screen p-8">
  <h1 class="text-4xl font-bold text-white mb-8 text-center">Our Work</h1>

  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
    <!-- Image 1 -->
    <div class="group cursor-pointer relative" onclick="openLightbox('img1')">
      <img id="img1-thumb" src="https://picsum.photos/seed/picsum1/400/300" alt="Image 1" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 group-hover:scale-105"/>
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-lg font-semibold">View Project</p>
      </div>
    </div>

    <!-- Image 2 -->
    <div class="group cursor-pointer relative" onclick="openLightbox('img2')">
      <img id="img2-thumb" src="https://picsum.photos/seed/picsum2/400/300" alt="Image 2" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 group-hover:scale-105"/>
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-lg font-semibold">View Project</p>
      </div>
    </div>

    <!-- Image 3 -->
    <div class="group cursor-pointer relative" onclick="openLightbox('img3')">
      <img id="img3-thumb" src="https://picsum.photos/seed/picsum3/400/300" alt="Image 3" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 group-hover:scale-105"/>
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-lg font-semibold">View Project</p>
      </div>
    </div>

    <!-- Image 4 -->
    <div class="group cursor-pointer relative" onclick="openLightbox('img4')">
      <img id="img4-thumb" src="https://picsum.photos/seed/picsum4/400/300" alt="Image 4" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 group-hover:scale-105"/>
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-lg font-semibold">View Project</p>
      </div>
    </div>

    <!-- Image 5 -->
    <div class="group cursor-pointer relative" onclick="openLightbox('img5')">
      <img id="img5-thumb" src="https://picsum.photos/seed/picsum5/400/300" alt="Image 5" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 group-hover:scale-105"/>
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-lg font-semibold">View Project</p>
      </div>
    </div>

    <!-- Image 6 -->
    <div class="group cursor-pointer relative" onclick="openLightbox('img6')">
      <img id="img6-thumb" src="https://picsum.photos/seed/picsum6/400/300" alt="Image 6" class="w-full h-48 object-cover rounded-lg shadow-lg transform transition duration-500 group-hover:scale-105"/>
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
        <p class="text-white text-lg font-semibold">View Project</p>
      </div>
    </div>
  </div>

  <!-- Lightbox Modal -->
  <div id="lightbox-modal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden">
    <div class="relative w-11/12 max-w-4xl max-h-[90vh] flex flex-col">
      <button class="absolute top-4 right-4 text-white text-3xl font-bold p-2 hover:text-red-500 transition-colors duration-300 z-10" onclick="closeLightbox()">&times;</button>
      <img id="lightbox-img" src="" alt="Lightbox Image" class="max-w-full max-h-full object-contain rounded-lg shadow-xl"/>
      <div class="absolute bottom-4 left-0 right-0 flex justify-between px-4">
        <button class="bg-purple-600 text-white p-3 rounded-full hover:bg-purple-700 transition-colors duration-300 shadow-lg" onclick="changeImage(-1)">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
          </svg>
        </button>
        <button class="bg-purple-600 text-white p-3 rounded-full hover:bg-purple-700 transition-colors duration-300 shadow-lg" onclick="changeImage(1)">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </button>
      </div>
      <p id="lightbox-caption" class="text-white text-center mt-4 text-lg"></p>
    </div>
  </div>
</div>

<script>
  const images = [
    { id: 'img1', src: 'https://picsum.photos/seed/picsum1/800/600', caption: 'Project Alpha - Innovative Solutions' },
    { id: 'img2', src: 'https://picsum.photos/seed/picsum2/800/600', caption: 'Project Beta - Strategic Partnerships' },
    { id: 'img3', src: 'https://picsum.photos/seed/picsum3/800/600', caption: 'Project Gamma - Creative Designs' },
    { id: 'img4', src: 'https://picsum.photos/seed/picsum4/800/600', caption: 'Project Delta - Digital Transformation' },
    { id: 'img5', src: 'https://picsum.photos/seed/picsum5/800/600', caption: 'Project Epsilon - Global Reach' },
    { id: 'img6', src: 'https://picsum.photos/seed/picsum6/800/600', caption: 'Project Zeta - Future Technologies' }
  ];
  let currentIndex = 0;

  function openLightbox(imageId) {
    const index = images.findIndex(img => img.id === imageId);
    if (index !== -1) {
      currentIndex = index;
      updateLightboxContent();
      document.getElementById('lightbox-modal').classList.remove('hidden');
    }
  }

  function closeLightbox() {
    document.getElementById('lightbox-modal').classList.add('hidden');
  }

  function changeImage(direction) {
    currentIndex = (currentIndex + direction + images.length) % images.length;
    updateLightboxContent();
  }

  function updateLightboxContent() {
    const currentImage = images[currentIndex];
    document.getElementById('lightbox-img').src = currentImage.src;
    document.getElementById('lightbox-caption').textContent = currentImage.caption;
  }

  // Close lightbox on escape key
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
      closeLightbox();
    }
  });
</script>

1 ... 152 153 154 155 156 ... 335

Search Components

Categories

All Components