Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Volet Galerie immobilière

Un composant de galerie réactif et professionnel pour les annonces immobilières, avec une mise en page épurée, une palette de couleurs pastel et une prise en charge complète du mode sombre. Comprend des cartes de propriétés avec des détails, une section de filtrage/tri et un appel à l’action clair.

Ouvrir Aperçu

                <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">

Composant Boutons de partage social

Un composant réactif et minimaliste des boutons de partage social conçu avec un style de typographie suisse/international, en utilisant une palette de couleurs en niveaux de gris. Il convient aux sites d’emploi ou aux plateformes de développement de carrière, offrant des options de partage propres pour diverses plateformes de médias sociaux.

Ouvrir Aperçu

                <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

Un composant de carte de travail simple et réactif avec une esthétique Art déco, des couleurs rétro sourdes et une prise en charge du mode sombre, adapté aux sites d’emploi ou aux plateformes de carrière.

Ouvrir Aperçu

                <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

Un composant de formulaire de contact propre, professionnel et réactif conçu avec une palette forêt/vert, adapté aux sites Web d’entreprise ou de portefeuille. Comprend la prise en charge du mode sombre et des fonctionnalités de conception modernes.

Ouvrir Aperçu

                <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>

Composant de la liste de souhaits Bauhaus

Un composant de liste de souhaits simple et réactif pour les produits de mode/beauté conçus selon les principes du Bauhaus, avec des couleurs neutres froides et la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant de connexion sociale

Un composant de social login à l’esthétique industrielle et brute utilisant des couleurs neutres et froides, adapté aux systèmes de réservation et de réservation. Il dispose de boutons de connexion sociale et d’un séparateur avec une option de connexion manuelle, tous réactifs et avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant Mentions de l’utilisateur

Un composant complexe et minimaliste conçu pour les plates-formes éducatives, avec une palette de couleurs néon/électrique, une réactivité et une prise en charge du mode sombre. Il affiche les mentions récentes avec les avatars des utilisateurs, les messages et les horodatages, y compris un bouton « Voir tout ».

Ouvrir Aperçu

                <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>

Volet Composantes sociales

Un composant social simple et élégant conçu pour les plateformes musicales et audio avec une palette de couleurs à contraste élevé et un style luxueux, avec le profil de l’utilisateur, les abonnés et les mesures d’engagement. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant de la table des matières

Un composant de table des matières propre, minimaliste et réactif inspiré de la typographie suisse/internationale, conçu pour la documentation et les sites de base de connaissances, avec des couleurs neutres chaudes et une prise en charge complète du mode sombre.

Ouvrir Aperçu

                <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>

Composant de nuage de balises

Un composant de nuage de balises simple et réactif avec une esthétique monospace/développeur, une palette de couleurs sourdes, conçu pour les sites Web de voyage/tourisme. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-mono bg-gray-100 text-gray-800 p-4 sm:p-6 lg:p-8 dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-start justify-center">
  <div class="w-full max-w-4xl bg-white shadow-lg rounded-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-700 overflow-hidden">
    <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-50 mb-2">
        <span class="block">explore: _</span>
        <span class="sr-only">Explore Destinations</span>
      </h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Discover popular travel tags and destinations.</p>
    </div>
    <div class="p-4 sm:p-6">
      <div class="flex flex-wrap gap-2 sm:gap-3">
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-800 dark:text-blue-100 dark:hover:bg-blue-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Beaches
        </a>
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-800 dark:text-green-100 dark:hover:bg-green-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Mountains
        </a>
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-purple-100 text-purple-800 hover:bg-purple-200 dark:bg-purple-800 dark:text-purple-100 dark:hover:bg-purple-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Cities
        </a>
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-yellow-100 text-yellow-800 hover:bg-yellow-200 dark:bg-yellow-800 dark:text-yellow-100 dark:hover:bg-yellow-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Adventures
        </a>
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-red-100 text-red-800 hover:bg-red-200 dark:bg-red-800 dark:text-red-100 dark:hover:bg-red-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Culture
        </a>
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-indigo-100 text-indigo-800 hover:bg-indigo-200 dark:bg-indigo-800 dark:text-indigo-100 dark:hover:bg-indigo-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Wildlife
        </a>
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-pink-100 text-pink-800 hover:bg-pink-200 dark:bg-pink-800 dark:text-pink-100 dark:hover:bg-pink-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Ecotourism
        </a>
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-teal-100 text-teal-800 hover:bg-teal-200 dark:bg-teal-800 dark:text-teal-100 dark:hover:bg-teal-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Relaxation
        </a>
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-orange-100 text-orange-800 hover:bg-orange-200 dark:bg-orange-800 dark:text-orange-100 dark:hover:bg-orange-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Historical Sites
        </a>
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-cyan-100 text-cyan-800 hover:bg-cyan-200 dark:bg-cyan-800 dark:text-cyan-100 dark:hover:bg-cyan-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Food Tours
        </a>
      </div>
    </div>
  </div>
</div>

1 ... 15 16 17 18 19 ... 335

Rechercher des composants

Catégories

Tous les composants