CCHub Logo CCHub Tailwind Collection
Componenti Layout a griglia Travel_Booking_Grid_Layout_Component

Travel_Booking_Grid_Layout_Component

Un componente di layout a griglia complesso e reattivo per un sito Web di prenotazione di viaggi con un design aziendale/professionale, combinazione di colori analoga e supporto per la modalità scura. Presenta schede di destinazione, input di ricerca e una barra laterale.

Anteprima

Codice HTML 

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

Componenti correlati

FinancialGridWithInteractions

Un componente di layout a griglia reattivo per interfacce finanziarie/bancarie, caratterizzato da colori ad alto contrasto e sottili microinterazioni al passaggio del mouse. Supporta la modalità oscura ed è progettato per una complessità moderata.

Aperto

Componente Layout griglia

Un componente minimalista per il layout della griglia caratterizzato da un design semplice e pulito con effetti reattivi e supporto per il tema scuro. Utilizza immagini segnaposto e avatar da picsum.photos e randomuser.me.

Aperto

Course_Grid_Layout_Component

Un componente di layout a griglia reattivo e visivamente accattivante per piattaforme educative, con schede del corso con toni caldi del tramonto, ombre Material Design e supporto per la modalità oscura.

Aperto