Search Components

All Components

Browse all available Tailwind CSS components

Minimalist Triadic Progress Bar

A minimalist, responsive progress bar with triadic color scheme and dark theme support, suitable for social media applications.

Open Preview

                
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">

  <!-- Progress Bar Container -->
  <div class="w-full max-w-md bg-cyan-200 dark:bg-cyan-800 rounded-full h-4 mb-4 relative">
    <!-- Progress Indicator - Using an arbitrary value with [] for demonstration -->
    <div class="bg-fuchsia-500 dark:bg-fuchsia-400 h-4 rounded-full" style="width: 75%;">
      <span class="absolute right-2 top-0 text-xs font-semibold text-gray-700 dark:text-gray-300">75%</span>
    </div>
  </div>

  <!-- Another Progress Bar Example -->
  <div class="w-full max-w-md bg-cyan-200 dark:bg-cyan-800 rounded-full h-4 relative">
    <div class="bg-yellow-500 dark:bg-yellow-400 h-4 rounded-full" style="width: 50%;">
      <span class="absolute right-2 top-0 text-xs font-semibold text-gray-700 dark:text-gray-300">50%</span>
    </div>
  </div>

</div>

Layout Components Component

A Brutalism-inspired layout component for content consumption with a pastel color scheme and moderate complexity, featuring responsive design and dark mode support.

Open Preview

                <div class="min-h-screen bg-pink-100 p-8 dark:bg-gray-900">
  <header class="mb-8 border-b-4 border-black pb-4 dark:border-white">
    <h1 class="text-5xl font-bold text-black drop-shadow-[6px_6px_0_rgba(0,0,0,1)] dark:text-white dark:drop-shadow-[6px_6px_0_rgba(255,255,255,1)]">
      Brutal Blog
    </h1>
  </header>

  <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
    <!-- Main Content Area -->
    <main class="border-4 border-black bg-purple-200 p-6 dark:border-white dark:bg-gray-800 md:col-span-2">
      <article class="mb-8">
        <h2 class="text-3xl font-bold text-black dark:text-white">The Raw Truth of Web Design</h2>
        <p class="mb-4 text-sm text-gray-700 dark:text-gray-300">Posted on October 26, 2023</p>
        <img src="https://picsum.photos/seed/brutalism/800/400" alt="Abstract brutalist architecture" class="mb-4 w-full border-4 border-black dark:border-white" />
        <p class="mb-4 text-black dark:text-white">
          In the realm of web design, Brutalism stands as a defiant counterpoint to sleek interfaces and polished user experiences. It's a style that embraces rawness, exposes underlying structures, and often challenges conventional notions of beauty.
        </p>
        <p class="text-black dark:text-white">
          Characterized by stark typography, high-contrast colors, and a deliberate disregard for typical aesthetic norms, Brutalism can be jarring yet incredibly impactful. It screams authenticity and unfiltered expression, often using simple, unadorned HTML elements to convey its message.
        </p>
      </article>

      <article>
        <h2 class="text-3xl font-bold text-black dark:text-white">Pastel Brutalism: An Oxymoron?</h2>
        <p class="mb-4 text-sm text-gray-700 dark:text-gray-300">Posted on October 25, 2023</p>
        <img src="https://picsum.photos/seed/pastel/800/400" alt="Pastel color blocks" class="mb-4 w-full border-4 border-black dark:border-white" />
        <p class="mb-4 text-black dark:text-white">
          Combining the unyielding nature of Brutalism with the softness of pastel colors creates an intriguing paradox. The gentle hues temper the harshness, yet the underlying structural honesty remains. This approach offers a unique visual language, capable of conveying both strength and delicate nuance.
        </p>
        <p class="text-black dark:text-white">
          It's an exploration of contrasts, where the raw edges meet the subtle fades, inviting viewers to reconsider their perceptions of digital aesthetics. The goal is not to prettify, but to present an unvarnished truth, albeit one wrapped in a surprisingly gentle palette.
        </p>
      </article>
    </main>

    <!-- Sidebar / Related Content -->
    <aside class="border-4 border-black bg-green-200 p-6 dark:border-white dark:bg-gray-800">
      <h3 class="mb-4 text-2xl font-bold text-black dark:text-white">Related Reads</h3>
      <ul class="space-y-4">
        <li class="border-b-2 border-black pb-2 dark:border-white">
          <a href="#" class="block text-black hover:underline dark:text-white">The Art of Deliberate Imperfection</a>
          <p class="text-sm text-gray-700 dark:text-gray-300">Explore why imperfections can enhance design.</p>
        </li>
        <li class="border-b-2 border-black pb-2 dark:border-white">
          <a href="#" class="block text-black hover:underline dark:text-white">High Contrast & Readability</a>
          <p class="text-sm text-gray-700 dark:text-gray-300">A deep dive into accessible brutalist design.</p>
        </li>
        <li class="border-b-2 border-black pb-2 dark:border-white">
          <a href="#" class="block text-black hover:underline dark:text-white">Embracing the Unconventional Grid</a>
          <p class="text-sm text-gray-700 dark:text-gray-300">Breaking free from traditional layouts.</p>
        </li>
      </ul>

      <h3 class="mb-4 mt-8 text-2xl font-bold text-black dark:text-white">About the Author</h3>
      <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="h-16 w-16 border-4 border-black dark:border-white" />
        <div>
          <p class="font-bold text-black dark:text-white">Maximus Code</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Digital Architect & Brutalism Enthusiast.</p>
        </div>
      </div>
    </aside>
  </div>

  <footer class="mt-8 border-t-4 border-black pt-4 text-center text-black dark:border-white dark:text-white">
    <p>&copy; 2023 Brutal Blog. All rights reserved, roughly.</p>
  </footer>
</div>

Media Embed Component

Glassmorphism Media Embed Component with Earth Tones for Business/Corporate websites. Simple layout, responsive, and dark theme support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
  <div class="relative bg-white dark:bg-stone-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 w-full max-w-md border border-stone-200 dark:border-stone-700 overflow-hidden">
    <div class="absolute inset-0 z-0 bg-gradient-to-br from-stone-300/40 via-stone-200/20 to-stone-100/10 dark:from-stone-700/40 dark:via-stone-800/20 dark:to-stone-900/10 rounded-xl"></div>
    
    <div class="relative z-10 space-y-4">
      <!-- Video/Media Placeholder -->
      <div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden bg-stone-300 dark:bg-stone-700 flex items-center justify-center">
        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full object-cover"></iframe>
      </div>
      
      <!-- Title -->
      <div class="text-xl font-semibold text-stone-800 dark:text-stone-100">
        Business Insights: Q3 Performance
      </div>
      
      <!-- Description -->
      <p class="text-stone-600 dark:text-stone-300 text-sm">
        A concise overview of our key achievements and strategic initiatives for the third quarter, highlighting growth and future outlook.
      </p>
      
      <!-- Action Button (Optional) -->
      <button class="w-full bg-stone-700 hover:bg-stone-800 dark:bg-stone-600 dark:hover:bg-stone-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300 ease-in-out">
        Learn More
      </button>
      
      <!-- Metadata/Source (Optional) -->
      <div class="flex items-center text-stone-500 dark:text-stone-400 text-xs mt-2">
        <svg class="w-4 h-4 mr-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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span>Published: October 26, 2023</span>
      </div>
    </div>
  </div>
</div>

Dropdown Menu Component

A simple, glassmorphism-style dropdown menu component for e-commerce, with a responsive design and dark mode support.

Open Preview

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white/30 text-sm font-medium text-gray-700 hover:bg-white/40 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-800/30 dark:text-gray-200 dark:hover:bg-gray-700/40 dark:border-gray-700 backdrop-filter backdrop-blur-lg" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white/30 ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-0">Category 1</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-1">Category 2</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-2">Category 3</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-white/40 dark:text-gray-200 dark:hover:bg-gray-700/40" role="menuitem" tabindex="-1" id="menu-item-3">View All</button>
      </form>
    </div>
  </div>
</div>

Social Media Navigation Component

A simple, responsive navigation component for social media applications, with a dark theme and Material Design-inspired complementary color scheme. It includes a logo, navigation links, and a user avatar.

Open Preview

                <nav class="bg-blue-500 dark:bg-blue-900 p-4 shadow-md">
  <div class="container mx-auto flex items-center justify-between">
    <!-- Logo -->
    <a href="#" class="text-white text-2xl font-bold">SocialLink</a>

    <!-- Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-yellow-200 transition duration-300">Home</a>
      <a href="#" class="text-white hover:text-yellow-200 transition duration-300">Notifications</a>
      <a href="#" class="text-white hover:text-yellow-200 transition duration-300">Messages</a>
      <a href="#" class="text-white hover:text-yellow-200 transition duration-300">Profile</a>
    </div>

    <!-- User Avatar -->
    <div class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white">

      <!-- Mobile Menu Button (Hamburger) -->
      <button class="md:hidden text-white focus:outline-none">
        <svg class="w-6 h-6" 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="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Navigation (Hidden by default) -->
  <div class="md:hidden mt-4 space-y-2">
    <a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Home</a>
    <a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Notifications</a>
    <a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Messages</a>
    <a href="#" class="block text-white hover:text-yellow-200 transition duration-300 px-4 py-2">Profile</a>
  </div>
</nav>

Brutalist Sticky Navigation Component

Brutalist Sticky Navigation Bar in Grayscale for a Blog with Dark Mode Support

Open Preview

                <nav class="bg-gray-900 border-b-4 border-gray-100 sticky top-0 z-50 font-mono">
  <div class="container mx-auto px-4 py-6 flex flex-wrap justify-between items-center">
    <div class="text-gray-100 text-4xl font-extrabold uppercase tracking-tighter">
      <a href="#" class="hover:text-gray-400 transition duration-300 ease-in-out">THE BLOG</a>
    </div>
    <div class="block lg:hidden">
      <button class="text-gray-100 focus:outline-none focus:text-gray-400">
        <svg class="h-8 w-8" 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="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
    <div class="w-full lg:w-auto lg:flex flex-grow lg:flex-grow-0 hidden lg:block mt-4 lg:mt-0">
      <ul class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-8 text-xl font-bold uppercase">
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">Home</a>
        </li>
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">Articles</a>
        </li>
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">About</a>
        </li>
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">Contact</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="bg-gray-800 border-t-4 border-gray-100 py-3">
    <div class="container mx-auto px-4 flex flex-wrap justify-center lg:justify-between items-center text-gray-300 text-sm">
      <div class="tracking-wide mb-2 lg:mb-0">
        FEATURED TOPICS: <span class="font-bold">TECHNOLOGY / DESIGN / ART / CULTURE</span>
      </div>
      <div class="flex space-x-4">
        <input type="text" placeholder="SEARCH THE VOID..." class="px-3 py-1 bg-gray-700 text-gray-100 placeholder-gray-400 border-2 border-gray-100 focus:outline-none focus:border-gray-400 text-sm">
        <button class="bg-gray-600 text-gray-100 px-4 py-1 border-2 border-gray-100 hover:bg-gray-400 hover:text-gray-900 transition duration-300 ease-in-out">GO</button>
      </div>
    </div>
  </div>
</nav>

Social Components Component

A simple, responsive social components section for a dashboard, featuring a monochromatic color scheme and Skeuomorphism-inspired design.

Open Preview

                <div class="p-4 bg-gray-200 dark:bg-gray-800 shadow-xl rounded-lg">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Social Feed</h2>
  <div class="space-y-4">
    <!-- Post 1 -->
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>
      <p class="text-gray-800 dark:text-gray-200 mb-3">Exploring the new dashboard features! Really intuitive and clean design. #dashboard #UIUX</p>
      <img src="https://picsum.photos/400/200?random=1" alt="Post Image" class="w-full rounded-md shadow-inner mb-2">
      <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>❤️ 23 Likes</span>
        <span>💬 5 Comments</span>
      </div>
    </div>

    <!-- Post 2 -->
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Yesterday</p>
        </div>
      </div>
      <p class="text-gray-800 dark:text-gray-200 mb-3">Just launched my new project! Check it out in the updated dashboard. Let me know your thoughts! #projectlaunch #dashboard</p>
      <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>❤️ 45 Likes</span>
        <span>💬 12 Comments</span>
      </div>
    </div>

    <!-- Post 3 -->
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100">Peter Jones</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">3 days ago</p>
        </div>
      </div>
      <p class="text-gray-800 dark:text-gray-200 mb-3">The new analytics module in the dashboard is a game-changer! So much data presented clearly. Highly recommend! #analytics #datadriven</p>
      <img src="https://picsum.photos/400/200?random=2" alt="Post Image" class="w-full rounded-md shadow-inner mb-2">
      <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>❤️ 60 Likes</span>
        <span>💬 8 Comments</span>
      </div>
    </div>
  </div>
</div>

Shopping Cart Component

A simple shopping cart component for e-commerce, with a responsive Material Design look, complementary color scheme, and dark theme support.

Open Preview

                <div class="container mx-auto p-4 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6">
    <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Shopping Cart</h2>

    <!-- Cart Item 1 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-20 h-20 object-cover rounded-md mr-4" src="https://picsum.photos/seed/item1/200/200" alt="Product Image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 1</h3>
        <p class="text-gray-600 dark:text-gray-400">Category</p>
        <div class="flex items-center mt-2">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-200">$29.99</span>
          <span class="ml-4 text-gray-500 dark:text-gray-400">Qty: 1</span>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item 2 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-20 h-20 object-cover rounded-md mr-4" src="https://picsum.photos/seed/item2/200/200" alt="Product Image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 2</h3>
        <p class="text-gray-600 dark:text-gray-400">Category</p>
        <div class="flex items-center mt-2">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-200">$49.99</span>
          <span class="ml-4 text-gray-500 dark:text-gray-400">Qty: 1</span>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Summary -->
    <div class="flex justify-between items-center mt-6">
      <span class="text-xl font-bold text-gray-800 dark:text-gray-200">Total:</span>
      <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$79.98</span>
    </div>

    <button class="mt-8 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md shadow-md dark:bg-blue-500 dark:hover:bg-blue-600">
      Proceed to Checkout
    </button>
  </div>
</div>

Corporate 3D Triadic Modal

A responsive, 3D-designed modal component with a triadic color scheme, suitable for business and corporate websites, featuring dark mode support.

Open Preview

                <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex justify-center items-center dark:bg-gray-900 dark:bg-opacity-70">
  <div class="relative p-8 bg-white dark:bg-gray-800 w-full max-w-md mx-auto rounded-3xl shadow-2xl transform transition-all duration-300 ease-in-out scale-100 opacity-100 rotate-x-0 group-hover:scale-105 group-hover:opacity-95 group-hover:rotate-x-3d-effect" style="transform-style: preserve-3d; transition: transform 0.6s ease; perspective: 1000px;">
    <!-- 3D depth effect for modal container -->
    <div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 dark:from-blue-700 dark:via-purple-700 dark:to-pink-700 opacity-20 rounded-3xl" style="transform: translateZ(-20px);"></div>
    
    <div class="relative z-10">
      <h3 class="text-2xl font-extrabold text-gray-900 dark:text-white mb-6 text-center tracking-wide">
        <span class="inline-block" style="transform: translateZ(20px);">Welcome</span> 
        <span class="inline-block" style="transform: translateZ(10px);">to</span> 
        <span class="inline-block" style="transform: translateZ(0px);">Our Business</span>
      </h3>
      <div class="flex flex-col items-center mb-6">
        <img class="w-24 h-24 rounded-full border-4 border-blue-400 dark:border-blue-600 mb-4 shadow-lg" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" style="transform: translateZ(15px);">
        <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed text-center" style="transform: translateZ(5px);">
          Thank you for visiting. Explore our services and discover how we can help your business grow.
        </p>
      </div>
      <div class="grid grid-cols-2 gap-4 mb-6" style="transform: translateZ(10px);">
        <div class="text-center p-3 bg-blue-100 dark:bg-blue-900 rounded-lg shadow-md">
          <p class="text-blue-700 dark:text-blue-300 font-semibold text-lg">Solutions</p>
        </div>
        <div class="text-center p-3 bg-purple-100 dark:bg-purple-900 rounded-lg shadow-md">
          <p class="text-purple-700 dark:text-purple-300 font-semibold text-lg">Innovation</p>
        </div>
        <div class="col-span-2 text-center p-3 bg-pink-100 dark:bg-pink-900 rounded-lg shadow-md">
          <p class="text-pink-700 dark:text-pink-300 font-semibold text-lg">Growth</p>
        </div>
      </div>
      <div class="flex justify-end space-x-4">
        <button class="bg-gradient-to-r from-blue-500 to-purple-500 text-white dark:from-blue-700 dark:to-purple-700 dark:text-gray-100 py-3 px-6 rounded-full font-bold shadow-lg transform transition-transform duration-300 ease-in-out hover:scale-105 active:scale-95" style="transform: translateZ(10px);">
          Learn More
        </button>
        <button class="bg-gray-300 text-gray-800 dark:bg-gray-600 dark:text-gray-200 py-3 px-6 rounded-full font-semibold shadow-md transform transition-transform duration-300 ease-in-out hover:scale-105 active:scale-95" style="transform: translateZ(5px);">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

Dropdown Menu Component

Dropdown Menu Component for E-commerce with Material Design, Analogous color scheme, and complex interactions using Tailwind CSS. It is responsive and supports dark theme without JavaScript.

Open Preview

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-3">Sign out</button>
      </form>
    </div>
  </div>
</div>

1 ... 124 125 126 127 128 ... 335

Search Components

Categories

All Components