Search Components

All Components

Browse all available Tailwind CSS components

Real Estate Gallery Component

A responsive and professional gallery component for real estate listings, featuring a clean layout, pastel color scheme, and full dark mode support. Includes property cards with details, a filter/sort section, and a clear call to action.

Open Preview

                <div class="bg-blue-50 dark:bg-gray-900 py-8 lg:py-12">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-8 lg:mb-12">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-200 mb-4">Premium Property Listings</h2>
      <p class="text-lg text-blue-700 dark:text-blue-300 max-w-2xl mx-auto">Explore our wide selection of exquisite properties, meticulously curated to meet your highest standards.</p>
    </div>

    <!-- Filters & Sort -->
    <div class="flex flex-col sm:flex-row items-center justify-between mb-8 space-y-4 sm:space-y-0 sm:space-x-4">
      <div class="relative w-full sm:w-auto">
        <select class="block appearance-none w-full bg-white dark:bg-gray-800 border border-blue-200 dark:border-gray-700 text-blue-700 dark:text-blue-300 py-3 px-4 pr-8 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
          <option>All Locations</option>
          <option>New York</option>
          <option>Los Angeles</option>
          <option>Chicago</option>
          <option>Houston</option>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-blue-700 dark:text-blue-300">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
        </div>
      </div>
      <div class="relative w-full sm:w-auto">
        <select class="block appearance-none w-full bg-white dark:bg-gray-800 border border-blue-200 dark:border-gray-700 text-blue-700 dark:text-blue-300 py-3 px-4 pr-8 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
          <option>All Types</option>
          <option>House</option>
          <option>Apartment</option>
          <option>Condo</option>
          <option>Land</option>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-blue-700 dark:text-blue-300">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"/></svg>
        </div>
      </div>
      <div class="relative w-full sm:w-auto">
        <select class="block appearance-none w-full bg-white dark:bg-gray-800 border border-blue-200 dark:border-gray-700 text-blue-700 dark:text-blue-300 py-3 px-4 pr-8 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
          <option>Sort by: Newest</option>
          <option>Sort by: Price (Low to High)</option>
          <option>Sort by: Price (High to Low)</option>
          <option>Sort by: Popularity</option>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-blue-700 dark:text-blue-300">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
        </div>
      </div>
    </div>

    <!-- Property Grid -->
    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

      <!-- Property Card 1 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/10/400/300" alt="Modern Home" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Spacious Family Home</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>123 Grand Ave, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 4 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 3 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 2400 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$750,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 2 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/20/400/300" alt="Luxury Apartment" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Downtown Loft Apartment</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>456 High St, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 2 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 2 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 1100 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$480,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 3 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/30/400/300" alt="Suburban House" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Charming Suburban Home</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>789 Oak Ln, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 3 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 2 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 1800 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$595,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 4 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/40/400/300" alt="Waterfront Villa" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Stunning Waterfront Villa</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>101 Bay View, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 5 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 4 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 3200 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$1,200,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 5 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/50/400/300" alt="Cozy Condo" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Cozy City Center Condo</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>202 Metro Blvd, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 1 Bed</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 1 Bath</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 750 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$320,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 6 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/60/400/300" alt="Rural Estate" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Expansive Rural Estate</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>303 Country Rd, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 6 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 5 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 4500 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$1,800,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 7 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/70/400/300" alt="Newly Built" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Brand New Modern Build</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>404 Innovation Dr, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 4 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 3 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 2800 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$890,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 8 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/80/400/300" alt="Renovated Charm" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Historic Fully Renovated</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>505 Heritage Pkwy, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 3 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 2 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 1600 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$620,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

    </div>

    <!-- Pagination (optional, but good for complex components) -->
    <div class="flex justify-center mt-10">
      <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
          <span class="sr-only">Previous</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-current="page" class="z-10 bg-blue-100 dark:bg-blue-700 border-blue-500 text-blue-600 dark:text-blue-100 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
          1
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
          2
        </a>
        <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
          3
        </a>
        <span class="relative inline-flex items-center px-4 py-2 border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300">
          ...
        </span>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
          10
        </a>
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
          <span class="sr-only">Next</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
      </nav>
    </div>

  </div>
</div>

<!-- Font Awesome for icons (optional, but used in the example) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Social Share Buttons Component

A responsive and minimalist social share buttons component designed with a Swiss/International Typography style, using a grayscale color scheme. It's suitable for job boards or career development platforms, offering clean sharing options for various social media platforms.

Open Preview

                <div class="font-sans bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 rounded-lg shadow-lg max-w-sm mx-auto transition-colors duration-300">
  <h2 class="text-xl sm:text-2xl font-bold mb-4 text-center tracking-tight">Share Job Opportunity</h2>
  <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 mb-6 text-center leading-relaxed">Help others discover this exciting role. Share it with your network!</p>
  
  <div class="grid grid-cols-2 lg:grid-cols-3 gap-3">

    <!-- LinkedIn -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
      <svg class="h-5 w-5 mr-2 text-blue-700 dark:text-blue-500 group-hover:text-blue-800 dark:group-hover:text-blue-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zM.02 24h4.96V8.12H.02V24zM9.01 7.9H13.9C13.9 7.9 14.18 7.55 14.07 6.45C13.94 4.09 11.45 3.5 10.63 3.5C8.83 3.5 7.14 4.41 7.01 7.9L9.01 7.9C9.01 7.9 9.01 7.9 9.01 7.9zM7.05 9.9H9.01V24H7.05V9.9zM19.01 7.9H24.01V24H19.01V7.9zM19.01 7.9C19.01 7.9 19.38 7.01 19.74 6.78C20.61 6.13 21.41 6.09 21.84 6.09C22.28 6.09 23.36 6.09 23.36 6.09V3.5h-5.18C17.72 3.5 14.7 3.5 13.9 3.5C13.06 3.5 11.41 3.73 10.74 4.88C10.05 6.03 10.01 7.9 10.01 7.9H19.01V7.9z"/>
      </svg>
      <span class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-50">LinkedIn</span>
    </a>

    <!-- Twitter/X -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
      <svg class="h-5 w-5 mr-2 text-gray-600 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21F10 16.92V11.25L4.47 2.25H1.5L9.303 12.875L1.07 21.75H8.9L14.542 13.625l5.666 8.125h3.407L16.2 8.725L18.244 2.25h-0.001zm-0.403 1.344l-5.632 6.745l-3.326-6.745H2.8l7.545 10.79L2.534 21.75h3.385l5.63-6.745l3.326 6.745h6.635l-7.547-10.79L21.196 2.25h-2.95z"/>
      </svg>
      <span class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-50">Twitter/X</span>
    </a>

    <!-- Facebook -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
      <svg class="h-5 w-5 mr-2 text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M15.42 16.9v-2.31h2.51l.39-2.78H15.42V9.69c0-.66.2-1.12 1.15-1.12h1.22V5.41s-1.1-.19-2.16-.19c-2.2 0-3.6 1.34-3.6 3.73v2.09h-2.45v2.78h2.45V24h5.02V16.9h-1.9zM12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24z"/>
      </svg>
      <span class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-50">Facebook</span>
    </a>

    <!-- Email -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
      <svg class="h-5 w-5 mr-2 text-gray-600 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
      </svg>
      <span class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-50">Email</span>
    </a>

    <!-- WhatsApp (on mobile/tablet) -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 col-span-2 lg:col-span-1">
      <svg class="h-5 w-5 mr-2 text-green-600 dark:text-green-400 group-hover:text-green-700 dark:group-hover:text-green-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12.04 2C7.34 2 3.58 5.76 3.58 10.46c0 1.5.4 2.94 1.16 4.22L3 21l6.3-1.65a8.48 8.48 0 005.14 1.83c4.7 0 8.46-3.76 8.46-8.46S16.74 2 12.04 2zM17.2 15.6c-.19.3-.74.6-1.04.6-.29 0-.58-.1-.85-.3L14.2 14.7c-.24-.13-1.47-.7-1.7-.85-.23-.15-.4-.2-.58.2-.18.4-.7.8-.85.96-.15.15-.3.2-.5.2-.2 0-.38-.07-.5-.15-.17-.11-.74-.27-.9-.45-.15-.15-.36-.45-.5-.7-.14-.23-.05-.4-.05-.6 0-.2.15-.3.2-.38.05-.08.1-.15.2-.2.1-.08.2-.15.3-.2.08-.06.12-.1.17-.18.06-.08.12-.2.17-.28.05-.08.1-.17.15-.25.04-.08.06-.13.06-.2 0-.05-.02-.1-.04-.13-.02-.03-.1-.08-.18-.17-.08-.1-.13-.15-.2-.2-.07-.07-.15-.1-.23-.17-.08-.07-.17-.15-.25-.23-.08-.08-.15-.15-.23-.2-.07-.06-.05-.1-.05-.17 0-.08-.0-.14.1-.2.2-.23.47-.5.7-.7.2-.2.4-.3.6-.5.2-.2.37-.3.5-.4-.1.1-.2.2-.3.3-.2.2-.4.3-.6.5-.2.2-.2.3-.2.5 0 .2.1.4.1.4.1.2.2.3.4.5.2.2.3.2.4.2.2 0 .4-.07.6-.07.2 0 .3-.1.4-.2.1-.06.15-.1.2-.1.2-.1.4-.2.6-.3.2-.1.3-.2.4-.2.2-.07.3-.1.4-.1.2 0 .4.07.6.07.2 0 .4.03.6.07.2.1.4.2.5.3.1.06.2.1.2.1.15.1.2.16.2.2.06.07.2.17.2.3.06.1.1.2.17.3l.05.08c.1.2.1.4.1.6 0 .2-.06.4-.13.6-.07.2-.16.4-.25.5-.09.2-.17.3-.28.4l-.08.05c-.1.08-.2.15-.3.2-.1.1-.2.15-.3.2-.2.1-.4.2-.6.3-.2.1-.3.2-.5.3-.2.1-.4.2-.6.2-.2 0-.4.02-.6.02-.27 0-.5-.03-.7-.1.0-.08 0-.15 0-.23z"/>
      </svg>
      <span class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-50">WhatsApp</span>
    </a>

    <!-- Copy URL -->
    <button aria-label="Copy link to clipboard" class="flex items-center justify-center p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 col-span-2 lg:col-span-3" onclick="navigator.clipboard.writeText('https://your-job-link.com/job-id').then(function() { alert('Link copied to clipboard!'); });">
      <svg class="h-5 w-5 mr-2 text-gray-600 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
      </svg>
      <span class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-50">Copy Link</span>
    </button>

  </div>
</div>

ArtDeco_JobCard

A simple, responsive job card component with an Art Deco design aesthetic, muted retro colors, and dark mode support, suitable for job boards or career platforms.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-zinc-950 min-h-screen font-serif flex items-center justify-center">
  <div class="w-full max-w-md bg-gradient-to-br from-amber-100 to-yellow-200 dark:from-zinc-800 dark:to-zinc-900 shadow-xl rounded-lg overflow-hidden border-2 border-amber-300 dark:border-zinc-700 relative transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
    <!-- Geometric top border/pattern -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-gradient-to-r from-amber-400 via-yellow-500 to-orange-400 dark:from-zinc-700 dark:via-zinc-600 dark:to-zinc-700 flex justify-between items-center px-2">
      <div class="w-2 h-2 bg-white dark:bg-gray-400 transform rotate-45"></div>
      <div class="w-2 h-2 bg-white dark:bg-gray-400 transform rotate-45"></div>
      <div class="w-2 h-2 bg-white dark:bg-gray-400 transform rotate-45"></div>
    </div>
    
    <div class="p-6 pt-10 sm:p-8 sm:pt-12 relative">
      <!-- Company Logo & Title -->
      <div class="flex items-center mb-4 sm:mb-6">
        <img src="https://picsum.photos/60/60?random=1" alt="Company Logo" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-amber-500 dark:border-zinc-600 shadow-md flex-shrink-0">
        <div class="ml-4">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-wide">Elegant Solutions LLC</h3>
          <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300">Innovating the Future</p>
        </div>
      </div>

      <!-- Job Title -->
      <h2 class="text-2xl sm:text-3xl font-extrabold text-orange-700 dark:text-orange-300 mb-4 tracking-tight leading-tight">
        Senior UI/UX Designer
      </h2>

      <!-- Job Details Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-3 gap-x-6 text-sm sm:text-base mb-6 text-gray-700 dark:text-gray-200">
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-amber-600 dark:text-amber-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
          </svg>
          New York, NY (Remote-friendly)
        </div>
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-amber-600 dark:text-amber-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.549l-.079.079a49.356 49.356 0 01-1.638 1.187.7.7 0 00-.05.088c-.2.32-.455.653-.746.939-.466.45-.873.862-1.228 1.207-.63.605-1.125 1.103-1.477 1.439L14 16h-3.484c-.078.077-.162.147-.25.21V4.283a2 2 0 01-.064-.094l-.105-.147-.09-.126a1.996 1.996 0 01-.035-.045L9 3V2a1 1 0 00-1-1h-.5C6.723 1 6 1.723 6 2.5V3a1 1 0 00-1 1v1H3a1 1 0 00-1 1v2a1 1 0 001 1h16a1 1 0 001-1V8a1 1 0 00-1-1zm6 0h-2V5a1 1 0 011-1h0a1 1 0 011 1v1z" clip-rule="evenodd" />
          </svg>
          Full-time
        </div>
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-amber-600 dark:text-amber-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 002-2V4H4zm10 12a2 2 0 002-2v-4a2 2 0 00-2-2H4a2 2 0 00-2 2v4a2 2 0 002 2h10z" clip-rule="evenodd" />
          </svg>
          $90k - $120k / year
        </div>
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-amber-600 dark:text-amber-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd" />
          </svg>
          Posted 2 days ago
        </div>
      </div>

      <!-- Call to Action Button -->
      <div class="text-center">
        <button class="px-8 py-3 bg-amber-600 hover:bg-amber-700 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-bold rounded-full shadow-md tracking-wider transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-orange-500">
          Apply Now
        </button>
      </div>
    </div>

    <!-- Art Deco bottom pattern/footer -->
    <div class="bg-gradient-to-r from-amber-400 via-yellow-500 to-orange-400 dark:from-zinc-700 dark:via-zinc-600 dark:to-zinc-700 h-4 absolute bottom-0 left-0 right-0 flex justify-between items-center px-2">
      <div class="w-2 h-2 bg-white dark:bg-gray-400 transform rotate-45"></div>
      <div class="w-2 h-2 bg-white dark:bg-gray-400 transform rotate-45"></div>
      <div class="w-2 h-2 bg-white dark:bg-gray-400 transform rotate-45"></div>
    </div>
  </div>
</div>

Corporate_Professional_Contact_Form

A clean, professional, and responsive contact form component designed with a forest/green palette, suitable for corporate or portfolio websites. Includes dark mode support and modern design features.

Open Preview

                <section class="py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-green-50 to-green-100 dark:from-gray-950 dark:to-gray-900 font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 md:p-12 border border-green-200 dark:border-gray-700">
    <div class="text-center mb-10">
      <h2 class="text-4xl font-extrabold text-green-800 dark:text-green-300 mb-4 tracking-tight leading-tight">
        Get in Touch
      </h2>
      <p class="text-lg text-green-700 dark:text-gray-400 max-w-2xl mx-auto">
        We'd love to hear from you. Whether you have a project in mind, a question, or just want to say hi, fill out the form below.
      </p>
    </div>

    <form class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div>
        <label for="first-name" class="block text-sm font-medium text-green-700 dark:text-gray-300 mb-1">First Name</label>
        <input type="text" id="first-name" name="first-name" autocomplete="given-name" placeholder="John" class="block w-full px-4 py-3 border border-green-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 bg-green-50 dark:bg-gray-700 text-green-900 dark:text-white placeholder-green-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
      </div>
      <div>
        <label for="last-name" class="block text-sm font-medium text-green-700 dark:text-gray-300 mb-1">Last Name</label>
        <input type="text" id="last-name" name="last-name" autocomplete="family-name" placeholder="Doe" class="block w-full px-4 py-3 border border-green-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 bg-green-50 dark:bg-gray-700 text-green-900 dark:text-white placeholder-green-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
      </div>
      <div class="md:col-span-2">
        <label for="email" class="block text-sm font-medium text-green-700 dark:text-gray-300 mb-1">Email Address</label>
        <input type="email" id="email" name="email" autocomplete="email" placeholder="[email protected]" class="block w-full px-4 py-3 border border-green-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 bg-green-50 dark:bg-gray-700 text-green-900 dark:text-white placeholder-green-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
      </div>
      <div class="md:col-span-2">
        <label for="phone" class="block text-sm font-medium text-green-700 dark:text-gray-300 mb-1">Phone Number (Optional)</label>
        <input type="tel" id="phone" name="phone" autocomplete="tel" placeholder="+1 (555) 123-4567" class="block w-full px-4 py-3 border border-green-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 bg-green-50 dark:bg-gray-700 text-green-900 dark:text-white placeholder-green-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
      </div>
      <div class="md:col-span-2">
        <label for="subject" class="block text-sm font-medium text-green-700 dark:text-gray-300 mb-1">Subject</label>
        <input type="text" id="subject" name="subject" placeholder="Project Inquiry" class="block w-full px-4 py-3 border border-green-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 bg-green-50 dark:bg-gray-700 text-green-900 dark:text-white placeholder-green-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
      </div>
      <div class="md:col-span-2">
        <label for="message" class="block text-sm font-medium text-green-700 dark:text-gray-300 mb-1">How can we help you?</label>
        <textarea id="message" name="message" rows="6" placeholder="Tell us about your project, your needs, or any questions you have..." class="block w-full px-4 py-3 border border-green-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 bg-green-50 dark:bg-gray-700 text-green-900 dark:text-white placeholder-green-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base"></textarea>
      </div>
      <div class="md:col-span-2 flex items-center">
        <input id="terms-and-privacy" name="terms-and-privacy" type="checkbox" class="h-4 w-4 text-green-600 dark:text-green-400 focus:ring-green-500 border-green-300 dark:border-gray-600 rounded">
        <label for="terms-and-privacy" class="ml-2 block text-sm text-green-700 dark:text-gray-400">
          By submitting, you agree to our
          <a href="#" class="text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-medium">Privacy Policy</a>.
        </label>
      </div>
      <div class="md:col-span-2 flex justify-end">
        <button type="submit" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-green-700 hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-500 transition duration-200 ease-in-out transform hover:-translate-y-0.5">
          Send Message
          <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </form>
  </div>
</section>

Bauhaus Wishlist Component

A simple, responsive wishlist component for fashion/beauty products designed with Bauhaus principles, featuring cool neutral colors and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 sm:mb-8 text-center uppercase tracking-wider">
      My Wishlist
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">

      <!-- Wishlist Item 1 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-sm shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
        <button class="absolute top-3 right-3 text-red-500 dark:text-red-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-200" aria-label="Remove item from wishlist">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 fill-current" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        <a href="#" class="block">
          <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
          <div class="p-4 text-center">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1 line-clamp-1">Minimalist Blue Dress</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Fashion Apparel</p>
            <p class="text-xl font-bold text-gray-900 dark:text-gray-50">$89.00</p>
          </div>
        </a>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-sm shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
        <button class="absolute top-3 right-3 text-red-500 dark:text-red-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-200" aria-label="Remove item from wishlist">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 fill-current" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        <a href="#" class="block">
          <img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
          <div class="p-4 text-center">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1 line-clamp-1">Geometric Earrings</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Jewelry</p>
            <p class="text-xl font-bold text-gray-900 dark:text-gray-50">$35.00</p>
          </div>
        </a>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-sm shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
        <button class="absolute top-3 right-3 text-red-500 dark:text-red-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-200" aria-label="Remove item from wishlist">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 fill-current" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        <a href="#" class="block">
          <img src="https://picsum.photos/400/300?random=3" alt="Product Image" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
          <div class="p-4 text-center">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1 line-clamp-1">Bauhaus Inspired Skirt</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Fashion Apparel</p>
            <p class="text-xl font-bold text-gray-900 dark:text-gray-50">$75.00</p>
          </div>
        </a>
      </div>

      <!-- Wishlist Item 4 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-sm shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
        <button class="absolute top-3 right-3 text-red-500 dark:text-red-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-200" aria-label="Remove item from wishlist">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 fill-current" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        <a href="#" class="block">
          <img src="https://picsum.photos/400/300?random=4" alt="Product Image" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
          <div class="p-4 text-center">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1 line-clamp-1">Abstract Print Scarf</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Accessories</p>
            <p class="text-xl font-bold text-gray-900 dark:text-gray-50">$29.00</p>
          </div>
        </a>
      </div>

    </div>

    <!-- Empty State / Call to Action -->
    <div class="mt-12 text-center">
      <p class="text-gray-600 dark:text-gray-400 text-lg mb-4">Ready to add more beauty to your life? Explore our collections!</p>
      <a href="#" class="inline-block px-8 py-3 bg-gray-800 hover:bg-gray-900 dark:bg-gray-100 dark:hover:bg-gray-200 text-white dark:text-gray-900 font-bold uppercase tracking-wide text-sm rounded-sm transition-colors duration-300 ease-in-out shadow-lg">
        Shop Now
      </a>
    </div>
  </div>
</div>

Social Login Component

A social login component with an industrial, raw-material aesthetic using cool neutral colors, suitable for booking and reservation systems. It features social login buttons and a separator with a manual login option, all responsive and with dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen px-4 py-8 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="w-full max-w-md p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 transform skew-y-1 -skew-x-1 sm:skew-y-0 sm:skew-x-0 relative overflow-hidden">
    <!-- Decorative metal plate effect -->
    <div class="absolute inset-0 bg-gradient-to-br from-gray-200 via-gray-300 dark:from-gray-700 dark:via-gray-600 to-gray-400 dark:to-gray-500 opacity-20 dark:opacity-10 transform -skew-y-6 skew-x-3 scale-125 pointer-events-none"></div>
    <div class="absolute inset-0 bg-gray-50 dark:bg-gray-800 opacity-70"></div>
    <div class="absolute z-10 p-6 sm:p-8 w-full h-full inset-0 flex flex-col justify-center">

      <h2 class="text-3xl sm:text-4xl font-extrabold text-center text-gray-800 dark:text-gray-100 mb-6 uppercase tracking-wider leading-tight animate-fade-in-down">
        Secure Your Spot
      </h2>
      <p class="text-center text-gray-600 dark:text-gray-300 mb-8 max-w-sm mx-auto animate-fade-in-up">
        Login or create an account to book your next reservation.
      </p>

      <div class="space-y-4 mb-8">
        <button class="w-full flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 active:scale-95 animate-slide-in-left">
          <svg class="h-5 w-5 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.447 18.064c-1.393-.243-2.613-.67-3.957-1.127a7.25 7.25 0 01-1.39-1.258c-.3-.263-.5-.487-.717-.743L12 9.043l-1.09.917c-.207.173-.41.343-.607.507-.22.18-.46.363-.733.543-.59.38-1.27.757-2.03.957-.497.123-.97.23-1.42.31l-.22.04v-2.73c.48-.073.96-.18 1.41-.31.75-.24 1.4-.57 1.9-.93.5-.36.9-.76 1.15-1.1s.4-1.04.4-1.3l.01-.01v-.01c0-.18.02-.37.05-.57l.01-.01c.04-.26.07-.48.07-.58v-.01h-.01c-.01-.01-.32-.23-.62-.48l-.01-.01c-.13-.1-.28-.2-.42-.3-.22-.16-.45-.3-.7-.41l-.01-.01c-.16-.08-.34-.14-.52-.19-.18-.05-.36-.08-.55-.08h-.01c-.15 0-.28 0-.41.01l-.01.01h-.01c-.12 0-.25.01-.38.01l-.01.01h-.01c-.26-.06-.52-.12-.78-.18l-.01-.01H3.6c-1.897 0-3.447 1.55-3.447 3.447v1.8c0 1.897 1.55 3.447 3.447 3.447h2.093c.27 0 .54-.01.81-.02l-.01-.01c.21-.02.42-.04.62-.07l-.01-.01c.21-.03.42-.06.63-.1l.01-.01c.19-.03.38-.07.57-.1l.01-.01c.19-.04.38-.08.57-.12l.01-.01c.18-.04.36-.08.54-.12l.01-.01c.18-.04.36-.09.54-.13l-.01-.01c.19-.04.38-.09.57-.14z" clip-rule="evenodd"/>
          </svg>
          Continue with Google
        </button>
        <button class="w-full flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 active:scale-95 animate-slide-in-right">
          <svg class="h-5 w-5 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M18.172 1.4C16.142 0.385 13.916 0 12 0S7.858.385 5.828 1.4C2.658 3.036 0 7.375 0 12c0 4.148 2.215 7.644 5.318 9.53a15.7 15.7 0 006.682 2.47c3.966 0 7.5-.762 9.074-2.128C21.782 19.123 24 15.688 24 12c0-4.625-2.658-8.964-5.828-10.6zM15.348 18.06c-1.393.243-2.613.67-3.957 1.127a7.25 7.25 0 01-1.39-1.258c-.3-.263-.5-.487-.717-.743L12 9.043l-1.09.917c-.207.173-.41.343-.607.507-.22.18-.46.363-.733.543-.59.38-1.27.757-2.03.957-.497.123-.97.23-1.42.31l-.22.04v-2.73c.48-.073.96-.18 1.41-.31.75-.24 1.4-.57 1.9-.93.5-.36.9-.76 1.15-1.1s.4-1.04.4-1.3l.01-.01v-.01c0-.18.02-.37.05-.57l.01-.01c.04-.26.07-.48.07-.58v-.01h-.01c-.01-.01-.32-.23-.62-.48l-.01-.01c-.13-.1-.28-.2-.42-.3-.22-.16-.45-.3-.7-.41l-.01-.01c-.16-.08-.34-.14-.52-.19-.18-.05-.36-.08-.55-.08h-.01c-.15 0-.28 0-.41.01l-.01.01h-.01c-.12 0-.25.01-.38.01l-.01.01h-.01c-.26-.06-.52-.12-.78-.18l-.01-.01H3.6c-1.897 0-3.447 1.55-3.447 3.447v1.8c0 1.897 1.55 3.447 3.447 3.447h2.093c.27 0 .54-.01.81-.02l-.01-.01c.21-.02.42-.04.62-.07l-.01-.01c.21-.03.42-.06.63-.1l.01-.01c.19-.03.38-.07.57-.1l.01-.01c.19-.04.38-.08.57-.12l.01-.01c.18-.04.36-.08.54-.12l.01-.01c.18-.04.36-.09.54-.13l-.01-.01c.19-.04.38-.09.57-.14z" clip-rule="evenodd" />
          </svg>
          Continue with Apple 
        </button>
      </div>

      <div class="relative mb-8">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
          <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 font-mono text-xs uppercase tracking-wider">
            OR
          </span>
        </div>
      </div>

      <form class="space-y-6">
        <div>
          <label for="email" class="sr-only">Email address</label>
          <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-base transition duration-300 ease-in-out transform focus:scale-[1.01] animate-fade-in-down-delay" placeholder="Email address" />
        </div>

        <div>
          <label for="password" class="sr-only">Password</label>
          <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-base transition duration-300 ease-in-out transform focus:scale-[1.01] animate-fade-in-down-delay-2" placeholder="Password" />
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 dark:text-indigo-400 border-gray-300 dark:border-gray-600 rounded focus:ring-indigo-500 dark:focus:ring-indigo-400">
            <label for="remember-me" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
              Remember me
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300 transition duration-200 ease-in-out">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 dark:bg-indigo-700 hover:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 animate-fade-in-up-delay">
            Sign in
          </button>
        </div>
      </form>

      <p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-300 animate-fade-in-up-delay-2">
        Not a member? 
        <a href="#" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300 transition duration-200 ease-in-out">
          Sign up now
        </a>
      </p>
    </div>
  </div>
</div>

<style>
/* Basic keyframe animations for simple entrance effects */
@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in-down { animation: fade-in-down 0.6s ease-out forwards; }
.animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; }
.animate-slide-in-left { animation: slide-in-left 0.7s ease-out forwards; }
.animate-slide-in-right { animation: slide-in-right 0.7s ease-out forwards; }

/* Delays for staggered animations */
.animate-fade-in-down-delay { animation: fade-in-down 0.6s ease-out 0.3s forwards; opacity: 0; }
.animate-fade-in-down-delay-2 { animation: fade-in-down 0.6s ease-out 0.4s forwards; opacity: 0; }
.animate-fade-in-up-delay { animation: fade-in-up 0.6s ease-out 0.5s forwards; opacity: 0; }
.animate-fade-in-up-delay-2 { animation: fade-in-up 0.6s ease-out 0.6s forwards; opacity: 0; }
</style>

User Mentions Component

A complex, minimalist user mentions component designed for educational platforms, featuring a neon/electric color scheme, responsiveness, and dark mode support. It displays recent mentions with user avatars, messages, and timestamps, including a 'View All' button.

Open Preview

                <div class="font-sans p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 overflow-hidden transform transition-all duration-300 hover:shadow-xl">
    <div class="p-5 sm:p-6 md:p-7 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-blue-600 dark:text-blue-400 mb-1 leading-tight tracking-tight relative">
        Recent Mentions
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-blue-500 to-fuchsia-500 dark:from-blue-400 dark:to-fuchsia-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </h2>
      <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base">Stay updated on discussions where you've been mentioned.</p>
    </div>

    <div class="divide-y divide-gray-200 dark:divide-gray-700">
      <!-- Mention Item 1 -->
      <div class="p-4 sm:p-5 md:p-6 hover:bg-blue-50 dark:hover:bg-gray-700 transition-colors duration-200 flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-blue-400 dark:ring-blue-300 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Sarah"> 
        <div class="flex-1">
          <div class="flex items-center justify-between mb-1">
            <p class="text-gray-900 dark:text-gray-50 font-semibold text-base sm:text-lg">Sarah Jones
              <span class="text-blue-600 dark:text-blue-400 text-sm font-medium ml-1">@sarah_j</span>
            </p>
            <time datetime="2023-10-26T14:30:00Z" class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</time>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base leading-snug">
            <span class="font-medium text-blue-700 dark:text-blue-300">@me</span> Don't miss the new module on Quantum Physics! It's a game-changer.
          </p>
          <div class="mt-2 flex flex-wrap gap-2 text-xs">
            <span class="px-2 py-0.5 bg-fuchsia-100 dark:bg-fuchsia-900 text-fuchsia-700 dark:text-fuchsia-300 rounded-full">#Physics</span>
            <span class="px-2 py-0.5 bg-emerald-100 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-300 rounded-full">#CourseUpdate</span>
          </div>
        </div>
      </div>

      <!-- Mention Item 2 -->
      <div class="p-4 sm:p-5 md:p-6 hover:bg-blue-50 dark:hover:bg-gray-700 transition-colors duration-200 flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-fuchsia-400 dark:ring-fuchsia-300 object-cover" src="https://randomuser.me/api/portraits/men/82.jpg" alt="Avatar of David"> 
        <div class="flex-1">
          <div class="flex items-center justify-between mb-1">
            <p class="text-gray-900 dark:text-gray-50 font-semibold text-base sm:text-lg">David Lee
              <span class="text-blue-600 dark:text-blue-400 text-sm font-medium ml-1">@dave_code</span>
            </p>
            <time datetime="2023-10-26T12:00:00Z" class="text-xs text-gray-500 dark:text-gray-400">4 hours ago</time>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base leading-snug">
            Hey <span class="font-medium text-blue-700 dark:text-blue-300">@me</span>, can you review my pull request on the new API integration? 
          </p>
          <div class="mt-2 flex flex-wrap gap-2 text-xs">
            <span class="px-2 py-0.5 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-full">#Programming</span>
            <span class="px-2 py-0.5 bg-lime-100 dark:bg-lime-900 text-lime-700 dark:text-lime-300 rounded-full">#CodeReview</span>
          </div>
        </div>
      </div>

      <!-- Mention Item 3 -->
      <div class="p-4 sm:p-5 md:p-6 hover:bg-blue-50 dark:hover:bg-gray-700 transition-colors duration-200 flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-lime-400 dark:ring-lime-300 object-cover" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar of Emily"> 
        <div class="flex-1">
          <div class="flex items-center justify-between mb-1">
            <p class="text-gray-900 dark:text-gray-50 font-semibold text-base sm:text-lg">Emily Chen
              <span class="text-blue-600 dark:text-blue-400 text-sm font-medium ml-1">@emily_c</span>
            </p>
            <time datetime="2023-10-25T09:00:00Z" class="text-xs text-gray-500 dark:text-gray-400">1 day ago</time>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base leading-snug">
            <span class="font-medium text-blue-700 dark:text-blue-300">@me</span> The new article on ethical AI practices is now live!
          </p>
          <div class="mt-2 flex flex-wrap gap-2 text-xs">
            <span class="px-2 py-0.5 bg-sky-100 dark:bg-sky-900 text-sky-700 dark:text-sky-300 rounded-full">#ArtificialIntelligence</span>
            <span class="px-2 py-0.5 bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 rounded-full">#Ethics</span>
          </div>
        </div>
      </div>
    </div>

    <div class="p-5 sm:p-6 md:p-7 text-center">
      <button class="inline-flex items-center justify-center px-6 py-2 sm:px-8 sm:py-3 border-2 border-blue-500 dark:border-blue-400 rounded-full text-base font-semibold 
                     bg-gradient-to-r from-blue-600 to-fuchsia-600 dark:from-blue-500 dark:to-fuchsia-500 
                     text-white shadow-lg 
                     transform transition-all duration-300 ease-out
                     hover:scale-105 hover:shadow-xl hover:from-blue-700 hover:to-fuchsia-700
                     focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:ring-opacity-75 relative group">
        <span class="relative z-10">View All Mentions</span>
        <span class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-500 to-fuchsia-500 dark:from-blue-400 dark:to-fuchsia-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pulse-animation"></span>
      </button>
    </div>
  </div>
</div>

<style>
  /* This is an example of including a keyframe animation for the pulse effect in the button */
  /* In a real scenario, this would ideally be in a global CSS file or injected via a build step */
  @keyframes pulse-animation {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.2); opacity: 0; }
  }
  .pulse-animation {
    animation: pulse-animation 1.5s infinite cubic-bezier(0.66, 0, 0.33, 1);
  }
</style>

Social Components Component

A simple, elegant social component designed for music and audio platforms with high-contrast color scheme and luxury styling, featuring user profile, followers, and engagement metrics. Fully responsive with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-gray-100 to-white dark:from-gray-900 dark:to-black min-h-screen font-serif text-gray-900 dark:text-gray-100 flex items-center justify-center">
  <div class="w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl relative border border-gray-200 dark:border-gray-700">

    <!-- Background Motif (Optional, for luxury feel) -->
    <div class="absolute inset-0 bg-repeat opacity-5 dark:opacity-[0.02]" style="background-image: url('data:image/svg+xml,%3Csvg width=\'6\' height=\'6\' viewBox=\'0 0 6 6\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%239C92AC\' fill-opacity=\'0.1\' fill-rule=\'evenodd\'%3E%3Cpath d=\'M0 0h3v3H0V0zm3 3h3v3H3V3z\'/%3E%3C/g%3E%3C/svg%3E');"></div>

    <div class="relative p-6 sm:p-8 md:p-10 z-10">

      <!-- Profile Header -->
      <div class="flex flex-col items-center mb-8">
        <div class="w-28 h-28 rounded-full overflow-hidden mb-4 border-4 border-gray-300 dark:border-gray-600 shadow-lg transform transition-transform duration-300 hover:scale-105">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-full h-full object-cover">
        </div>
        <h2 class="text-3xl font-semibold tracking-wide text-center leading-tight mb-1 text-gray-900 dark:text-gray-100">
          Amelia Lux
        </h2>
        <p class="text-lg text-gray-600 dark:text-gray-400 font-light text-center">
          @amelialuxofficial
        </p>
      </div>

      <!-- Engagement Metrics -->
      <div class="flex justify-around items-center mb-8 gap-4">
        <div class="text-center">
          <p class="text-2xl font-bold text-indigo-700 dark:text-indigo-400 leading-tight">2.1M</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-widest">Followers</p>
        </div>
        <div class="text-center">
          <p class="text-2xl font-bold text-indigo-700 dark:text-indigo-400 leading-tight">124</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-widest">Following</p>
        </div>
        <div class="text-center">
          <p class="text-2xl font-bold text-indigo-700 dark:text-indigo-400 leading-tight">9.8K</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-widest">Likes</p>
        </div>
      </div>

      <!-- Bio/Description (Simple) -->
      <div class="text-center mb-8">
        <p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
          Music producer and DJ crafting emotive soundscapes and rhythmic journeys. 
          <span class="block text-sm text-gray-500 dark:text-gray-400 mt-1">Dreaming in melodies.</span>
        </p>
      </div>

      <!-- Call to Action / Interact Buttons -->
      <div class="flex flex-col space-y-4">
        <button class="w-full py-3 px-6 bg-indigo-700 text-white rounded-full text-lg font-medium tracking-wide 
                       hover:bg-indigo-800 dark:bg-indigo-600 dark:hover:bg-indigo-700 transition-colors duration-300 
                       shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 
                       dark:focus:ring-offset-gray-800">
          Follow
        </button>
        <button class="w-full py-3 px-6 border-2 border-indigo-700 text-indigo-700 rounded-full text-lg font-medium tracking-wide 
                       hover:bg-indigo-50 dark:hover:bg-gray-700 dark:text-indigo-400 dark:border-indigo-500 
                       transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 
                       dark:focus:ring-offset-gray-800">
          Message
        </button>
      </div>

    </div>
  </div>
</div>

Table of Contents Component

A clean, minimalist, and responsive Table of Contents component inspired by Swiss/International typography, designed for documentation and knowledge base sites, featuring warm neutral colors and full dark mode support.

Open Preview

                <div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 leading-normal tracking-wider">

  <div class="max-w-xs md:max-w-sm lg:max-w-md mx-auto p-4 md:p-6 lg:p-8 rounded-lg shadow-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
    <h3 class="text-lg md:text-xl lg:text-2xl font-bold mb-4 md:mb-6 text-gray-900 dark:text-gray-100 uppercase tracking-widest border-b border-gray-300 dark:border-gray-600 pb-2">
      Contents
    </h3>
    <nav aria-label="Table of Contents">
      <ul class="space-y-2 text-sm md:text-base lg:text-lg">
        <li>
          <a href="#introduction" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
            <span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">1. Introduction</span>
          </a>
        </li>
        <li>
          <a href="#getting-started" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
            <span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">2. Getting Started</span>
          </a>
          <ul class="ml-4 md:ml-6 mt-2 space-y-1">
            <li>
              <a href="#installation" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
                2.1. Installation Guide
              </a>
            </li>
            <li>
              <a href="#basic-setup" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
                2.2. Basic Setup
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#core-concepts" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
            <span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">3. Core Concepts</span>
          </a>
        </li>
        <li>
          <a href="#advanced-topics" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
            <span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">4. Advanced Topics</span>
          </a>
          <ul class="ml-4 md:ml-6 mt-2 space-y-1">
            <li>
              <a href="#customization" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
                4.1. Customization
              </a>
            </li>
            <li>
              <a href="#integrations" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-600 dark:text-gray-400">
                4.2. Integrations and APIs
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#troubleshooting" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
            <span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">5. Troubleshooting</span>
          </a>
        </li>
        <li>
          <a href="#faq" class="block py-1 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 text-gray-700 dark:text-gray-300">
            <span class="font-semibold text-gray-800 dark:text-gray-200 hover:underline">6. FAQ</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>

</div>

Search Components

Categories

All Components

Real Estate Gallery Component

Social Share Buttons Component

ArtDeco_JobCard

Corporate_Professional_Contact_Form

Bauhaus Wishlist Component

Social Login Component

User Mentions Component

Social Components Component

Table of Contents Component

Tag Cloud Component