Search Components

All Components

Browse all available Tailwind CSS components

Columns Component

A simple, responsive column component for e-commerce, with Material Design influences, grayscale colors, and dark mode support.

Open Preview

                 কাপড়<div class="container mx-auto p-4 bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-md rounded-lg"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm"> <img class="w-full h-48 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum1/400/300" alt="Product Image 1"> <h3 class="text-lg font-semibold mb-2">Product Title 1</h3> <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of product 1. This is a very appealing product.</p> <span class="block text-xl font-bold text-gray-800 dark:text-gray-100 mb-4">$19.99</span> <button class="w-full bg-gray-800 dark:bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-900 dark:hover:bg-gray-600 transition duration-300">Add to Cart</button> </div> <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm"> <img class="w-full h-48 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum2/400/300" alt="Product Image 2"> <h3 class="text-lg font-semibold mb-2">Product Title 2</h3> <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of product 2. Another great item for your needs.</p> <span class="block text-xl font-bold text-gray-800 dark:text-gray-100 mb-4">$29.99</span> <button class="w-full bg-gray-800 dark:bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-900 dark:hover:bg-gray-600 transition duration-300">Add to Cart</button> </div> <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm"> <img class="w-full h-48 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum3/400/300" alt="Product Image 3"> <h3 class="text-lg font-semibold mb-2">Product Title 3</h3> <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of product 3. You definitely want this one!</p> <span class="block text-xl font-bold text-gray-800 dark:text-gray-100 mb-4">$39.99</span> <button class="w-full bg-gray-800 dark:bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-900 dark:hover:bg-gray-600 transition duration-300">Add to Cart</button> </div> </div></div>

Progress Bar

A responsive progress bar component with dark mode support for e-commerce, featuring a vibrant color scheme and a simple layout.

Open Preview

                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 relative overflow-hidden">
  <div class="bg-indigo-600 h-4 rounded-full dark:bg-indigo-400" style="width: 75%;">
    <span class="absolute right-2 top-0 h-full flex items-center text-white text-xs font-bold">75%</span>
  </div>
</div>

Content Display Components Component

A Content Display Component with microinteractions,grayscale colors, and moderate complexity, designed for portfolios with responsive dark theme support.

Open Preview

                
<div class="p-8 bg-white dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="max-w-4xl w-full grid grid-cols-1 md:grid-cols-2 gap-8">

    <!-- Article Card 1 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:hover:bg-gray-700">
      <img class="w-full h-48 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500" src="https://picsum.photos/seed/picsum1/600/400" alt="Article Thumbnail">
      <div class="p-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">Project Alpha: A Deep Dive</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Explore the intricacies of Project Alpha, a landmark achievement in innovative design and engineering.</p>
        <div class="flex justify-between items-center">
          <span class="text-xs text-gray-500 dark:text-gray-400">Read Time: 7 min</span>
          <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-black dark:hover:text-white transition-all duration-300 flex items-center">
            Learn More
            <svg class="ml-1 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" 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="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
    </div>

    <!-- Article Card 2 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:hover:bg-gray-700">
      <img class="w-full h-48 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500" src="https://picsum.photos/seed/picsum2/600/400" alt="Article Thumbnail">
      <div class="p-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">The Future of UI/UX: Trends and Predictions</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Dive into the exciting world of UI/UX and discover what lies ahead for cutting-edge design.</p>
        <div class="flex justify-between items-center">
          <span class="text-xs text-gray-500 dark:text-gray-400">Read Time: 10 min</span>
          <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-black dark:hover:text-white transition-all duration-300 flex items-center">
            Learn More
            <svg class="ml-1 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" 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="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
    </div>

    <!-- Testimonial Card 1 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 p-6 dark:bg-gray-800 dark:hover:bg-gray-700 md:col-span-2 flex items-start space-x-4">
        <img class="w-16 h-16 rounded-full object-cover shadow-md transform scale-100 group-hover:scale-105 transition-transform duration-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">"This component embodies the perfect blend of subtle animations and clean aesthetics. It

Notifications Component

Brutalist Notifications Component for Dashboard

Open Preview

                <div class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center p-4" dark:bg-gray-900 dark:bg-opacity-80>
  <div class="bg-yellow-400 border-4 border-black p-8 shadow-brutalism w-full max-w-md transform -rotate-3 hover:rotate-0 transition-transform duration-300 dark:bg-purple-700 dark:border-yellow-400">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-3xl font-extrabold text-black uppercase tracking-wider dark:text-yellow-400">Notifications</h2>
      <button class="text-black hover:text-red-700 text-4xl font-bold dark:text-yellow-400 dark:hover:text-red-400">&times;</button>
    </div>
    <div class="space-y-6">
      <div class="bg-blue-500 border-2 border-black p-4 flex items-start space-x-4 transform rotate-1 hover:rotate-0 transition-transform duration-300 dark:bg-teal-500 dark:border-yellow-400">
        <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-black dark:border-yellow-400">
        <div>
          <p class="text-black font-semibold text-lg dark:text-yellow-400">New message from <span class="underline">Alex</span></p>
          <p class="text-gray-800 text-sm dark:text-yellow-200">"Hey, are you free for a quick call today?"</p>
          <span class="text-xs text-gray-700 dark:text-yellow-100">2 min ago</span>
        </div>
      </div>

      <div class="bg-red-600 border-2 border-black p-4 flex items-start space-x-4 transform -rotate-2 hover:rotate-0 transition-transform duration-300 dark:bg-orange-500 dark:border-yellow-400">
        <img src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-black dark:border-yellow-400">
        <div>
          <p class="text-black font-semibold text-lg dark:text-yellow-400">Task <span class="underline">"Prepare Q3 Report"</span> is overdue</p>
          <p class="text-gray-800 text-sm dark:text-yellow-200">Please complete it by end of day.</p>
          <span class="text-xs text-gray-700 dark:text-yellow-100">1 hour ago</span>
        </div>
      </div>

      <div class="bg-green-500 border-2 border-black p-4 flex items-start space-x-4 transform rotate-1 hover:rotate-0 transition-transform duration-300 dark:bg-lime-500 dark:border-yellow-400">
        <img src="https://picsum.photos/seed/dashboard/50/50" alt="Dashboard Icon" class="w-12 h-12 rounded-full border-2 border-black dark:border-yellow-400 object-cover">
        <div>
          <p class="text-black font-semibold text-lg dark:text-yellow-400">System Update Available</p>
          <p class="text-gray-800 text-sm dark:text-yellow-200">New features and bug fixes. Click to learn more.</p>
          <span class="text-xs text-gray-700 dark:text-yellow-100">5 hours ago</span>
        </div>
      </div>
    </div>

    <div class="mt-8 text-center">
      <button class="bg-black text-yellow-400 border-2 border-yellow-400 px-6 py-3 font-bold uppercase text-lg tracking-wider hover:bg-yellow-400 hover:text-black transition-colors duration-300 dark:bg-yellow-400 dark:text-black dark:border-purple-700 dark:hover:bg-purple-700 dark:hover:text-yellow-400">
        View All
      </button>
    </div>
  </div>
</div>

<style>
  .shadow-brutalism {
    box-shadow: 8px 8px 0px black;
  }

  /* Dark mode styles come from Tailwind dark: prefix */
</style>

Dropdown Menu Component

A responsive 3D-styled dropdown menu for dashboards, with triadic color scheme 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 px-4 py-2 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 text-white text-sm font-medium shadow-lg hover:from-blue-600 hover:via-purple-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transform transition-transform duration-200 active:scale-95 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 dark:hover:from-gray-600 dark:hover:via-gray-700 dark:hover:to-gray-800" id="options-menu" aria-haspopup="true" aria-expanded="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>

  <!-- Dropdown panel, show/hide based on dropdown state. -->
  <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 divide-y divide-gray-100 opacity-0 scale-95 transition-all duration-200 ease-out dark:bg-gray-800 dark:ring-gray-700 dark:divide-gray-700"
    role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">Account settings</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">Support</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">License</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">Sign out</a>
    </div>
  </div>
</div>

<script>
  // This is a placeholder for JavaScript. In a real application, you would toggle the dropdown visibility with JS.
  // For this example, we'll simulate a "hover" effect with Tailwind classes that are normally toggled by JS.
  const dropdownButton = document.getElementById('options-menu');
  const dropdownPanel = dropdownButton.nextElementSibling;

  dropdownButton.addEventListener('mouseover', () => {
    dropdownPanel.classList.remove('opacity-0', 'scale-95');
    dropdownPanel.classList.add('opacity-100', 'scale-100');
  });

  dropdownButton.addEventListener('mouseout', () => {
    dropdownPanel.classList.remove('opacity-100', 'scale-100');
    dropdownPanel.classList.add('opacity-0', 'scale-95');
  });

  dropdownPanel.addEventListener('mouseover', () => {
    dropdownPanel.classList.remove('opacity-0', 'scale-95');
    dropdownPanel.classList.add('opacity-100', 'scale-100');
  });

  dropdownPanel.addEventListener('mouseout', () => {
    dropdownPanel.classList.remove('opacity-100', 'scale-100');
    dropdownPanel.classList.add('opacity-0', 'scale-95');
  });

</script>

Glassmorphism Loader Component

A simple, glassmorphism-styled loader component with complementary colors, suitable for a portfolio, with responsive and dark mode support.

Open Preview

                <div class="flex h-screen items-center justify-center bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 dark:from-gray-800 dark:via-gray-900 dark:to-black">
  <div class="relative transform cursor-pointer rounded-2xl bg-white bg-opacity-10 p-8 shadow-2xl backdrop-blur-xl backdrop-filter transition-all duration-300 hover:scale-105 dark:bg-gray-700 dark:bg-opacity-10">
    <div class="absolute inset-0 -z-10 rounded-2xl bg-gradient-to-br from-blue-300 via-purple-300 to-pink-300 opacity-20 blur-xl dark:from-gray-700 dark:via-gray-800 dark:to-black"></div>
    <div class="loader-dots relative flex h-24 w-24 transform items-center justify-center space-x-2 rounded-full bg-white bg-opacity-20 shadow-inner dark:bg-gray-800 dark:bg-opacity-20">
      <div class="h-4 w-4 animate-bounce rounded-full bg-blue-600 dark:bg-blue-400"></div>
      <div class="h-4 w-4 animate-bounce rounded-full bg-purple-600 delay-75 dark:bg-purple-400"></div>
      <div class="h-4 w-4 animate-bounce rounded-full bg-pink-600 delay-150 dark:bg-pink-400"></div>
    </div>
    <p class="mt-4 text-center text-lg font-semibold text-gray-800 dark:text-gray-200">Loading Awesomeness...</p>
  </div>

  <style>
    @keyframes bounce {
      0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
      }
      50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }
    }

    .loader-dots div {
      animation: bounce 1s infinite;
    }

    .loader-dots div:nth-child(2) {
      animation-delay: 0.1s;
    }

    .loader-dots div:nth-child(3) {
      animation-delay: 0.2s;
    }
  </style>
</div>

Chat Window Component

A simple, responsive, 3D-inspired chat window component with a pastel color scheme, designed for a portfolio to showcase work or products. It includes dark mode support.

Open Preview

                <div class="flex flex-col h-screen bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-800 dark:to-gray-900">
  <header class="p-4 bg-white dark:bg-gray-700 shadow-md relative z-10">
    <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Chat Window</h1>
  </header>

  <div class="flex-1 p-4 overflow-y-auto">
    <!-- Incoming Message -->
    <div class="flex items-end mb-4">
      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-lg">
      <div class="bg-indigo-200 dark:bg-indigo-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        Hi there! This is an example of an incoming message in 3D.
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex justify-end items-end mb-4">
      <div class="bg-purple-200 dark:bg-purple-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        And this is an outgoing message, also with a cool 3D effect!
      </div>
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 shadow-lg">
    </div>

    <!-- Another Incoming Message -->
    <div class="flex items-end mb-4">
      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-lg">
      <div class="bg-indigo-200 dark:bg-indigo-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        The pastel colors give it a soft and inviting feel.
      </div>
    </div>

    <!-- Another Outgoing Message -->
    <div class="flex justify-end items-end mb-4">
      <div class="bg-purple-200 dark:bg-purple-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        And it's simple enough for a portfolio showcase!
      </div>
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 shadow-lg">
    </div>

  </div>

  <footer class="p-4 bg-white dark:bg-gray-700 shadow-md relative z-10">
    <div class="flex">
      <input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-300 dark:focus:ring-indigo-600 shadow-inner">
      <button class="ml-3 px-6 py-3 bg-indigo-400 dark:bg-indigo-600 text-white rounded-lg font-semibold shadow-md hover:bg-indigo-500 dark:hover:bg-indigo-700 transition-colors duration-300">Send</button>
    </div>
  </footer>
</div>

Mega Menu Component

Minimalist/Flat Design - Vibrant, Simple E-commerce Mega Menu with Dark Mode support

Open Preview

                <nav class="bg-white dark:bg-gray-900 shadow-md">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <div class="text-2xl font-bold text-gray-800 dark:text-white">ShopSwift</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Home</a>
      <div class="relative group">
        <button class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Categories</button>
        <div class="absolute left-0 mt-3 w-56 bg-white dark:bg-gray-800 shadow-lg rounded-md opacity-0 group-hover:opacity-100 group-hover:scale-100 transition-all duration-300 origin-top transform scale-95">
          <div class="p-4">
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Electronics</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Apparel</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Home Goods</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Books</a>
          </div>
        </div>
      </div>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Deals</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 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>
</nav>

Footer Component

A minimalist footer component with complementary colors, moderate complexity, and social media integration. Features responsive design and dark mode support.

Open Preview

                <footer class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/3 text-center md:text-left mb-4 md:mb-0">
        <p class="text-gray-600 dark:text-gray-400 text-sm">&copy; 2023 SocialApp. All rights reserved.</p>
      </div>
      <div class="w-full md:w-1/3 flex justify-center mb-4 md:mb-0">
        <ul class="flex space-x-6">
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500 text-sm">Privacy Policy</a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500 text-sm">Terms of Service</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/3 flex justify-center md:justify-end">
        <ul class="flex space-x-4">
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-facebook-f"></i></a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-twitter"></i></a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-instagram"></i></a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-linkedin-in"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

Tabs Component

A responsive Tabs Component with dark mode support for blog/content consumption. Uses triadic color scheme with dark backgrounds to reduce eye strain.

Open Preview

                
<div class="dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-gray-800 dark:bg-gray-950 rounded-lg shadow-xl overflow-hidden">
      <div class="flex border-b border-gray-700 dark:border-gray-700">
        <button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-cyan-400 dark:text-cyan-500 border-b-2 border-cyan-400 dark:border-cyan-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
          Featured Articles
        </button>
        <button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-purple-400 dark:text-purple-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
          Popular Posts
        </button>
        <button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-fuchsia-400 dark:text-fuchsia-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
          Latest News
        </button>
      </div>

      <div class="p-6 md:p-8">
        <!-- Tab Content 1: Featured Articles -->
        <div class="space-y-8">
          <div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
            <img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article1/600/400" alt="Article Thumbnail">
            <div class="p-6 flex flex-col justify-between">
              <div>
                <h3 class="text-2xl font-bold text-white mb-2">The Future of AI in Content Creation</h3>
                <p class="text-gray-300 text-base leading-relaxed">Explore how artificial intelligence is revolutionizing the way we create and consume digital content, from automated writing to personalized recommendations.</p>
              </div>
              <div class="mt-4 flex items-center text-gray-400">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
                <span>John Doe • 2 hours ago</span>
              </div>
            </div>
          </div>

          <div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
            <img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article2/600/400" alt="Article Thumbnail">
            <div class="p-6 flex flex-col justify-between">
              <div>
                <h3 class="text-2xl font-bold text-white mb-2">Mastering Responsive Design with Tailwind CSS</h3>
                <p class="text-gray-300 text-base leading-relaxed">Dive deep into the utility-first CSS framework and learn how to build stunning, responsive web interfaces with ease and efficiency.</p>
              </div>
              <div class="mt-4 flex items-center text-gray-400">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
                <span>Jane Smith • Yesterday</span>
              </div>
            </div>
          </div>

          <div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
            <img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article3/600/400" alt="Article Thumbnail">
            <div class="p-6 flex flex-col justify-between">
              <div>
                <h3 class="text-2xl font-bold text-white mb-2">The Art of Storytelling in Digital Media</h3>
                <p class="text-gray-300 text-base leading-relaxed">Uncover the timeless principles of captivating narratives and how they apply to modern digital platforms and content forms.</p>
              </div>
              <div class="mt-4 flex items-center text-gray-400">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Author Avatar">
                <span>Peter Jones • 3 days ago</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 125 126 127 128 129 ... 335