Travel_Booking_Grid_Layout_Component
여행 예약 웹사이트를 위한 복잡하고 반응이 빠른 그리드 레이아웃 구성 요소로, 기업/전문 디자인, 유사한 색 구성표 및 다크 모드를 지원합니다. 목적지 카드, 검색 입력 및 사이드바가 있습니다.
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>