Search Components

All Components

Browse all available Tailwind CSS components

                <div class="min-h-screen bg-neutral-100 p-8 flex items-center justify-center dark:bg-neutral-900">
  <div class="max-w-4xl w-full bg-white border-4 border-black p-10 shadow-[8px_8px_0_0_#000] dark:bg-neutral-800 dark:border-white dark:shadow-[8px_8px_0_0_#fff] relative">
    <div class="absolute top-0 left-0 -mt-2 -ml-2 w-4 h-4 bg-red-500 border-2 border-black dark:bg-red-700 dark:border-white"></div>
    <div class="absolute top-0 right-0 -mt-2 -mr-2 w-4 h-4 bg-red-500 border-2 border-black dark:bg-red-700 dark:border-white"></div>
    <div class="absolute bottom-0 left-0 -mb-2 -ml-2 w-4 h-4 bg-red-500 border-2 border-black dark:bg-red-700 dark:border-white"></div>
    <div class="absolute bottom-0 right-0 -mb-2 -mr-2 w-4 h-4 bg-red-500 border-2 border-black dark:bg-red-700 dark:border-white"></div>

    <h2 class="text-5xl md:text-7xl font-extrabold text-blue-700 mb-8 text-center uppercase tracking-tighter dark:text-orange-400 leading-none">
      Connect Your Profile
      <span class="block text-2xl md:text-4xl text-black dark:text-white mt-2">Showcase Your Brilliance</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <button class="w-full flex items-center justify-center px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-yellow-400 text-black shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-yellow-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        <img src="https://www.svgrepo.com/show/506497/google.svg" alt="Google" class="w-6 h-6 mr-3 filter dark:invert">
        Sign in with Google
      </button>

      <button class="w-full flex items-center justify-center px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-green-400 text-black shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-green-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        <img src="https://www.svgrepo.com/show/506499/github.svg" alt="GitHub" class="w-6 h-6 mr-3 filter dark:invert">
        Sign in with GitHub
      </button>

      <button class="w-full flex items-center justify-center px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-purple-400 text-black shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-purple-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        <img src="https://www.svgrepo.com/show/506518/linkedin.svg" alt="LinkedIn" class="w-6 h-6 mr-3 filter dark:invert">
        Sign in with LinkedIn
      </button>

      <button class="w-full flex items-center justify-center px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-pink-400 text-black shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-pink-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        <img src="https://www.svgrepo.com/show/506506/twitter.svg" alt="X" class="w-6 h-6 mr-3 filter dark:invert">
        Sign in with X
      </button>
    </div>

    <div class="mt-10 text-center">
      <p class="text-lg text-black dark:text-white font-mono">Or, connect manually:</p>
      <input type="email" placeholder="Your Email" class="mt-4 w-full md:w-3/4 p-4 border-4 border-black bg-neutral-200 text-black placeholder-neutral-700 focus:outline-none focus:ring-4 focus:ring-red-500 dark:bg-neutral-700 dark:text-white dark:placeholder-neutral-400 dark:border-white dark:focus:ring-orange-400">
      <input type="password" placeholder="Your Password" class="mt-4 w-full md:w-3/4 p-4 border-4 border-black bg-neutral-200 text-black placeholder-neutral-700 focus:outline-none focus:ring-4 focus:ring-red-500 dark:bg-neutral-700 dark:text-white dark:placeholder-neutral-400 dark:border-white dark:focus:ring-orange-400">
      <button class="mt-6 w-full md:w-3/4 px-8 py-4 border-4 border-black text-xl font-bold uppercase bg-red-500 text-white shadow-[6px_6px_0_0_#000] transition-all duration-150 ease-in-out hover:translate-x-1 hover:translate-y-1 hover:shadow-none dark:bg-orange-600 dark:text-white dark:border-white dark:shadow-[6px_6px_0_0_#fff]">
        Log In
      </button>
    </div>

    <div class="mt-10 text-center">
      <p class="text-sm text-black dark:text-white font-mono">
        By connecting, you agree to our <a href="#" class="underline text-blue-700 dark:text-orange-400 hover:text-blue-900 dark:hover:text-orange-600">Terrible Terms</a> and <a href="#" class="underline text-blue-700 dark:text-orange-400 hover:text-blue-900 dark:hover:text-orange-600">Questionable Privacy Policy</a>.
      </p>
    </div>
  </div>
</div>

Shopping Cart Component

Skeuomorphic Shopping Cart Component with Pastel color scheme, responsive and dark mode support.

Open Preview

                <div class="p-4 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans">

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-700 rounded-2xl shadow-xl p-8 transform transition duration-300 hover:scale-105">
    <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center drop-shadow-md">🛒 Your Skeuomorphic Cart </h1>

    <!-- Cart Item 1 -->
    <div class="flex items-center bg-gradient-to-br from-rose-50 to-rose-100 dark:from-gray-600 dark:to-gray-700 rounded-xl p-6 mb-6 shadow-lg transform transition duration-300 hover:shadow-2xl hover:-translate-y-1">
      <img src="https://picsum.photos/seed/item1/150/150" alt="Product Image" class="w-32 h-32 object-cover rounded-lg shadow-md border-4 border-rose-200 dark:border-gray-500 mr-6">
      <div class="flex-grow">
        <h2 class="text-2xl font-bold text-rose-800 dark:text-rose-200 mb-2">Vintage Leather Briefcase</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">A classic briefcase for the modern professional.</p>
        <div class="flex items-center justify-between">
          <span class="text-3xl font-extrabold text-rose-900 dark:text-rose-100">$129.00</span>
          <div class="flex items-center">
            <button class="bg-rose-300 dark:bg-rose-600 text-white p-3 rounded-full shadow-lg hover:bg-rose-400 dark:hover:bg-rose-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-rose-200 dark:focus:ring-rose-500 active:bg-rose-500 w-10 h-10 flex items-center justify-center text-xl font-bold">-</button>
            <span class="text-2xl font-bold text-gray-800 dark:text-gray-100 mx-4">1</span>
            <button class="bg-rose-300 dark:bg-rose-600 text-white p-3 rounded-full shadow-lg hover:bg-rose-400 dark:hover:bg-rose-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-rose-200 dark:focus:ring-rose-500 active:bg-rose-500 w-10 h-10 flex items-center justify-center text-xl font-bold">+</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Cart Item 2 -->
    <div class="flex items-center bg-gradient-to-br from-teal-50 to-teal-100 dark:from-gray-600 dark:to-gray-700 rounded-xl p-6 mb-6 shadow-lg transform transition duration-300 hover:shadow-2xl hover:-translate-y-1">
      <img src="https://picsum.photos/seed/item2/150/150" alt="Product Image" class="w-32 h-32 object-cover rounded-lg shadow-md border-4 border-teal-200 dark:border-gray-500 mr-6">
      <div class="flex-grow">
        <h2 class="text-2xl font-bold text-teal-800 dark:text-teal-200 mb-2">Handcrafted Ceramic Mug</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Perfect for your morning coffee or tea.</p>
        <div class="flex items-center justify-between">
          <span class="text-3xl font-extrabold text-teal-900 dark:text-teal-100">$25.00</span>
          <div class="flex items-center">
            <button class="bg-teal-300 dark:bg-teal-600 text-white p-3 rounded-full shadow-lg hover:bg-teal-400 dark:hover:bg-teal-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-teal-200 dark:focus:ring-teal-500 active:bg-teal-500 w-10 h-10 flex items-center justify-center text-xl font-bold">-</button>
            <span class="text-2xl font-bold text-gray-800 dark:text-gray-100 mx-4">2</span>
            <button class="bg-teal-300 dark:bg-teal-600 text-white p-3 rounded-full shadow-lg hover:bg-teal-400 dark:hover:bg-teal-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-teal-200 dark:focus:ring-teal-500 active:bg-teal-500 w-10 h-10 flex items-center justify-center text-xl font-bold">+</button>
          </div>

        </div>
      </div>
    </div>

    <!-- Cart Summary -->
    <div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-600 dark:to-gray-700 rounded-xl p-8 mt-8 shadow-lg border-t-4 border-blue-200 dark:border-gray-500">
      <div class="flex justify-between items-center mb-4">
        <span class="text-2xl font-semibold text-gray-700 dark:text-gray-200">Subtotal:</span>
        <span class="text-2xl font-extrabold text-blue-800 dark:text-blue-200">$179.00</span>
      </div>
      <div class="flex justify-between items-center mb-6">
        <span class="text-2xl font-semibold text-gray-700 dark:text-gray-200">Shipping:</span>
        <span class="text-2xl font-extrabold text-blue-800 dark:text-blue-200">$10.00</span>
      </div>
      <div class="flex justify-between items-center border-t-2 border-blue-200 dark:border-gray-500 pt-6">
        <span class="text-3xl font-bold text-gray-800 dark:text-gray-100">Total:</span>
        <span class="text-3xl font-extrabold text-blue-900 dark:text-blue-100">$189.00</span>
      </div>
      <button class="w-full bg-blue-500 dark:bg-blue-700 text-white text-3xl font-bold py-4 rounded-xl mt-8 shadow-xl hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 active:bg-blue-700">
        Proceed to Checkout
      </button>
    </div>
  </div>
</div>

Neumorphic Tabs Component

A neumorphic tabs component in grayscale for blog content, with responsive design and dark mode support.

Open Preview

                <div class="flex flex-col bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-2xl mx-auto my-10"> 
  
  <!-- Tab Buttons --> 
  <div class="flex space-x-4 mb-6"> 
  
    <button class="flex-1 py-3 px-6 rounded-lg text-gray-800 dark:text-gray-200 
                   bg-gray-300 dark:bg-gray-700 
                   shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark 
                   hover:shadow-neumorphic-button-light-hover dark:hover:shadow-neumorphic-button-dark-hover 
                   focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 
                   active:shadow-neumorphic-button-light-active dark:active:shadow-neumorphic-button-dark-active">
      Recent Articles
    </button>

    <button class="flex-1 py-3 px-6 rounded-lg text-gray-600 dark:text-gray-400 
                   bg-gray-200 dark:bg-gray-800 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-button-light-hover dark:hover:shadow-neumorphic-button-dark-hover 
                   focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">
      Popular Posts
    </button>

    <button class="flex-1 py-3 px-6 rounded-lg text-gray-600 dark:text-gray-400 
                   bg-gray-200 dark:bg-gray-800 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-button-light-hover dark:hover:shadow-neumorphic-button-dark-hover 
                   focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">
      Categories
    </button>
    
  </div> 
  
  <!-- Tab Content (Recent Articles) --> 
  <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg 
              shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
              text-gray-700 dark:text-gray-300"> 
    <h3 class="text-xl font-semibold mb-4">The Art of Neumorphism in Web Design</h3> 
    <p class="mb-4">Explore the subtle and tactile design trend that is Neumorphism. Learn how to create soft, extruded, and impressed elements that bring a unique depth to your user interfaces.</p> 
    
    <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full mr-3 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <span>John Doe • October 26, 2023</span>
    </div>
    
  </div> 
  
  <!-- You would typically have other tab content divs here, hidden by default and shown with JavaScript --> 
  <!-- For this example, only one tab content is shown as per the no JavaScript constraint --> 
  
</div>

<!-- Custom Styles for Neumorphism (add to your CSS or a style block) -->
<style>
  /* Light Neumorphic Shadows */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }

  .shadow-neumorphic-inset-light {
    box-shadow: inset 6px 6px 12px #b0b0b0, inset -6px -6px 12px #ffffff;
  }

  .shadow-neumorphic-button-light {
    box-shadow: 4px 4px 8px #b0b0b0, -4px -4px 8px #ffffff;
  }

  /* Light Neumorphic Button Hover States */
  .shadow-neumorphic-button-light-hover {
    box-shadow: 2px 2px 4px #b0b0b0, -2px -2px 4px #ffffff;
  }

  /* Light Neumorphic Button Active States (pressed in) */
  .shadow-neumorphic-button-light-active {
    box-shadow: inset 2px 2px 4px #b0b0b0, inset -2px -2px 4px #ffffff;
  }

  /* Dark Neumorphic Shadows */
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #2a2a2a, -6px -6px 12px #3a3a3a;
  }

  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 6px 6px 12px #2a2a2a, inset -6px -6px 12px #3a3a3a;
  }

  .dark .shadow-neumorphic-button-dark {
    box-shadow: 4px 4px 8px #2a2a2a, -4px -4px 8px #3a3a3a;
  }

  /* Dark Neumorphic Button Hover States */
  .dark .shadow-neumorphic-button-dark-hover {
    box-shadow: 2px 2px 4px #2a2a2a, -2px -2px 4px #3a3a3a;
  }

  /* Dark Neumorphic Button Active States (pressed in) */
  .dark .shadow-neumorphic-button-dark-active {
    box-shadow: inset 2px 2px 4px #2a2a2a, inset -2px -2px 4px #3a3a3a;
  }
</style>

Skeuomorphic Container Component

A Skeuomorphic Container Component with Grayscale color scheme, designed for a Portfolio, featuring responsive design and dark theme support.

Open Preview

                <div class="relative dark:bg-gray-900 bg-gray-200 p-8 rounded-xl shadow-2xl dark:shadow-gray-700 m-4 sm:m-8 lg:m-12">
  <!-- Top-left highlight -->
  <div class="absolute top-0 left-0 w-20 h-20 bg-gradient-to-br from-gray-100 to-transparent rounded-tl-xl opacity-30 dark:from-gray-700"></div>
  <!-- Bottom-right shadow -->
  <div class="absolute bottom-0 right-0 w-20 h-20 bg-gradient-to-tl from-gray-300 to-transparent rounded-br-xl opacity-30 dark:from-gray-800"></div>

  <div class="relative z-10">
    <h2 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-6 text-center">
      My Portfolio
    </h2>
    <p class="text-gray-600 dark:text-gray-300 text-lg leading-relaxed mb-8 text-center">
      Welcome to my digital space. Explore my work and get to know my professional journey.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Project Card 1 -->
      <div class="bg-gray-300 dark:bg-gray-800 rounded-lg p-6 shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-gray-400 dark:border-gray-700">
        <img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="rounded-md mb-4 w-full h-48 object-cover shadow-inner dark:shadow-gray-900">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Project Alpha</h3>
        <p class="text-gray-700 dark:text-gray-300 text-base">A detailed look into an innovative web solution built for scalability and performance.</p>
      </div>

      <!-- Project Card 2 -->
      <div class="bg-gray-300 dark:bg-gray-800 rounded-lg p-6 shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-gray-400 dark:border-gray-700">
        <img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="rounded-md mb-4 w-full h-48 object-cover shadow-inner dark:shadow-gray-900">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Design Showcase</h3>
        <p class="text-gray-700 dark:text-gray-300 text-base">Exploring user-centric design principles through a series of interactive prototypes.</p>
      </div>

      <!-- Project Card 3 -->
      <div class="bg-gray-300 dark:bg-gray-800 rounded-lg p-6 shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-105 border border-gray-400 dark:border-gray-700">
        <img src="https://picsum.photos/seed/project3/400/300" alt="Project 3" class="rounded-md mb-4 w-full h-48 object-cover shadow-inner dark:shadow-gray-900">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Mobile App Development</h3>
        <p class="text-gray-700 dark:text-gray-300 text-base">From concept to deployment: a robust mobile application for everyday productivity.</p>
      </div>
    </div>

    <div class="mt-12 text-center">
      <a href="#" class="inline-block bg-gray-400 dark:bg-gray-700 text-gray-800 dark:text-gray-100 font-bold py-3 px-8 rounded-full shadow-md hover:bg-gray-500 dark:hover:bg-gray-600 transition-colors duration-300 transform hover:scale-105">
        View All Projects
      </a>
    </div>

    <div class="mt-12 pt-8 border-t border-gray-400 dark:border-gray-700 text-center">
      <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">About Me</h3>
      <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-8">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-24 h-24 rounded-full border-4 border-gray-400 dark:border-gray-600 shadow-lg">
        <p class="text-gray-700 dark:text-gray-300 max-w-lg text-base">
          I am a passionate developer with expertise in creating dynamic and responsive web applications. I thrive on bringing innovative ideas to life through clean and efficient code.
        </p>
      </div>
    </div>
  </div>
</div>

Data Visualization Components Component

A simple dark mode data visualization component for social media with an analogous color scheme.

Open Preview

                <div class="bg-gray-900 min-h-screen p-4 text-gray-200">
  <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg p-6">
    <h2 class="text-xl font-bold mb-4 text-blue-300">Social Media Engagement</h2>
    <div class="space-y-4">
      <div class="flex items-center justify-between">
        <span class="text-gray-400">Likes:</span>
        <span class="text-blue-400 font-semibold">12,345</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-gray-400">Comments:</span>
        <span class="text-green-400 font-semibold">890</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-gray-400">Shares:</span>
        <span class="text-teal-400 font-semibold">321</span>
      </div>
      <div class="w-full bg-gray-700 rounded-full h-2.5 mt-4">
        <div class="bg-gradient-to-r from-blue-400 via-green-400 to-teal-400 h-2.5 rounded-full" style="width: 75%;"></div>
      </div>
      <p class="text-sm text-gray-500 text-center mt-2">Overall Engagement: 75%</p>
    </div>
  </div>
</div>

A responsive product card component with a Skeuomorphism design style, earth tone color scheme, and complex interactions, suitable for a portfolio. It includes dark theme support and uses Tailwind CSS for styling. Images are sourced from picsum.photos and avatars from randomuser.me.

Open Preview

                <div class="bg-stone-100  dark:bg-stone-900 min-h-screen p-8 flex flex-wrap items-center justify-center font-sans">

  <!-- Product Card 1 -->
  <div class="w-full md:w-1/2 lg:w-1/3 p-4">
    <div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 rounded-3xl shadow-2xl p-8 transform transition-transform duration-500 hover:scale-105 hover:shadow-stone-500/50 dark:hover:shadow-stone-900/50 border-t border-l border-stone-200 dark:border-stone-700 relative overflow-hidden">
      <div class="absolute inset-0 bg-pattern-texture opacity-10 pointer-events-none"></div>
      <div class="relative z-10">
        <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="rounded-2xl mb-6 shadow-xl border border-stone-500">
        <h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-3 text-center tracking-wide">Earthen Vessel</h2>
        <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 text-center">Hand-crafted ceramic vessel, ideal for home decor or as a unique gift. Each piece is organically formed and fired to perfection.</p>
        
        <div class="flex items-center justify-center mb-6">
          <div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span class="text-stone-800 dark:text-stone-200 text-lg font-semibold">4.9</span>
            <span class="text-stone-600 dark:text-stone-400 text-md">(128 Reviews)</span>
          </div>
        </div>

        <div class="flex justify-around items-center mb-6">
          <div class="text-stone-800 dark:text-stone-100">
            <span class="block text-sm opacity-80">Dimensions:</span>
            <span class="text-lg font-bold">15x10 cm</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Weight:</span>
            <span class="text-lg font-bold">0.8 kg</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Material:</span>
            <span class="text-lg font-bold">Clay</span>
          </div>
        </div>

        <div class="flex items-center justify-between mb-8 pb-4 border-b border-stone-400/50 dark:border-stone-600/50">
          <div class="flex items-center -space-x-3">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/47.jpg" alt="Customer Avatar">
            <span class="text-stone-700 dark:text-stone-300 text-sm pl-2">+25 Happy customers</span>
          </div>
          <span class="text-4xl font-extrabold text-stone-900 dark:text-stone-50">$79.00</span>
        </div>
        
        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-lg shadow-green-700/40 dark:shadow-green-600/40 transform active:scale-95 transition-all duration-200 border-b-2 border-green-900 dark:border-green-800">
            Add to Cart
          </button>
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-stone-800 dark:text-stone-200 bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 shadow-lg shadow-stone-400/40 dark:shadow-stone-800/40 transform active:scale-95 transition-all duration-200 border-b-2 border-stone-400 dark:border-stone-700">
            View Details
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Product Card 2 -->
  <div class="w-full md:w-1/2 lg:w-1/3 p-4">
    <div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 rounded-3xl shadow-2xl p-8 transform transition-transform duration-500 hover:scale-105 hover:shadow-stone-500/50 dark:hover:shadow-stone-900/50 border-t border-l border-stone-200 dark:border-stone-700 relative overflow-hidden">
      <div class="absolute inset-0 bg-pattern-texture opacity-10 pointer-events-none"></div>
      <div class="relative z-10">
        <img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="rounded-2xl mb-6 shadow-xl border border-stone-500">
        <h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-3 text-center tracking-wide">Rustic Planter</h2>
        <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 text-center">A robust planter crafted from recycled oak barrels, perfect for adding a touch of nature indoors or out.</p>
        
        <div class="flex items-center justify-center mb-6">
          <div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span class="text-stone-800 dark:text-stone-200 text-lg font-semibold">4.7</span>
            <span class="text-stone-600 dark:text-stone-400 text-md">(95 Reviews)</span>
          </div>
        </div>

        <div class="flex justify-around items-center mb-6">
          <div class="text-stone-800 dark:text-stone-100">
            <span class="block text-sm opacity-80">Dimensions:</span>
            <span class="text-lg font-bold">50x40 cm</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Weight:</span>
            <span class="text-lg font-bold">5.2 kg</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Material:</span>
            <span class="text-lg font-bold">Oak Wood</span>
          </div>
        </div>

        <div class="flex items-center justify-between mb-8 pb-4 border-b border-stone-400/50 dark:border-stone-600/50">
          <div class="flex items-center -space-x-3">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/55.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/62.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer Avatar">
            <span class="text-stone-700 dark:text-stone-300 text-sm pl-2">+18 Happy customers</span>
          </div>
          <span class="text-4xl font-extrabold text-stone-900 dark:text-stone-50">$120.00</span>
        </div>
        
        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-lg shadow-green-700/40 dark:shadow-green-600/40 transform active:scale-95 transition-all duration-200 border-b-2 border-green-900 dark:border-green-800">
            Add to Cart
          </button>
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-stone-800 dark:text-stone-200 bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 shadow-lg shadow-stone-400/40 dark:shadow-stone-800/40 transform active:scale-95 transition-all duration-200 border-b-2 border-stone-400 dark:border-stone-700 ">
            View Details
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Product Card 3 -->
  <div class="w-full md:w-1/2 lg:w-1/3 p-4">
    <div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 rounded-3xl shadow-2xl p-8 transform transition-transform duration-500 hover:scale-105 hover:shadow-stone-500/50 dark:hover:shadow-stone-900/50 border-t border-l border-stone-200 dark:border-stone-700 relative overflow-hidden">
      <div class="absolute inset-0 bg-pattern-texture opacity-10 pointer-events-none"></div>
      <div class="relative z-10">
        <img src="https://picsum.photos/400/300?random=3" alt="Product Image" class="rounded-2xl mb-6 shadow-xl border border-stone-500">
        <h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-3 text-center tracking-wide">Terra Cotta Mug</h2>
        <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 text-center">A charming terra cotta mug, perfect for your morning coffee or evening tea. Hand-painted with natural dyes.</p>
        
        <div class="flex items-center justify-center mb-6">
          <div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span class="text-stone-800 dark:text-stone-200 text-lg font-semibold">4.6</span>
            <span class="text-stone-600 dark:text-stone-400 text-md">(72 Reviews)</span>
          </div>
        </div>

        <div class="flex justify-around items-center mb-6">
          <div class="text-stone-800 dark:text-stone-100">
            <span class="block text-sm opacity-80">Dimensions:</span>
            <span class="text-lg font-bold">10x8 cm</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Weight:</span>
            <span class="text-lg font-bold">0.3 kg</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Material:</span>
            <span class="text-lg font-bold">Terra Cotta</span>
          </div>
        </div>

        <div class="flex items-center justify-between mb-8 pb-4 border-b border-stone-400/50 dark:border-stone-600/50">
          <div class="flex items-center -space-x-3">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/81.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/84.jpg" alt="Customer Avatar">
            <span class="text-stone-700 dark:text-stone-300 text-sm pl-2">+10 Happy customers</span>
          </div>
          <span class="text-4xl font-extrabold text-stone-900 dark:text-stone-50">$25.00</span>
        </div>
        
        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-lg shadow-green-700/40 dark:shadow-green-600/40 transform active:scale-95 transition-all duration-200 border-b-2 border-green-900 dark:border-green-800">
            Add to Cart
          </button>
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-stone-800 dark:text-stone-200 bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 shadow-lg shadow-stone-400/40 dark:shadow-stone-800/40 transform active:scale-95 transition-all duration-200 border-b-2 border-stone-400 dark:border-stone-700">
            View Details
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- You might need to add this to your tailwind.config.js for the texture pattern -->
   <style>
    .bg-pattern-texture {
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.1'%3E%3Cpath fill-rule='evenodd' d='M0 0h10v10H0V0zm10 0h10v10H10V0zM0 10h10v10H0V10zm10 10h10v-10H10v10z'/%3E%3C/g%3E%3C/svg%3E");
    }

    .dark .bg-pattern-texture {
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath fill-rule='evenodd' d='M0 0h10v10H0V0zm10 0h10v10H10V0zM0 10h10v10H0V10zm10 10h10v-10H10v10z'/%3E%3C/g%3E%3C/svg%3E");
    }
  </style>

</div>

Login Form Component

A responsive, complex login form with a minimalist/flat design suitable for a blog or content site. It features a monochromatic color scheme, dark theme support, and multiple interactive elements, implemented purely with HTML and Tailwind CSS.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-8">Login to Your Account</h2>

    <div class="flex justify-center mb-6">
      <img src="https://picsum.photos/100" alt="Blog Logo" class="rounded-full w-24 h-24 object-cover border-4 border-gray-200 dark:border-gray-700">
    </div>

    <form>
      <div class="mb-5">
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-3 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 text-gray-900 dark:text-white transition duration-200" placeholder="[email protected]">
      </div>
      <div class="mb-5">
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
        <input type="password" id="password" class="w-full px-4 py-3 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 text-gray-900 dark:text-white transition duration-200" placeholder="••••••••">
      </div>

      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
          <input type="checkbox" id="remember_me" class="h-4 w-4 text-blue-600 dark:text-blue-500 rounded border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400">
          <label for="remember_me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
        </div>
        <a href="#" class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200">Forgot Password?</a>
      </div>

      <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-200">
        Login
      </button>
    </form>

    <div class="mt-8 text-center text-gray-600 dark:text-gray-400">
      <p>Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 font-medium transition duration-200">Sign Up</a></p>
    </div>

    <div class="mt-6 flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4">
      <button class="w-full sm:w-auto bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white font-bold py-2 px-4 rounded-md flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-200">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12.0003 4.75C9.0935 4.75 6.647 6.0211 5.09348 7.98926L2.36865 5.26442C4.24689 3.03348 7.02705 1.75 12.0003 1.75C16.8967 1.75 20.9157 3.4283 23.6393 5.92015L20.6125 8.947C18.667 7.0425 15.6033 5.92015 12.0003 5.92015C9.80036 5.92015 7.84687 6.69344 6.37508 8.01639L5 6.77258V6.7725C5 6.81846 5 6.86445 5 6.91042Z" clip-rule="evenodd" fill-rule="evenodd"/>
          <path d="M4.75 9.99997C4.75 10.974 4.887 11.9167 5.13847 12.8021L7.75549 11.3995C7.66982 11.0858 7.58784 10.741 7.58784 9.99997C7.58784 8.24357 8.35821 6.67104 9.68965 5.56832L6.96482 2.84348C5.2323 4.41595 4.75 7.0396 4.75 9.99997Z" clip-rule="evenodd" fill-rule="evenodd"/>
          <path d="M22.25 10C22.25 11.9604 21.6881 14.1568 20.3607 16.3607L18.0625 14.0625C19.2605 12.6377 19.8291 11.2335 19.8291 10C19.8291 8.35848 19.2605 6.7552 18.0625 5.33045L20.3607 3.03225C21.6881 5.23616 22.25 7.43261 22.25 10Z" clip-rule="evenodd" fill-rule="evenodd"/>
          <path d="M12.0003 19.25C14.7397 19.25 17.0664 18.2329 18.667 16.2925L20.6125 18.238C18.667 20.1425 15.6033 21.25 12.0003 21.25C7.02705 21.25 4.24689 19.9665 2.36865 17.7355L5.09348 15.0107C6.647 16.9788 9.0935 18.25 12.0003 18.25C14.1997 18.25 16.1532 17.4767 17.625 16.1538L16.2163 17.4116L18.9163 17.2916L17.625 18.25L12.0003 19.25Z" clip-rule="evenodd" fill-rule="evenodd"/>
        </svg>
        Login with Google
      </button>
      <button class="w-full sm:w-auto bg-blue-800 hover:bg-blue-900 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold py-2 px-4 rounded-md flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-blue-800 dark:focus:ring-blue-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-200">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M14 13.5h2.7L17 10h-3V7.9c0-.8.2-1.3 1.3-1.3H17V4.3c-.4 0-1.7-.1-2.9-.1-3.1 0-5.2 1.9-5.2 5.3v2.7H7v3h2.1V22h4.9v-8.5z"/>
        </svg>
        Login with Facebook
      </button>
    </div>
  </div>
</div>

Container Component (Dashboard, 'Dashboard')

Responsive Container Component with dark theme support, designed for dashboards with microinteractions and an analogous color scheme.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="max-w-7xl mx-auto">
    <!-- Header/Navigation Placeholder -->
    <header class="flex justify-between items-center py-4 px-6 bg-white dark:bg-gray-800 rounded-lg shadow mb-6">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Dashboard Overview</h1>
      <nav>
        <ul class="flex space-x-4">
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Home</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Analytics</a></li>
          <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Settings</a></li>
        </ul>
      </nav>
    </header>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Card 1: Sales Overview -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Sales Overview</h2>
          <span class="text-green-500 dark:text-green-400 text-sm font-medium">+12%</span>
        </div>
        <p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-2">$12,345</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Total sales this month</p>
        <div class="mt-4 h-24 bg-gradient-to-r from-blue-300 to-blue-500 dark:from-blue-600 dark:to-blue-800 rounded"></div>
      </div>

      <!-- Card 2: User Activity -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">User Activity</h2>
          <span class="text-yellow-500 dark:text-yellow-400 text-sm font-medium">85% Engaged</span>
        </div>
        <div class="flex items-center space-x-3 mb-2">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
          <p class="text-2xl font-bold text-gray-900 dark:text-gray-50">1,234</p>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Active users today</p>
        <div class="mt-4 grid grid-cols-5 gap-2">
          <div class="h-8 bg-purple-300 dark:bg-purple-600 rounded"></div>
          <div class="h-8 bg-purple-400 dark:bg-purple-700 rounded"></div>
          <div class="h-8 bg-purple-500 dark:bg-purple-800 rounded"></div>
          <div class="h-8 bg-purple-400 dark:bg-purple-700 rounded"></div>
          <div class="h-8 bg-purple-300 dark:bg-purple-600 rounded"></div>
        </div>
      </div>

      <!-- Card 3: Traffic Sources -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Traffic Sources</h2>
          <span class="text-red-500 dark:text-red-400 text-sm font-medium">Geo-targeted</span>
        </div>
        <ul class="space-y-2 mb-4">
          <li class="flex justify-between text-gray-700 dark:text-gray-300">
            <span>Direct</span>
            <span class="font-semibold">30%</span>
          </li>
          <li class="flex justify-between text-gray-700 dark:text-gray-300">
            <span>Referral</span>
            <span class="font-semibold">25%</span>
          </li>
          <li class="flex justify-between text-gray-700 dark:text-gray-300">
            <span>Organic Search</span>
            <span class="font-semibold">45%</span>
          </li>
        </ul>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
          <div class="bg-indigo-500 h-2 rounded-full" style="width: 45%;"></div>
        </div>
      </div>

      <!-- Card 4: Recent Orders (Full Width on Small Screens) -->
      <div class="md:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transform transition-transform duration-200 hover:scale-105 active:scale-95">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Recent Orders</h2>
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead class="bg-gray-50 dark:bg-gray-700">
              <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Order ID</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Customer</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Amount</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
              </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
              <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#ORD001</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Alice Smith</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">$199.99</td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
                    Completed
                  </span>
                </td>
              </tr>
              <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#ORD002</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Bob Johnson</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">$89.50</td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100">
                    Pending
                  </span>
                </td>
              </tr>
              <!-- More rows... -->
            </tbody>
          </table>
        </div>
      </div>

      <!-- Card 5: Quick Stats (Image Placeholder) -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col items-center justify-center text-center transform transition-transform duration-200 hover:scale-105 active:scale-95">
        <img class="w-32 h-32 object-cover rounded-full mb-4 ring-2 ring-blue-400 dark:ring-blue-600" src="https://picsum.photos/256/256?random=1" alt="Placeholder Image">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Project Progress</h2>
        <p class="text-4xl font-bold text-blue-600 dark:text-blue-400">75%</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">Completed tasks</p>
      </div>

    </div>

    <!-- Footer Placeholder -->
    <footer class="mt-6 py-4 text-center text-gray-600 dark:text-gray-400 text-sm">
      &copy; 2023 Dashboard Inc. All rights reserved.
    </footer>
  </div>
</div>

Audio Player Component

A brutalist audio player component with a pastel color scheme, complex layout, and responsive design with dark theme support, suitable for business websites. It uses Tailwind CSS for styling and includes controls for play/pause, volume, and a progress bar.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-purple-900 dark:via-pink-900 dark:to-red-900 
              p-8 border-8 border-black dark:border-white shadow-brutalism 
              w-full max-w-2xl mx-auto 
              grid grid-cols-1 md:grid-cols-3 gap-6 transform -rotate-2 hover:rotate-0 transition-transform duration-300 relative"> 
       
    <div class="absolute top-4 right-4 text-black dark:text-white text-xs font-mono transform rotate-90">
        BRUTAL_AUDIO_PLAYER
    </div>

    <!-- Album Art / Info -->
    <div class="md:col-span-1 bg-black dark:bg-white p-4 border-4 border-black dark:border-white shadow-brutalism-sm">
      <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-auto object-cover border-4 border-red-500 dark:border-blue-500 mb-4">
      <div class="text-white dark:text-black font-bold text-xl mb-1 font-mono">The Concrete Jungle</div>
      <div class="text-gray-300 dark:text-gray-700 text-sm font-mono">DJ Monolith</div>
      <div class="text-gray-500 dark:text-gray-500 text-xs font-mono mt-2">© 2023 Brutal Sounds Inc.</div>
    </div>

    <!-- Main Controls -->
    <div class="md:col-span-2 flex flex-col justify-between">

      <!-- Track Title & Progress Bar -->
      <div class="bg-white dark:bg-black p-4 border-4 border-black dark:border-white shadow-brutalism-sm mb-6">
        <div class="text-black dark:text-white font-mono text-lg mb-2">Track 01: Echoes in the Void</div>
        <div class="w-full bg-gray-300 dark:bg-gray-700 h-4 border-2 border-black dark:border-white relative">
          <div class="bg-red-500 dark:bg-blue-500 h-full w-3/5 border-r-2 border-black dark:border-white"></div>
          <div class="absolute top-0 left-3/5 -mt-1 -ml-1 h-6 w-6 bg-green-400 dark:bg-yellow-400 border-4 border-black dark:border-white transform rotate-45"></div>
        </div>
        <div class="flex justify-between text-xs font-mono text-black dark:text-white mt-1">
          <span>1:45</span>
          <span>4:23</span>
        </div>
      </div>

      <!-- Playback Controls -->
      <div class="grid grid-cols-3 gap-4 mb-6">
        <button class="bg-black dark:bg-white text-white dark:text-black p-4 border-4 border-black dark:border-white 
                       shadow-brutalism-sm hover:bg-red-500 dark:hover:bg-blue-500 transition-colors duration-200 
                       font-bold text-xl font-mono transform skew-x-6 hover:skew-x-0">RWD</button>
        <button class="bg-black dark:bg-white text-white dark:text-black p-4 border-4 border-black dark:border-white 
                       shadow-brutalism-sm hover:bg-green-500 dark:hover:bg-yellow-500 transition-colors duration-200 
                       font-bold text-xl font-mono transform -rotate-12 hover:rotate-0">PLAY</button>
        <button class="bg-black dark:bg-white text-white dark:text-black p-4 border-4 border-black dark:border-white 
                       shadow-brutalism-sm hover:bg-red-500 dark:hover:bg-blue-500 transition-colors duration-200 
                       font-bold text-xl font-mono transform skew-x-6 hover:skew-x-0">FFW</button>
      </div>

      <!-- Volume & Mute -->
      <div class="flex items-center space-x-4 bg-white dark:bg-black p-4 border-4 border-black dark:border-white shadow-brutalism-sm">
        <span class="text-black dark:text-white font-mono text-lg">VOL:</span>
        <div class="flex-grow bg-gray-300 dark:bg-gray-700 h-4 border-2 border-black dark:border-white relative">
          <div class="bg-green-500 dark:bg-yellow-500 h-full w-4/5 border-r-2 border-black dark:border-white"></div>
          <div class="absolute top-0 left-4/5 -mt-1 -ml-1 h-6 w-6 bg-red-400 dark:bg-cyan-400 border-4 border-black dark:border-white transform rotate-45"></div>
        </div>
        <button class="bg-black dark:bg-white text-white dark:text-black p-2 border-4 border-black dark:border-white 
                       shadow-brutalism-sm hover:bg-purple-500 dark:hover:bg-orange-500 transition-colors duration-200 
                       font-bold text-sm font-mono">MUTE</button>
      </div>

    </div>

    <!-- Footer / Additional Info -->
    <div class="md:col-span-3 bg-black dark:bg-white p-4 border-4 border-black dark:border-white shadow-brutalism-sm
                flex justify-around items-center flex-wrap mt-6">
        <div class="text-white dark:text-black font-mono text-sm mb-2 md:mb-0">"DISTORTION IS BEAUTY"</div>
        <div class="relative w-16 h-16 border-4 border-red-500 dark:border-blue-500 transform rotate-6 hover:rotate-0 transition-transform duration-300">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Artist Avatar" class="w-full h-full object-cover">
            <div class="absolute -bottom-2 -right-2 w-6 h-6 bg-green-500 dark:bg-yellow-500 border-4 border-black dark:border-white"></div>
        </div>
        <div class="text-white dark:text-black font-mono text-sm mt-2 md:mt-0">EST. MMXXIII</div>
    </div>

  </div>

  <!-- Brutalist Shadow Utility Class -->
  <style>
    .shadow-brutalism {
      box-shadow: 12px 12px 0px 0px #000, 14px 14px 0px 0px rgb(249 115 22);
    }
    .shadow-brutalism-sm {
      box-shadow: 6px 6px 0px 0px #000, 8px 8px 0px 0px rgb(239 68 68);
    }
    .dark .shadow-brutalism {
      box-shadow: 12px 12px 0px 0px #fff, 14px 14px 0px 0px rgb(59 130 246);
    }
    .dark .shadow-brutalism-sm {
      box-shadow: 6px 6px 0px 0px #fff, 8px 8px 0px 0px rgb(96 165 250);
    }
  </style>
</div>

1 ... 130 131 132 133 134 ... 335

Search Components

Categories

All Components

Tag Cloud Component

OAuth Buttons Component

Shopping Cart Component

Neumorphic Tabs Component

Skeuomorphic Container Component

Data Visualization Components Component

Product Cards Component

Login Form Component

Container Component (Dashboard, 'Dashboard')

Audio Player Component