Composants Disposition de la grille Travel_Booking_Grid_Layout_Component
Travel_Booking_Grid_Layout_Component

Il s’agit d’un composant de mise en page de grille complexe et réactif pour un site Web de réservation de voyages avec un design d’entreprise/professionnel, une palette de couleurs analogue et une prise en charge du mode sombre. Comprend des cartes de destination, une entrée de recherche et une barre latérale.
Aperçu

HTML Code

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-sans p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-4 gap-6">

    <!-- Sidebar / Filters -->
    <aside class="lg:col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 sticky top-6 self-start">
      <h2 class="text-2xl font-bold mb-6 text-indigo-700 dark:text-indigo-400">Find Your Trip</h2>

      <div class="mb-6">
        <label for="destination" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Destination</label>
        <input type="text" id="destination" placeholder="e.g., Paris, Tokyo" class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-indigo-500 focus:border-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
      </div>

      <div class="mb-6">
        <label for="dates" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dates</label>
        <input type="text" id="dates" placeholder="Select Dates" class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-indigo-500 focus:border-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
      </div>

      <div class="mb-6">
        <label for="travelers" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Travelers</label>
        <select id="travelers" class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-indigo-500 focus:border-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
          <option>1 Adult</option>
          <option>2 Adults</option>
          <option>3 Adults</option>
          <option>4+ Adults</option>
        </select>
      </div>

      <div class="mb-6">
        <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-3">Price Range</h3>
        <input type="range" min="100" max="5000" value="2500" class="w-full accent-indigo-600 dark:accent-indigo-400">
        <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400 mt-1">
          <span>$100</span>
          <span>$5000+</span>
        </div>
      </div>

      <button class="w-full bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 ease-in-out">
        Search Trips
      </button>
    </aside>

    <!-- Main Content / Destination Grid -->
    <main class="lg:col-span-3">
      <div class="mb-8 flex flex-col sm:flex-row items-center justify-between">
        <h1 class="text-3xl font-extrabold text-indigo-800 dark:text-indigo-300 mb-4 sm:mb-0">Popular Destinations</h1>
        <div class="relative w-full sm:w-auto">
          <input type="text" placeholder="Search specific destination..." class="w-full sm:w-64 px-4 py-2 pl-10 rounded-full border border-gray-300 dark:border-gray-600 focus:ring-indigo-500 focus:border-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
          <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        <!-- Destination Card 1 -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
          <img src="https://picsum.photos/id/1015/400/250" alt="Bali Beaches" class="w-full h-48 object-cover">
          <div class="p-5">
            <div class="flex justify-between items-baseline mb-2">
              <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-400">Bali, Indonesia</h3>
              <p class="text-lg font-bold text-green-600 dark:text-green-400">$1200</p>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Experience the serene beauty of Bali's beaches and culture.</p>
            <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
              <svg class="w-4 h-4 mr-1" 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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0L20.12 19.207m-2.463-2.48a4 4 0 10-5.657-5.657 4 4 0 005.657 5.657zm-2.828 2.828l2.483 2.483"></path></svg>
              <span>7 days, 6 nights</span>
            </div>
            <button class="w-full bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white font-semibold py-2 rounded-md transition duration-300 ease-in-out">
              View Details
            </button>
          </div>
        </div>

        <!-- Destination Card 2 -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
          <img src="https://picsum.photos/id/103/400/250" alt="Paris Eiffel Tower" class="w-full h-48 object-cover">
          <div class="p-5">
            <div class="flex justify-between items-baseline mb-2">
              <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-400">Paris, France</h3>
              <p class="text-lg font-bold text-green-600 dark:text-green-400">$1800</p>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Romantic city lights and iconic landmarks await you.</p>
            <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
              <svg class="w-4 h-4 mr-1" 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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0L20.12 19.207m-2.463-2.48a4 4 0 10-5.657-5.657 4 4 0 005.657 5.657zm-2.828 2.828l2.483 2.483"></path></svg>
              <span>5 days, 4 nights</span>
            </div>
            <button class="w-full bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white font-semibold py-2 rounded-md transition duration-300 ease-in-out">
              View Details
            </button>
          </div>
        </div>

        <!-- Destination Card 3 -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
          <img src="https://picsum.photos/id/1043/400/250" alt="Kyoto Temples" class="w-full h-48 object-cover">
          <div class="p-5">
            <div class="flex justify-between items-baseline mb-2">
              <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-400">Kyoto, Japan</h3>
              <p class="text-lg font-bold text-green-600 dark:text-green-400">$2100</p>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Discover ancient temples and modern wonders in Kyoto.</p>
            <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
              <svg class="w-4 h-4 mr-1" 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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0L20.12 19.207m-2.463-2.48a4 4 0 10-5.657-5.657 4 4 0 005.657 5.657zm-2.828 2.828l2.483 2.483"></path></svg>
              <span>9 days, 8 nights</span>
            </div>
            <button class="w-full bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white font-semibold py-2 rounded-md transition duration-300 ease-in-out">
              View Details
            </button>
          </div>
        </div>

        <!-- Destination Card 4 -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
          <img src="https://picsum.photos/id/1018/400/250" alt="Rome Colosseum" class="w-full h-48 object-cover">
          <div class="p-5">
            <div class="flex justify-between items-baseline mb-2">
              <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-400">Rome, Italy</h3>
              <p class="text-lg font-bold text-green-600 dark:text-green-400">$1500</p>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Explore ancient history and vibrant Italian culture.</p>
            <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
              <svg class="w-4 h-4 mr-1" 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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0L20.12 19.207m-2.463-2.48a4 4 0 10-5.657-5.657 4 4 0 005.657 5.657zm-2.828 2.828l2.483 2.483"></path></svg>
              <span>6 days, 5 nights</span>
            </div>
            <button class="w-full bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white font-semibold py-2 rounded-md transition duration-300 ease-in-out">
              View Details
            </button>
          </div>
        </div>

        <!-- Destination Card 5 -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
          <img src="https://picsum.photos/id/1033/400/250" alt="Amazon Rainforest" class="w-full h-48 object-cover">
          <div class="p-5">
            <div class="flex justify-between items-baseline mb-2">
              <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-400">Amazon, Brazil</h3>
              <p class="text-lg font-bold text-green-600 dark:text-green-400">$2500</p>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">An adventurous journey through the world's largest rainforest.</p>
            <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
              <svg class="w-4 h-4 mr-1" 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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0L20.12 19.207m-2.463-2.48a4 4 0 10-5.657-5.657 4 4 0 005.657 5.657zm-2.828 2.828l2.483 2.483"></path></svg>
              <span>10 days, 9 nights</span>
            </div>
            <button class="w-full bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white font-semibold py-2 rounded-md transition duration-300 ease-in-out">
              View Details
            </button>
          </div>
        </div>

        <!-- Destination Card 6 -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
          <img src="https://picsum.photos/id/1070/400/250" alt="New York City Skyline" class="w-full h-48 object-cover">
          <div class="p-5">
            <div class="flex justify-between items-baseline mb-2">
              <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-400">New York, USA</h3>
              <p class="text-lg font-bold text-green-600 dark:text-green-400">$1600</p>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Experience the vibrant energy of the 'City That Never Sleeps'.</p>
            <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
              <svg class="w-4 h-4 mr-1" 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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0L20.12 19.207m-2.463-2.48a4 4 0 10-5.657-5.657 4 4 0 005.657 5.657zm-2.828 2.828l2.483 2.483"></path></svg>
              <span>5 days, 4 nights</span>
            </div>
            <button class="w-full bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white font-semibold py-2 rounded-md transition duration-300 ease-in-out">
              View Details
            </button>
          </div>
        </div>

      </div>

      <!-- Pagination (placeholder) -->
      <nav class="mt-10 flex justify-center" aria-label="Pagination">
        <ul class="flex items-center space-x-2">
          <li><a href="#" class="px-4 py-2 rounded-md bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-150 ease-in-out">Previous</a></li>
          <li><a href="#" class="px-4 py-2 rounded-md bg-indigo-600 dark:bg-indigo-700 text-white font-bold">1</a></li>
          <li><a href="#" class="px-4 py-2 rounded-md bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-150 ease-in-out">2</a></li>
          <li><a href="#" class="px-4 py-2 rounded-md bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-150 ease-in-out">3</a></li>
          <li><a href="#" class="px-4 py-2 rounded-md bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-150 ease-in-out">Next</a></li>
        </ul>
      </nav>
    </main>

  </div>
</div>
Composants associés

Composant de disposition de grille de skeuomorphisme

Composant de mise en page de grille Skeuomorphism avec effets réactifs et prise en charge du thème sombre.
Ouvrir
Composant de mise en page de grille

Un composant de mise en page de grille réactif pour les interfaces de médias sociaux conçu avec un style skeuomorphe, avec des couleurs triadiques, plusieurs éléments interactifs et la prise en charge des thèmes sombres.
Ouvrir
Grille de tableau de bord Neumorphism

Composant de tableau de bord de mise en page de grille de neumorphisme avec schéma de couleurs complémentaires
Ouvrir