Search Components

All Components

Browse all available Tailwind CSS components

Back to Top Button Component

A responsive 'Back to Top' button with microinteraction-focused animations, triadic color scheme, and dark theme support, suitable for a portfolio.

Open Preview

                <div class="fixed bottom-6 right-6">
  <a href="#top" class="group relative flex items-center justify-center p-3 rounded-full bg-blue-500 text-white shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:scale-110 dark:focus:ring-blue-800">
    <svg class="w-6 h-6 transform transition-transform duration-300 group-hover:-translate-y-1 group-hocus:-translate-y-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7l4-4m0 0l4 4m-4-4v18"></path>
    </svg>
    <span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xs font-semibold opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 delay-150">Back to Top</span>
  </a>
</div>

Header Component

A simple, responsive header component for social media, with dark mode support. It features a logo, a search bar, and user avatar. Uses a grayscale color scheme.

Open Preview

                <header class="bg-white dark:bg-gray-900 p-4 shadow-md">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo or Site Title -->
    <a href="#" class="text-2xl font-bold text-gray-900 dark:text-white">SocialSite</a>

    <!-- Search Bar -->
    <div class="flex-grow mx-4 max-w-xl">
      <input type="text" placeholder="Search..." class="w-full p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
    </div>

    <!-- User Avatar/Menu -->
    <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-gray-300 dark:border-gray-600">
    </div>
  </div>
</header>

E-commerce Components Component

E-commerce component for a minimalist business website, with responsive design and dark theme support.

Open Preview

                <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-semibold mb-4">Product Title</h2>
  <img src="https://picsum.photos/600/400" alt="Product Image" class="w-full h-48 object-cover rounded-lg mb-4">
  <p class="text-lg mb-4">$99.99</p>
  <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>

A sticky navigation component with Neumorphism design, complementary color scheme, moderate complexity, and responsive dark theme support for a dashboard. The design incorporates soft shadows for the Neumorphism effect and uses complementary colors to create a visually appealing interface. It is suitable for a dashboard providing data visualization and control panels.

Open Preview

                <nav class="dark:bg-gray-800 dark:text-gray-200 bg-gray-200 text-gray-800 p-4 sticky top-0 z-50 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-2xl font-semibold">Dashboard</div>
    <ul class="flex space-x-6">
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Overview</a></li>
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Analytics</a></li>
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Reports</a></li>
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Settings</a></li>
    </ul>
    <div class="flex items-center space-x-4">
      <img class="w-8 h-8 rounded-full"
        src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <button class="dark:text-gray-200 text-gray-800 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="M12 3v1m0 16v1m9-9h1M3 12H2m8.003-9.127a9.006 9.006 0 00-7.872 7.872m15.744 0A9.006 9.006 0 0112 21.003m-4.127-8.003a9.006 9.006 0 017.872-7.872m0 15.744a9.006 9.006 0 00-7.872-7.872"></path>
        </svg>
      </button>
    </div>
  </div>
  <style>
    .shadow-neumorphic-light {
      box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #323232;
    }
  </style>
</nav>

Tooltip Component

A neumorphic tooltip component with a complementary color scheme, moderate complexity, and responsive design with dark theme support, suitable for a blog or content consumption.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-10">

  <div class="relative flex flex-col items-center group">
    <button class="px-6 py-3 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 font-semibold transition-all duration-300 hover:shadow-neumorphic-light-hover dark:hover:shadow-neumorphic-dark-hover focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
      Hover Me
    </button>
    
    <div class="absolute bottom-full mb-4 hidden group-hover:block w-64 p-4 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform translate-y-2 group-hover:translate-y-0 pointer-events-none group-hover:pointer-events-auto">
      <p class="font-bold text-lg mb-2 text-blue-600 dark:text-blue-400">Neumorphic Tooltip</p>
      <p>This is a an example of a neumorphic tooltip. It uses subtle shadows to create a soft, extruded look from the background.</p>
      <div class="absolute left-1/2 transform -translate-x-1/2 bottom-[-10px] w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-t-8 border-t-gray-200 dark:border-t-gray-800"></div>
    </div>
  </div>

</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #a3b1c6, -6px -6px 12px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #2e2e2e;
  }

  .shadow-neumorphic-light-hover {
    box-shadow: inset 3px 3px 6px #a3b1c6, inset -3px -3px 6px #ffffff;
  }

  .dark .shadow-neumorphic-dark-hover {
    box-shadow: inset 3px 3px 6px #1c1c1c, inset -3px -3px 6px #2e2e2e;
  }
  
  /* Complementary Colors (Example: Blue and Orange for accents) */
  .text-blue-600 {
    color: #2563eb;
  }
  .dark .text-blue-400 {
    color: #60a5fa;
  }

  .text-orange-500 {
    color: #f97316;
  }
  .dark .text-orange-400 {
    color: #fb923c;
  }
</style>

Columns Component

Responsive Columns Component with Dark Mode Support

Open Preview

                <div class="dark:bg-gray-900 min-h-screen p-8">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Column 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 relative" style="box-shadow: 5px 5px 15px rgba(0,0,0,0.3);">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Article Title 1</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-semibold">Read More</a>
      </div>
      <div class="absolute inset-0 border-4 border-blue-300 dark:border-blue-700 rounded-lg opacity-0 hover:opacity-100 transition-opacity duration-300" style="transform: translateZ(-10px);"></div>
    </div>

    <!-- Column 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 relative" style="box-shadow: 5px 5px 15px rgba(0,0,0,0.3);">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Article Title 2</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-semibold">Read More</a>
      </div>
      <div class="absolute inset-0 border-4 border-red-300 dark:border-red-700 rounded-lg opacity-0 hover:opacity-100 transition-opacity duration-300" style="transform: translateZ(-10px);"></div>
    </div>

    <!-- Column 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 relative" style="box-shadow: 5px 5px 15px rgba(0,0,0,0.3);">
      <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Article Title 3</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-semibold">Read More</a>
      </div>
      <div class="absolute inset-0 border-4 border-green-300 dark:border-green-700 rounded-lg opacity-0 hover:opacity-100 transition-opacity duration-300" style="transform: translateZ(-10px);"></div>
    </div>
  </div>
</div>

Filters Component

A minimalist and responsive Filters Component for e-commerce, with dark theme support. It includes categories, price range, and a color filter.

Open Preview

                <div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 rounded-lg shadow-md">
  <h3 class="text-lg font-semibold mb-4">Filter Products</h3>
  
  <div class="mb-6">
    <h4 class="text-md font-medium mb-2">Categories</h4>
    <ul class="space-y-2 text-sm">
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Electronics</a></li>
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Apparel</a></li>
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Home Goods</a></li>
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Books</a></li>
    </ul>
  </div>

  <div class="mb-6">
    <h4 class="text-md font-medium mb-2">Price Range</h4>
    <input type="range" min="0" max="1000" value="500" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer">
    <div class="flex justify-between text-sm mt-1">
      <span>$0</span>
      <span>$1000+</span>
    </div>
  </div>

  <div class="mb-6">
    <h4 class="text-md font-medium mb-2">Color</h4>
    <div class="flex space-x-2">
      <span class="block w-6 h-6 rounded-full bg-black cursor-pointer border-2 border-gray-300 dark:border-gray-600"></span>
      <span class="block w-6 h-6 rounded-full bg-white cursor-pointer border-2 border-gray-400 dark:border-gray-500"></span>
      <span class="block w-6 h-6 rounded-full bg-gray-500 cursor-pointer border-2 border-gray-300 dark:border-gray-600"></span>
    </div>
  </div>

  <button class="w-full bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-300">
    Apply Filters
  </button>
</div>

Columns Component

Columns Component for a Dashboard, featuring a 3D design with complementary colors. It includes three responsive columns with a simple layout, dark mode support, and uses Tailwind CSS for styling. No JavaScript is included.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="container mx-auto grid gap-8 md:grid-cols-3">

    <!-- Column 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Sales Overview</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Visualize your sales performance with key metrics.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Chart Placeholder</p>
        </div>
      </div>
    </div>

    <!-- Column 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-red-400 to-pink-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Customer Insights</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Understand your customer base and their behavior.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Graph Placeholder</p>
        </div>
      </div>
    </div>

    <!-- Column 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-green-400 to-teal-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Product Performance</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Monitor the performance of your products.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Data Placeholder</p>
        </div>
      </div>
    </div>

  </div>
</div>

Dashboard Layout Component

A responsive dashboard layout with Material Design aesthetics, including a sidebar, header, and main content area. It supports dark mode and uses complementary colors for a balanced look. The complexity is moderate with interactive-like features achieved purely with CSS and Tailwind classes.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col md:flex-row">

    <!-- Sidebar -->
    <div class="w-full md:w-64 bg-white dark:bg-gray-800 shadow-lg md:shadow-none p-4 space-y-4 flex flex-col items-center md:items-start">
        <div class="text-2xl font-bold text-indigo-600 dark:text-orange-400">Dashboard</div>
        <nav class="space-y-2 w-full">
            <a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-home"></i><span>Home</span></a>
            <a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-chart-line"></i><span>Analytics</span></a>
            <a href="#" class="block p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 flex items-center space-x-2"><i class="fas fa-cog"></i><span>Settings</span></a>
        </nav>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 flex flex-col">

        <!-- Header -->
        <header class="w-full bg-white dark:bg-gray-800 shadow-md p-4 flex justify-between items-center">
            <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Overview</h1>
            <div class="flex items-center space-x-4">
                <button class="text-gray-600 dark:text-gray-300 focus:outline-none"><i class="fas fa-bell"></i></button>
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-indigo-500 dark:border-orange-400">
            </div>
        </header>

        <!-- Content Grid -->
        <main class="flex-1 p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

            <!-- Card 1 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col justify-between transform transition duration-300 hover:scale-105">
                <div>
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Total Sales</h2>
                    <p class="text-3xl font-bold text-indigo-600 dark:text-orange-400 mt-2">$12,345</p>
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400">+5% from last month</p>
            </div>

            <!-- Card 2 -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col justify-between transform transition duration-300 hover:scale-105">
                <div>
                    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">New Users</h2>
                    <p class="text-3xl font-bold text-indigo-600 dark:text-orange-400 mt-2">2,145</p>
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400">+12% from last week</p>
            </div>

            <!-- Card 3 (Image Card) -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 flex flex-col transform transition duration-300 hover:scale-105">
                <img src="https://picsum.photos/400/200?random=1" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Data Visualization</h2>
                <p class="text-sm text-gray-600 dark:text-gray-300 mt-2 flex-grow">A quick look at the latest data trends and insights.</p>
                <button class="mt-4 self-end px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-300">View Details</button>
            </div>

            <!-- Card 4 (Chart Placeholder) -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 col-span-1 md:col-span-2 transform transition duration-300 hover:scale-105">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Sales Performance</h2>
                <div class="mt-4 h-48 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
                    <p class="text-gray-500 dark:text-gray-400">Chart Placeholder</p>
                </div>
            </div>

        </main>
    </div>

</div>

<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Success Messages Component

A simple success message component with a pastel color scheme, subtle animations for microinteractions, and responsive design with dark theme support. It's designed for a portfolio to acknowledge user actions.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-indigo-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-8 flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 md:p-8 max-w-sm w-full transform transition-all duration-300 hover:scale-105 ease-in-out">
    <div class="flex flex-col items-center justify-center space-y-4">
      <div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-green-100 dark:bg-green-700 transform transition-transform duration-500 ease-in-out scale-0 animate-scaleIn">
        <svg class="w-10 h-10 text-green-500 dark:text-green-200" 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="M5 13l4 4L19 7"></path>
        </svg>
      </div>
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center">Success!</h2>
      <p class="text-gray-600 dark:text-gray-300 text-center text-sm">
        Your action was completed successfully. We appreciate your patience.
      </p>
      <button class="px-6 py-2 rounded-full bg-purple-200 dark:bg-purple-600 text-purple-800 dark:text-white font-semibold hover:bg-purple-300 dark:hover:bg-purple-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-75">
        Continue
      </button>
    </div>
  </div>
</div>

<style>
  @keyframes scaleIn {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    60% {
      transform: scale(1.1);
      opacity: 1;
    }
    100% {
      transform: scale(1);
    }
  }

  .animate-scaleIn {
    animation: scaleIn 0.6s ease-out forwards;
  }
</style>

1 ... 150 151 152 153 154 ... 335