CCHub Logo CCHub Tailwind Collection
Componentes Diseño de cuadrícula Travel_Booking_Grid_Layout_Component

Travel_Booking_Grid_Layout_Component

Un componente de diseño de cuadrícula complejo y receptivo para un sitio web de reserva de viajes con un diseño corporativo/profesional, combinación de colores análoga y compatibilidad con el modo oscuro. Cuenta con tarjetas de destino, entrada de búsqueda y una barra lateral.

Vista previa

Código 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>

Componentes relacionados

Componente de diseño de cuadrícula

Un componente de diseño de cuadrícula minimalista con un diseño simple y limpio con efectos receptivos y soporte para temas oscuros. Utiliza imágenes de marcador de posición y avatares de picsum.photos y randomuser.me.

Abrir

Rejilla de agricultura lúdica

Un componente de diseño de cuadrícula simple, alegre y receptivo para sitios web de agricultura y ganadería, con neutros cálidos, elementos redondeados y soporte para modo oscuro.

Abrir

Diseño de cuadrícula de juegos Art Deco

Un diseño de cuadrícula de juego responsivo inspirado en el Art Deco con patrones geométricos, colores en escala de grises y elementos interactivos. Diseñado para sitios web e interfaces de juegos, con soporte para modo oscuro.

Abrir