Search Components

All Components

Browse all available Tailwind CSS components

Progress Indicators Component

A responsive Progress Indicator Component with Brutalism design, earthy color tones, and dark theme support, suitable for a blog or content site.

Open Preview

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8 flex flex-col items-center justify-center font-mono">
  <div class="w-full max-w-2xl bg-stone-300 dark:bg-stone-700 border-4 border-stone-900 dark:border-stone-100 p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] mb-8">
    <h1 class="text-3xl md:text-5xl text-stone-900 dark:text-stone-100 mb-6 border-b-4 border-stone-900 dark:border-stone-100 pb-2">Article Progress</h1>
    
    <!-- Progress Bar 1 -->
    <div class="mb-6">
      <h2 class="text-xl md:text-2xl text-stone-800 dark:text-stone-200 mb-2">Section 1: Introduction</h2>
      <div class="w-full h-8 bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 overflow-hidden">
        <div class="h-full bg-amber-700 dark:bg-amber-400" style="width: 30%;"></div>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-1 text-sm">30% Completed</p>
    </div>

    <!-- Progress Bar 2 -->
    <div class="mb-6">
      <h2 class="text-xl md:text-2xl text-stone-800 dark:text-stone-200 mb-2">Section 2: Core Concepts</h2>
      <div class="w-full h-8 bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 overflow-hidden">
        <div class="h-full bg-amber-700 dark:bg-amber-400" style="width: 65%;"></div>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-1 text-sm">65% Completed</p>
    </div>

    <!-- Progress Bar 3 -->
    <div class="mb-6">
      <h2 class="text-xl md:text-2xl text-stone-800 dark:text-stone-200 mb-2">Section 3: Conclusion</h2>
      <div class="w-full h-8 bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 overflow-hidden">
        <div class="h-full bg-amber-700 dark:bg-amber-400" style="width: 10%;"></div>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-1 text-sm">10% Completed</p>
    </div>

    <!-- Article Completion Indicator -->
    <div class="mt-8 pt-4 border-t-4 border-stone-900 dark:border-stone-100">
      <h2 class="text-2xl md:text-3xl text-stone-900 dark:text-stone-100 mb-4">Overall Article Progress</h2>
      <div class="w-full bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 h-10 flex items-center justify-center relative">
        <div class="h-full bg-green-700 dark:bg-green-400 transition-all duration-700 ease-out" style="width: 45%;"></div>
        <span class="absolute text-stone-100 dark:text-stone-900 text-lg font-bold">45% Complete</span>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-2 text-sm text-center">Keep reading to finish the article!</p>
    </div>

  </div>
</div>

Filters Component

A responsive Filters Component with 3D design elements in earth tones, suitable for a portfolio, with dark theme support.

Open Preview

                <div class="p-6 bg-stone-100 dark:bg-stone-900 min-h-screen">
  <h2 class="text-3xl font-bold text-stone-800 dark:text-stone-200 mb-8 text-center">Explore My Portfolio</h2>

  <div class="flex flex-wrap justify-center gap-4 mb-12">
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">All Projects</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">Web Development</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">UI/UX Design</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">Graphic Design</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
  </div>
  
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- Project Card 1 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project1/600/400" alt="Project 1" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title One</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">A brief description of Project One, showcasing its key features and technologies used. This project demonstrates responsive design.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">HTML</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">CSS</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Tailwind CSS</span>
      </div>
    </div>

    <!-- Project Card 2 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project2/600/400" alt="Project 2" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Two</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">This project focuses on a comprehensive UI/UX design approach, user flows, and wireframing for an intuitive experience.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Figma</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Prototyping</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Research</span>
      </div>
    </div>

    <!-- Project Card 3 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project3/600/400" alt="Project 3" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Three</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">An example of graphic design work including logo creation, branding guidelines, and marketing collateral design.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Photoshop</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Illustrator</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Branding</span>
      </div>
    </div>

    <!-- Project Card 4 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project4/600/400" alt="Project 4" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Four</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">A web development project featuring a dynamic and interactive frontend built with modern JavaScript frameworks.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">React</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Node.js</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">API Integration</span>
      </div>
    </div>

    <!-- Project Card 5 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project5/600/400" alt="Project 5" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Five</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">UI/UX case study exploring user research, persona creation, and iterative design processes for a mobile application.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">User Research</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Wireframing</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Usability Testing</span>
      </div>
    </div>

    <!-- Project Card 6 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project6/600/400" alt="Project 6" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Six</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">A sophisticated graphic design project involving complex illustrations and print media layouts for a magazine.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Illustrations</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">InDesign</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Print Design</span>
      </div>
cv    </div>

  </div>
</div>

Glassmorphism Sidebar Navigation Component

A Glassmorphism-styled sidebar navigation component for blogs, featuring a monochromatic color scheme. It's a simple, responsive design with dark mode support, using only HTML and Tailwind CSS. The sidebar includes a site title, navigation links, and a profile section.

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 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg p-5 shadow-lg md:min-h-screen">
    <div class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">MyBlog</div>
    <nav>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out">
        Home
      </a>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
        Articles
      </a>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
        Categories
      </a>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
        About
      </a>
      <a href="#" class="block py-2 px-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 dark:hover:text-white transition duration-300 ease-in-out mt-2">
        Contact
      </a>
    </nav>

    <div class="mt-8 pt-8 border-t border-gray-300 dark:border-gray-700">
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400">
        <div class="ml-3">
          <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Blogger</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Content (Placeholder for blog content) -->
  <div class="flex-1 p-8">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Welcome to MyBlog!</h1>
    <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
      This is a placeholder for your blog content. The sidebar on the left demonstrates a Glassmorphism-style navigation.
      It's responsive, adapts to dark mode, and uses a monochromatic color scheme for a clean and modern look.
      Explore the navigation links to imagine various sections of your blog.
    </p>
    
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg p-6 rounded-lg shadow-lg">
            <img src="https://picsum.photos/seed/blog1/400/250" alt="Blog Post 1" class="rounded-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">My First Awesome Post</h2>
            <p class="text-gray-700 dark:text-gray-300 text-sm">A short description of the first amazing blog post. Click to read more!</p>
        </div>
        <div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg p-6 rounded-lg shadow-lg">
            <img src="https://picsum.photos/seed/blog2/400/250" alt="Blog Post 2" class="rounded-lg mb-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Another Great Article</h2>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Discover more insights in this compelling second article.</p>
        </div>
    </div>
  </div>

</div>

Skeuomorphic Progress Bar

Skeuomorphic progress bar component for portfolios, featuring a monochromatic color scheme and complex, interactive design with responsive and dark mode support using Tailwind CSS.

Open Preview

                <div class="p-8 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-md bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-xl shadow-2xl-inner relative">
    <div class="absolute inset-0 border-4 border-gray-400 dark:border-gray-600 rounded-xl pointer-events-none"></div>
    <div class="text-center mb-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">Project Progress</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Portfolio Showcase</p>
    </div>

    <div class="mb-8 relative">
      <div class="h-8 bg-gray-400 dark:bg-gray-600 rounded-full shadow-inner-lg overflow-hidden relative">
        <div class="absolute inset-y-0 left-0 w-3/4 bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 rounded-full shadow-lg transition-all duration-500 ease-out flex items-center justify-end pr-3"
             style="width: 75%;">
          <span class="text-white text-sm font-bold drop-shadow-md">75%</span>
        </div>
        <div class="absolute top-1/2 left-3/4 -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-white dark:bg-gray-200 rounded-full shadow-md border-2 border-blue-500 dark:border-blue-700"></div>
      </div>
      <div class="text-gray-700 dark:text-gray-300 text-right mt-2 text-sm">Completed</div>
    </div>

    <div class="grid grid-cols-2 gap-4 text-sm">
      <div class="flex items-center space-x-2">
        <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
        <span class="text-gray-700 dark:text-gray-300">Design Phase</span>
      </div>
      <div class="flex items-center space-x-2 justify-end">
        <span class="text-gray-700 dark:text-gray-300">90%</span>
        <div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
      </div>

      <div class="flex items-center space-x-2">
        <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
        <span class="text-gray-700 dark:text-gray-300">Development</span>
      </div>
      <div class="flex items-center space-x-2 justify-end">
        <span class="text-gray-700 dark:text-gray-300">70%</span>
        <div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
      </div>

      <div class="flex items-center space-x-2">
        <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
        <span class="text-gray-700 dark:text-gray-300">Testing</span>
      </div>
      <div class="flex items-center space-x-2 justify-end">
        <span class="text-gray-700 dark:text-gray-300">50%</span>
        <div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
      </div>
    </div>

    <div class="mt-8 text-center">
      <button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white font-bold py-2 px-6 rounded-full 
                     shadow-lg hover:shadow-xl active:shadow-inner-lg transition-all duration-200
                     dark:bg-blue-700 dark:hover:bg-blue-800 dark:active:bg-blue-900">
        View Details
      </button>
    </div>
  </div>
</div>

<style>
  /* Custom Utility Classes for Skeuomorphism */
  .shadow-2xl-inner {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.5);
  }
  .dark .shadow-2xl-inner {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.1);
  }

  .shadow-inner-lg {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2), inset -3px -3px 6px rgba(255, 255, 255, 0.5);
  }
  .dark .shadow-inner-lg {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(255, 255, 255, 0.1);
  }

  .drop-shadow-md {
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
  }
</style>

Navigation Components Component

A complex, responsive navigation component for dashboards, featuring microinteractions and an analogous color scheme, with dark mode support. Utilizes Tailwind CSS for styling and includes interactive elements without relying on JavaScript.

Open Preview

                <nav class="bg-gradient-to-r from-teal-400 via-emerald-500 to-cyan-500 dark:from-teal-800 dark:via-emerald-900 dark:to-cyan-900 p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white text-2xl font-bold">Dashboard</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
        Home
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
        Analytics
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
        Reports
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
        Settings
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
    </div>
    <div class="md:hidden">
      <button class="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>
  <div class="md:hidden mt-4">
    <a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Home</a>
    <a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Analytics</a>
    <a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Reports</a>
    <a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Settings</a>
  </div>
</nav>

Glassmorphism Search Box

A simple, responsive glassmorphism search box component with grayscale colors, suitable for a dashboard. Supports dark mode.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md">
    <input type="text" placeholder="Search..." class="w-full py-3 px-5 pr-12 rounded-lg backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-600 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 transition duration-300 ease-in-out"
    />
    <div class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
      <svg class="h-5 w-5 text-gray-600 dark:text-gray-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
      </svg>
    </div>
  </div>
</div>

Chat Window Component

A simple chat window component with micro-interactions, responsive design, and dark theme support, suitable for blogs or content consumption.

Open Preview

                <div class="flex flex-col h-screen antialiased text-gray-800 bg-gray-50 dark:bg-gray-900 dark:text-gray-200">
  <div class="flex flex-row items-center justify-between flex-shrink-0 px-4 py-2 border-b border-gray-200 dark:border-gray-700">
    <div class="flex items-center gap-3">
      <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
      <div class="flex flex-col">
        <div class="font-semibold">John Doe</div>
        <div class="text-sm text-gray-500 dark:text-gray-400">Active now</div>
      </div>
    </div>
    <button class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>

  <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/thumb/women/75.jpg" alt="User Avatar" class="w-8 h-8 mr-3 rounded-full">
      <div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-2 items-start">
        <div>
          <span class="inline-block px-4 py-2 text-gray-700 bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-gray-200">
            Hey there! How are you doing?
          </span>
        </div>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex items-end justify-end mb-4">
      <div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-1 items-end">
        <div>
          <span class="inline-block px-4 py-2 text-white bg-blue-500 rounded-lg">
            I'm doing great, thanks for asking! How about you?
          </span>
        </div>
      </div>
      <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-8 h-8 ml-3 rounded-full">
    </div>

    <!-- Another Incoming Message -->
    <div class="flex items-end mb-4">
      <img src="https://randomuser.me/api/portraits/thumb/women/75.jpg" alt="User Avatar" class="w-8 h-8 mr-3 rounded-full">
      <div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-2 items-start">
        <div>
          <span class="inline-block px-4 py-2 text-gray-700 bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-gray-200">
            I'm doing good too! Just chilling and working on some projects.
          </span>
        </div>
      </div>
    </div>
  </div>

  <div class="flex-shrink-0 px-4 py-2 border-t border-gray-200 dark:border-gray-700">
    <div class="relative flex items-center">
      <input type="text" placeholder="Type your message..." class="flex-grow w-full h-10 px-4 pr-10 text-gray-700 placeholder-gray-400 bg-gray-100 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
      <button class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-500 focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 transform rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
        </svg>
      </button>
    </div>
  </div>
</div>

Loaders Component

A complex, responsive, retro-vintage loader component for business websites, with vibrant colors and dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-64 h-64 border-4 border-purple-500 rounded-full animate-spin-slow">
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="w-24 h-24 bg-pink-500 rounded-full animate-pulse-fast"></div>
    </div>
    <div class="absolute top-0 left-0 w-16 h-16 -mt-8 -ml-8 bg-yellow-400 rounded-full animate-bounce"></div>
    <div class="absolute bottom-0 right-0 w-16 h-16 -mb-8 -mr-8 bg-green-400 rounded-full animate-bounce delay-100"></div>
    <div class="absolute top-0 right-0 w-12 h-12 -mt-6 -mr-6 bg-blue-400 rounded-full animate-spin-reverse"></div>
    <div class="absolute bottom-0 left-0 w-12 h-12 -mb-6 -ml-6 bg-red-400 rounded-full animate-spin-reverse delay-100"></div>
  </div>

  <style>
    @keyframes spin-slow {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes pulse-fast {
      0%, 100% {
        transform: scale(0.9);
        opacity: 0.7;
      }
      50% {
        transform: scale(1);
        opacity: 1;
      }
    }

    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }

    @keyframes spin-reverse {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(-360deg);
      }
    }

    .animate-spin-slow {
      animation: spin-slow 8s linear infinite;
    }

    .animate-pulse-fast {
      animation: pulse-fast 1.5s infinite;
    }

    .animate-bounce {
      animation: bounce 2s infinite;
    }

    .animate-spin-reverse {
      animation: spin-reverse 5s linear infinite;
    }
  </style>
</div>

Brutalist Login/Signup Component

Brutalist Login/Signup Component for Blog/Content websites with Grayscale color scheme.

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-none shadow-none border-4 border-black dark:border-white w-full max-w-md mx-4">
        <div class="mb-8">
            <h2 class="text-3xl font-bold text-black dark:text-white mb-2">Login</h2>
            <p class="text-gray-700 dark:text-gray-300">Access your brutalist blog experience.</p>
        </div>
        <form>
            <div class="mb-4">
                <label for="username" class="sr-only">Username</label>
                <input type="text" id="username" placeholder="USERNAME" class="w-full p-3 border-2 border-black dark:border-white bg-gray-200 dark:bg-gray-700 text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-0 focus:border-black dark:focus:border-white text-lg">
            </div>
            <div class="mb-6">
                <label for="password" class="sr-only">Password</label>
                <input type="password" id="password" placeholder="PASSWORD" class="w-full p-3 border-2 border-black dark:border-white bg-gray-200 dark:bg-gray-700 text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-0 focus:border-black dark:focus:border-white text-lg">
            </div>
            <button type="submit" class="w-full bg-black dark:bg-white text-white dark:text-black P-3 border-2 border-black dark:border-white uppercase font-bold text-lg hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors duration-300">
                LOGIN
            </button>
        </form>
        <div class="mt-8 text-center">
            <a href="#" class="text-black dark:text-white hover:underline font-bold">CREATE ACCOUNT</a>
        </div>
    </div>
</div>

Password Reset Component

A password reset component with Material Design, vibrant colors, moderate complexity, and e-commerce purpose. It is responsive and supports dark theme using Tailwind CSS. No JavaScript is included.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="max-w-md w-full p-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl">
    <h2 class="text-3xl font-bold text-center text-indigo-600 dark:text-indigo-400 mb-6">Reset Your Password</h2>
    <p class="text-center text-gray-600 dark:text-gray-300 mb-8">Enter your email address and we'll send you a link to reset your password.</p>
    <form>
      <div class="mb-5">
        <label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-medium mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="[email protected]">
      </div>
      <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition duration-300">
        Send Reset Link
      </button>
    </form>
    <div class="mt-6 text-center">
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-500 text-sm font-medium">Remember your password? Log In</a>
    </div>
  </div>
</div>

1 ... 131 132 133 134 135 ... 335