Search Components

All Components

Browse all available Tailwind CSS components

E-commerce Header Component

A responsive e-commerce header component built using Tailwind CSS with Material Design principles. Features a monochromatic color scheme (shades of blue), search functionality, navigation menu, shopping cart, and user profile. The header includes depth effects like shadows and supports dark mode. The component is fully responsive with a mobile hamburger menu.

Open Preview

                <!-- E-commerce Header with Material Design and Monochromatic Color Scheme -->
<header class="bg-blue-50 dark:bg-blue-900 shadow-md transition-colors duration-300">
  <!-- Top Bar with announcements -->
  <div class="bg-blue-600 dark:bg-blue-800 text-white py-2 px-4 text-center text-sm">
    <p>Free shipping on orders over $50 | Use code WELCOME10 for 10% off your first order</p>
  </div>

  <!-- Main Header -->
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row items-center justify-between py-4">
      <!-- Logo -->
      <div class="flex items-center mb-4 md:mb-0">
        <a href="#" class="text-2xl font-bold text-blue-700 dark:text-blue-300">
          <span class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
            </svg>
            ShopMate
          </span>
        </a>
      </div>
      
      <!-- Mobile Menu Button -->
      <div class="md:hidden mb-4 w-full flex justify-end">
        <button class="mobile-menu-button p-2 rounded-md hover:bg-blue-100 dark:hover:bg-blue-700 transition duration-150 focus:outline-none">
          <svg class="h-6 w-6 text-blue-700 dark:text-blue-300" 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="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
      
      <!-- Search Bar -->
      <div class="w-full md:w-1/3 order-3 md:order-2 mb-4 md:mb-0">
        <div class="relative rounded-md shadow-sm">
          <input type="text" placeholder="Search products..." class="w-full pl-10 pr-4 py-2 rounded-md border border-blue-200 dark:border-blue-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 bg-white dark:bg-blue-800 dark:text-white transition-colors duration-300" />
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-blue-400 dark:text-blue-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
            </svg>
          </div>
        </div>
      </div>
      
      <!-- Right Menu Items -->
      <div class="flex items-center space-x-5 order-2 md:order-3">
        <!-- Theme Toggle -->
        <button class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
          <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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
          </svg>
        </button>
        
        <!-- Wishlist -->
        <a href="#" class="relative text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
          <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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
        </a>
        
        <!-- Shopping Cart -->
        <a href="#" class="relative text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
          <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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
          </svg>
          <span class="absolute -top-2 -right-2 w-5 h-5 text-xs bg-blue-500 dark:bg-blue-400 text-white rounded-full flex items-center justify-center">3</span>
        </a>
        
        <!-- User Account -->
        <a href="#" class="flex items-center text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 transition-colors duration-300">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User profile" class="w-8 h-8 rounded-full border-2 border-blue-300 dark:border-blue-600 shadow-sm" />
        </a>
      </div>
    </div>
    
    <!-- Navigation Menu -->
    <nav class="hidden md:block border-t border-blue-100 dark:border-blue-700 py-4 transition-colors duration-300">
      <ul class="flex flex-wrap justify-center space-x-8">
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Home</a></li>
        <li class="group relative">
          <a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300 flex items-center">
            Women
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
          </a>
        </li>
        <li class="group relative">
          <a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300 flex items-center">
            Men
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
          </a>
        </li>
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Kids</a></li>
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Accessories</a></li>
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Sale</a></li>
        <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">New Arrivals</a></li>
      </ul>
    </nav>
    
    <!-- Mobile Navigation Menu (Hidden by default) -->
    <nav class="mobile-menu hidden md:hidden border-t border-blue-100 dark:border-blue-700 py-4 transition-colors duration-300">
      <ul class="flex flex-col space-y-4 px-2">
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Home</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Women</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Men</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Kids</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Accessories</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">Sale</a></li>
        <li><a href="#" class="block text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 font-medium transition-colors duration-300">New Arrivals</a></li>
      </ul>
    </nav>
  </div>
</header>

Session Timeout Alert

A simple, dark mode session timeout alert component for e-commerce sites, designed with pastel colors and responsiveness using TailwindCSS.

Open Preview

                <div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center p-4">
  <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl max-w-sm w-full border border-pink-300">
    <h3 class="text-lg font-bold text-pink-200 mb-4">Session expiring soon!</h3>
    <p class="text-gray-300 text-sm mb-4">Your session will time out in 60 seconds. Please save your work or extend your session.</p>
    <div class="flex justify-end space-x-2">
      <button class="px-4 py-2 bg-gray-700 dark:bg-gray-800 text-gray-200 rounded hover:bg-gray-600 dark:hover:bg-gray-700 text-sm transition duration-300">Cancel</button>
      <button class="px-4 py-2 bg-pink-500 text-white rounded hover:bg-pink-600 text-sm transition duration-300">Extend Session</button>
    </div>
  </div>
</div>

Grayscale Skeuomorphic Sticky Nav

A responsive sticky navigation bar for blogs, styled with skeuomorphism using a grayscale palette. Features dark mode support and a simple layout. Built with Tailwind CSS (HTML only), no JavaScript. The skeuomorphic design aims to make the navigation bar appear like a physical, slightly raised element.

Open Preview

                <nav class="sticky top-0 z-50 bg-gray-200 dark:bg-gray-800 border-b border-gray-300 dark:border-gray-700 shadow-[0_1px_0px_rgba(255,255,255,0.3)_inset,_0_1px_2px_rgba(0,0,0,0.2)] dark:shadow-[0_1px_0px_rgba(255,255,255,0.04)_inset,_0_1px_2px_rgba(0,0,0,0.5)]">
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="text-xl font-semibold text-gray-800 dark:text-gray-100 hover:text-black dark:hover:text-white transition-colors duration-150">
          MySkeuoBlog
        </a>
      </div>

      <!-- Desktop Navigation Links -->
      <div class="hidden sm:flex sm:items-center sm:space-x-3 md:space-x-5">
        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-70 hover:text-gray-900 dark:hover:text-white transition-all duration-150 ease-in-out">
          Home
        </a>
        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-70 hover:text-gray-900 dark:hover:text-white transition-all duration-150 ease-in-out">
          Articles
        </a>
        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-70 hover:text-gray-900 dark:hover:text-white transition-all duration-150 ease-in-out">
          Categories
        </a>
        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-70 hover:text-gray-900 dark:hover:text-white transition-all duration-150 ease-in-out">
          About
        </a>
      </div>

      <!-- Mobile menu button (decorative as no JS for toggle) -->
      <div class="sm:hidden flex items-center">
        <button type="button" class="p-2 rounded-md text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 dark:focus:ring-gray-600" aria-label="Main menu" aria-expanded="false">
          <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

Example

desc

Open Preview

Wishlist Component

A 3D-styled wishlist component for social media interfaces, featuring interactive elements and dark mode support.

Open Preview

                <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105">
    <div class="p-4">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Wishlist Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the wishlist item or purpose goes here.</p>
            </div>
        </div>
    </div>
    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
            <div class="flex items-center justify-between">
                <p class="text-gray-800 dark:text-gray-200">Item 1 - Description</p>
                <img src="https://picsum.photos/50/50?image=10" alt="Item Image" class="w-12 h-12 rounded-lg shadow-md">
            </div>
        </li>
        <li class="p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
            <div class="flex items-center justify-between">
                <p class="text-gray-800 dark:text-gray-200">Item 2 - Description</p>
                <img src="https://picsum.photos/50/50?image=20" alt="Item Image" class="w-12 h-12 rounded-lg shadow-md">
            </div>
        </li>
        <li class="p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
            <div class="flex items-center justify-between">
                <p class="text-gray-800 dark:text-gray-200">Item 3 - Description</p>
                <img src="https://picsum.photos/50/50?image=30" alt="Item Image" class="w-12 h-12 rounded-lg shadow-md">
            </div>
        </li>
    </ul>
    <div class="p-4">
        <button class="w-full bg-blue-600 dark:bg-blue-500 text-white rounded-lg py-2 hover:bg-blue-700 dark:hover:bg-blue-400 transition-colors">Share Wishlist</button>
    </div>
</div>

Skeuomorphic Header Component

A simple and responsive header component designed for e-commerce websites with a skeuomorphic style, using a grayscale color scheme and supporting dark mode.

Open Preview

                <header class="bg-white dark:bg-gray-800 shadow-lg border-b border-gray-300 dark:border-gray-700 p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-md">
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">ShopName</h1>
        </div>
        <nav class="flex space-x-4">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Home</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Products</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">About Us</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Contact</a>
        </nav>
        <div class="relative">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full shadow-md">
            <span class="absolute top-0 right-0 bg-red-500 rounded-full h-2 w-2 border-2 border-white dark:border-gray-800"></span>
        </div>
    </div>
</header>

Skip to Content Link

A Skip to Content Link Component with Neumorphism design style, a triadic color scheme, and a complex layout for blog and content websites. It includes responsive design and dark mode support using Tailwind CSS.

Open Preview

                <a href="#content" class="skip-to-content-link">
  Skip to Content
</a>

<style>
  .skip-to-content-link {
    position: absolute;
    top: -40px;
    left: 0;
    background-color: #5a8f7b; /* One color from a triadic scheme */
    color: #e0f7fa; /* Another color from a triadic scheme */
    padding: 8px 12px;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
    /* Neumorphism styles */
    border-radius: 10px;
    box-shadow: 7px 7px 15px rgba(50, 50, 50, 0.2), -7px -7px 15px rgba(255, 255, 255, 0.7);
  }

  .skip-to-content-link:focus {
    top: 10px;
    /* Neumorphism inset effect on focus */
    box-shadow: inset 5px 5px 10px rgba(50, 50, 50, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.7);
  }

  /* Dark mode styles */
  .dark .skip-to-content-link {
    background-color: #2c5f2d; /* Darker shade of the triadic color */
    color: #b2ebf2; /* Lighter shade of the triadic color */
    box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.5), -7px -7px 15px rgba(70, 70, 70, 0.7);
  }

  .dark .skip-to-content-link:focus {
     box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(70, 70, 70, 0.7);
  }

  @media (max-width: 768px) {
    .skip-to-content-link {
      padding: 6px 10px;
    }
  }
</style>

Skip to Content Link Component

A visually engaging 3D-style Skip to Content link that helps users bypass navigation menus on a social media interface. The component uses a complementary color scheme (blue and orange) with a 3D effect achieved through shadows and transforms. Features responsive design and dark theme support. The link appears fixed at the top left of the viewport when focused or active, making it easily accessible for keyboard navigation while remaining unobtrusive when not in use.

Open Preview

                <!-- Skip to Content Component with 3D Design -->
<div class="relative z-50">
  <!-- Skip link - hidden by default but visible on focus -->
  <a href="#main-content" 
     class="fixed top-4 left-4 transform -translate-y-20 focus:translate-y-0 transition-transform duration-200 ease-in-out
            p-3 rounded-lg
            text-white font-bold
            bg-blue-600 hover:bg-blue-700
            dark:bg-orange-500 dark:hover:bg-orange-600
            focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-blue-400
            shadow-[0.5rem_0.5rem_0px_0px_rgba(237,137,54,0.8)] dark:shadow-[0.5rem_0.5rem_0px_0px_rgba(37,99,235,0.8)]
            transform-gpu hover:translate-y-1 hover:translate-x-1 hover:shadow-[0.3rem_0.3rem_0px_0px_rgba(237,137,54,0.8)] dark:hover:shadow-[0.3rem_0.3rem_0px_0px_rgba(37,99,235,0.8)]
            text-sm md:text-base">
    Skip to Content
  </a>
</div>

<!-- Simulated content for demonstration purposes -->
<header class="w-full bg-gray-100 dark:bg-gray-800 p-4">
  <nav class="flex justify-between items-center">
    <div class="text-blue-600 dark:text-orange-500 font-bold text-xl">SocialApp</div>
    <div class="space-x-4">
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-orange-500">Home</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-orange-500">Profile</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-orange-500">Messages</a>
    </div>
  </nav>
</header>

<!-- Main content that will be skipped to -->
<main id="main-content" class="container mx-auto p-4 mt-4">
  <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Your Feed</h1>
  
  <!-- Sample social media post -->
  <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md mb-4">
    <div class="flex items-center mb-3">
      <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-semibold text-gray-900 dark:text-white">Jane Smith</p>
        <p class="text-xs text-gray-500 dark:text-gray-400">Posted 2 hours ago</p>
      </div>
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-3">Just discovered this amazing 3D design technique! #design #creativity</p>
    <img src="https://picsum.photos/seed/picsum1/600/400" alt="Post image" class="w-full h-64 object-cover rounded-lg mb-3">
    <div class="flex space-x-4">
      <button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-orange-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
        </svg>
        Like
      </button>
      <button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-orange-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
        </svg>
        Comment
      </button>
      <button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-orange-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
        </svg>
        Share
      </button>
    </div>
  </div>
  
  <!-- More content to make skipping meaningful -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
      <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Suggested Friends</h2>
      <div class="space-y-3">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/men/54.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3">
          <div class="flex-1">
            <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
          </div>
          <button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 dark:bg-orange-500 dark:hover:bg-orange-600 text-white rounded-full text-sm">Follow</button>
        </div>
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3">
          <div class="flex-1">
            <p class="font-semibold text-gray-800 dark:text-gray-200">Sarah Williams</p>
          </div>
          <button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 dark:bg-orange-500 dark:hover:bg-orange-600 text-white rounded-full text-sm">Follow</button>
        </div>
      </div>
    </div>
    
    <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
      <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Trending Topics</h2>
      <div class="space-y-2">
        <div class="text-blue-600 dark:text-orange-500 hover:underline">#3DDesign</div>
        <div class="text-blue-600 dark:text-orange-500 hover:underline">#TailwindCSS</div>
        <div class="text-blue-600 dark:text-orange-500 hover:underline">#WebAccessibility</div>
        <div class="text-blue-600 dark:text-orange-500 hover:underline">#ResponsiveDesign</div>
      </div>
    </div>
  </div>
</main>

Footer Navigation Component

A responsive Footer Navigation component designed with a skeuomorphic style, featuring interactive elements suitable for e-commerce. It follows a triadic color scheme and supports dark mode.

Open Preview

                <footer class="bg-gray-100 dark:bg-gray-900 p-4 shadow-lg rounded-lg">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="flex items-center mb-4 md:mb-0">
            <img src="https://picsum.photos/50" alt="Logo" class="rounded-full mr-2">
            <h2 class="text-xl font-semibold dark:text-white">Shop Logo</h2>
        </div>
        <nav class="flex flex-col md:flex-row text-gray-600 dark:text-gray-300">
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">Home</a>
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">Products</a>
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">About Us</a>
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">Contact</a>
        </nav>
    </div>
    <div class="mt-4 text-center text-gray-600 dark:text-gray-300">
        <p>&copy; 2023 E-Commerce. All rights reserved.</p>
    </div>
</footer>

Media Embed Component

A Neumorphism styled media embed component suitable for blog and content consumption, featuring a triadic color scheme. Responsive design with dark mode support.

Open Preview

                <div class="flex items-center justify-center p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">
    <div class="flex flex-col bg-white dark:bg-gray-900 rounded-lg p-4 shadow-lg">
        <img src="https://picsum.photos/400/200" alt="Media Image" class="rounded-md mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Media Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the media content to provide context to the readers.</p>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <span class="text-gray-700 dark:text-gray-300">Author Name</span>
        </div>
    </div>
</div>

1 ... 165 166 167 168 169 ... 335