All Components

Browse all available Tailwind CSS components

Content Display Component

A 3D styled content display component showcasing portfolio work or products with a grayscale color scheme and responsive design including dark mode support.

Open Preview

                <div class="max-w-4xl mx-auto p-6">
    <h2 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 1</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 2</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 3</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=4" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 4</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=5" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 5</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=6" alt="Portfolio Item" />
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Project Title 6</h3>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Description of the project showcasing skills and features.</p>
            </div>
        </div>
    </div>
</div>

Skeuomorphic Hamburger Menu

A responsive Hamburger Menu component designed with skeuomorphic elements, vibrant colors, and dark theme support for e-commerce sites.

Open Preview

                <div class="flex items-center justify-between p-4 bg-blue-500 dark:bg-blue-800 rounded-lg shadow-lg">
    <div class="flex items-center space-x-2">
        <img src="https://picsum.photos/30" alt="Logo" class="h-8 w-8 rounded-full border-2 border-white">
        <h1 class="text-white text-lg font-bold">ShopEasy</h1>
    </div>
    <button class="text-white focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
    </button>
</div>

<div class="hidden md:flex flex-col bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-2">
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Home</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Shop</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">About Us</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Contact</a>
    <a href="#" class="flex items-center py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Cart</a>
</div>

<div class="md:hidden">
    <div class="flex flex-col bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 mt-2 space-y-2">
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Home</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Shop</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">About Us</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Contact</a>
        <a href="#" class="flex items-center px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-700 rounded-lg transition">Cart</a>
    </div>
</div>

Interactive Components Component

Interactive Components Component with Material Design, Triadic color scheme, Complex complexity, for E-commerce, with responsive design and dark theme support.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 p-4">
  <div class="container mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Short product description goes here. It can span a couple of lines.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-blue-600 dark:text-blue-400">$199.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 dark:bg-blue-400 dark:hover:bg-blue-500">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Product Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Another short product description for variety and demonstration.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$249.50</span>
            <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 dark:bg-red-400 dark:hover:bg-red-500">Add to Cart</button>
          </div>
        </div>
      </div>
      
       <!-- Product Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Yet another product description to fill the card space.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-green-600 dark:text-green-400">$145.00</span>
            <button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 dark:bg-green-400 dark:hover:bg-green-500">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Activity Feed Component

Minimalist/Flat Design Activity Feed for E-commerce, Monochromatic, Simple, Responsive, Dark Theme

Open Preview

                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Activity Feed</h3>
  <ul class="divide-y divide-gray-200 dark:divide-gray-700">
    <li class="py-3 flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          <span class="font-medium text-gray-900 dark:text-white">John Doe</span> placed an order.
        </p>
      </div>
      <span class="text-xs text-gray-400 dark:text-gray-500">2 hours ago</span>
    </li>
    <li class="py-3 flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          <span class="font-medium text-gray-900 dark:text-white">Jane Smith</span> reviewed a product.
        </p>
      </div>
      <span class="text-xs text-gray-400 dark:text-gray-500">5 hours ago</span>
    </li>
    <li class="py-3 flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          <span class="font-medium text-gray-900 dark:text-white">Robert Brown</span> added item to cart.
        </p>
      </div>
      <span class="text-xs text-gray-400 dark:text-gray-500">10 hours ago</span>
    </li>
  </ul>
</div>

Social Components Component

Retro/Vintage Social Components Component with Monochromatic color scheme and Simple complexity, designed for Blogs/Content, with dark theme support.

Open Preview

                ```html
<div class="container mx-auto p-4 dark:bg-gray-800 bg-gray-200">
  <div class="max-w-sm rounded overflow-hidden shadow-lg mx-auto dark:bg-gray-700 bg-white">
    <div class="px-6 py-4">
      <div class="font-bold text-xl mb-2 dark:text-white text-gray-800">Social Post</div>
      <p class="dark:text-gray-300 text-gray-700 text-base">
        This is a simple social media component card, designed with a retro feel and monochromatic colors, suitable for a blog or content site.
      </p>
    </div>
    <div class="px-6 pt-4 pb-2">
      <span class="inline-block bg-gray-300 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#retro</span>
      <span class="inline-block bg-gray-300 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#monochromatic</span>
      <span class="inline-block bg-gray-300 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">#blog</span>
    </div>
    <div class="flex items-center px-6 py-4">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of Jonathan Reinink">
      <div class="text-sm">
        <p class="text-gray-900 dark:text-white leading-none">Jonathan Reinink</p>
        <p class="text-gray-600 dark:text-gray-400">Aug 14, 1988</p>
      </div>
    </div>
  </div>
</div>
```

OAuth Buttons Component

A complex web component for OAuth buttons styled with glassmorphism and earth tones, designed for business/corporate websites with responsiveness and dark mode support.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-800 dark:bg-gray-900 p-6">
  <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg backdrop-blur-md border border-opacity-10 border-gray-300 dark:border-gray-600 p-8 max-w-md w-full">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 text-center">Sign in with</h2>
    <div class="flex flex-col space-y-4">
      <a href="#" class="flex items-center justify-between bg-green-500 dark:bg-green-600 text-white rounded-lg py-3 px-4 shadow-md border border-transparent hover:bg-green-600 dark:hover:bg-green-500 transition duration-200 ease-in-out">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Google Avatar" />
        <span>Google</span>
        <svg class="w-6 h-6 text-white ml-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 12c0 1.104-.896 2-2 2s-2-.896-2-2 2-2 2-2 2 .896 2 2zm0 0c0 1.104 2 2 2 2s2-2 2-2-2-2-2-2-2 0-2 2zm0 0c0-1.104-1.896-2-2-2s-2 .896-2 2 2 2 2 2 1 0 2-2z" />
        </svg>
      </a>
      <a href="#" class="flex items-center justify-between bg-blue-600 dark:bg-blue-700 text-white rounded-lg py-3 px-4 shadow-md border border-transparent hover:bg-blue-700 dark:hover:bg-blue-600 transition duration-200 ease-in-out">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Facebook Avatar" />
        <span>Facebook</span>
        <svg class="w-6 h-6 text-white ml-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 2a2 2 0 00-2 2v2H9a2 2 0 00-2 2v6a2 2 0 002 2h7v8h2V14h3.586l.414-2H16V6a1 1 0 011-1h1a2 2 0 002-2z" />
        </svg>
      </a>
      <a href="#" class="flex items-center justify-between bg-red-600 dark:bg-red-700 text-white rounded-lg py-3 px-4 shadow-md border border-transparent hover:bg-red-700 dark:hover:bg-red-600 transition duration-200 ease-in-out">
        <img class="w-8 h-8 rounded-full mr-2" src="https://picsum.photos/200/200?random=3" alt="Twitter Avatar" />
        <span>Twitter</span>
        <svg class="w-6 h-6 text-white ml-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 19s-1 0-1-1 1-2 2-1 2-1 3 0 1 2-1 2-1-1-1-1zm1-1s2-1 3-2-3-9-1-7 5 6-1 5zm11-6s1-2-2-3-2 4-3 3 1 3 2 3 2-1 2-1 2 1 2-2z" />
        </svg>
      </a>
    </div>
  </div>
</div>

A User Mentions Component designed with a Glassmorphism style featuring frosted glass-like translucent elements with blur effects. It includes a dark theme support and is responsive, making it suitable for e-commerce websites.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gradient-to-b from-gray-800 to-gray-900">
    <div class="w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-filter backdrop-blur-md bg-opacity-30 dark:bg-opacity-30">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">User Mentions</h2>
        <div class="mt-4 space-y-4">
            <div class="flex items-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
                <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500">
                <div class="ml-3">
                    <p class="text-gray-800 dark:text-white font-medium">John Doe</p>
                    <p class="text-gray-600 dark:text-gray-300 text-sm">@john_doe</p>
                </div>
                <img src="https://picsum.photos/200/100" alt="Product Image" class="ml-auto rounded-lg shadow-lg w-16 h-16">
            </div>
            <div class="flex items-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
                <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-green-500">
                <div class="ml-3">
                    <p class="text-gray-800 dark:text-white font-medium">Jane Smith</p>
                    <p class="text-gray-600 dark:text-gray-300 text-sm">@jane_smith</p>
                </div>
                <img src="https://picsum.photos/200/101" alt="Product Image" class="ml-auto rounded-lg shadow-lg w-16 h-16">
            </div>
            <div class="flex items-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
                <img src="https://randomuser.me/api/portraits/men/13.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-red-500">
                <div class="ml-3">
                    <p class="text-gray-800 dark:text-white font-medium">Mike Johnson</p>
                    <p class="text-gray-600 dark:text-gray-300 text-sm">@mike_johnson</p>
                </div>
                <img src="https://picsum.photos/200/102" alt="Product Image" class="ml-auto rounded-lg shadow-lg w-16 h-16">
            </div>
        </div>
        <button class="mt-6 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-300 w-full">View More</button>
    </div>
</div>

Navigation Enhancement Component

A glassmorphism-inspired navigation component designed for showcasing portfolio work and products with earth tones and dark mode support. The component features a frosted glass effect, responsive design, and minimal elements.

Open Preview

                <nav class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg border-b border-gray-300 dark:border-gray-700 rounded-lg p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="flex items-center">
      <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
      <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">Portfolio</span>
    </div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Home</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Gallery</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">About</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Contact</a></li>
    </ul>
  </div>
</nav>

<section class="p-8 bg-gray-50 dark:bg-gray-900">
  <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">My Work</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg rounded-lg overflow-hidden shadow-lg">
      <img src="https://picsum.photos/400/300" alt="Project Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Project Title</h3>
        <p class="text-gray-700 dark:text-gray-300">Brief description of the project goes here. Showcasing work effectively.</p>
      </div>
    </div>
    <!-- Repeat similar divs for more projects -->
  </div>
</section>

Community Forum Component

A simple community forum component with a pastel color scheme, Material Design influences, and dark mode support. Features a responsive layout for blog/content consumption.

Open Preview

                <div class="container mx-auto p-4 md:p-8 font-sans"><div class="grid grid-cols-1 md:grid-cols-3 gap-6"><div class="md:col-span-2"><div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6"><h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Community Discussions</h2><div class="space-y-4"><div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4"><img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar"><div class="flex-1"><h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">How to use Tailwind CSS?</h3><p class="text-gray-500 dark:text-gray-400 text-sm">Posted by John Doe <span>&#8226;</span> 2 hours ago</p></div><span class="text-gray-600 dark:text-gray-400 text-sm">15 Replies</span></div><div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4"><img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar"><div class="flex-1"><h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Best practices for responsive design?</h3><p class="text-gray-500 dark:text-gray-400 text-sm">Posted by Jane Smith <span>&#8226;</span> 5 hours ago</p></div><span class="text-gray-600 dark:text-gray-400 text-sm">22 Replies</span></div><div class="flex items-center pb-4"><img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Avatar"><div class="flex-1"><h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Integrating dark mode with Tailwind</h3><p class="text-gray-500 dark:text-gray-400 text-sm">Posted by Peter Jones <span>&#8226;</span> 1 day ago</p></div><span class="text-gray-600 dark:text-gray-400 text-sm">8 Replies</span></div></div></div></div><div class="md:col-span-1"><div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6"><h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Popular Tags</h2><div class="flex flex-wrap gap-2"><span class="px-3 py-1 bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 text-sm font-semibold rounded-full">Tailwind CSS</span><span class="px-3 py-1 bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 text-sm font-semibold rounded-full">Responsive Design</span><span class="px-3 py-1 bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 text-sm font-semibold rounded-full">Dark Mode</span><span class="px-3 py-1 bg-purple-200 dark:bg-purple-700 text-purple-800 dark:text-purple-200 text-sm font-semibold rounded-full">Web Development</span></div></div></div></div></div>

Grayscale Loading Spinner

A simple loading spinner component with grayscale colors and microinteraction focus.

Open Preview

                <div class="flex items-center justify-center h-screen bg-white dark:bg-gray-900">
  <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-gray-900 dark:border-gray-100"></div>
</div>

1 ... 112 113 114 115 116 ... 242

Categories

All Components