JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Travel Agency</title>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body class="bg-gray-100 font-sans leading-normal tracking-normal">
<header class="bg-white shadow py-6 px-4">
<div class="container mx-auto flex items-center justify-between">
<a href="#" class="text-2xl font-bold text-gray-800 no-underline">Travel Agency</a>
<nav class="flex items-center">
<a href="#" class="px-3 py-2 rounded-md font-semibold text-gray-700 hover:text-gray-800">Home</a>
<a href="#" class="px-3 py-2 rounded-md font-semibold text-gray-700 hover:text-gray-800">Destinations</a>
<a href="#" class="px-3 py-2 rounded-md font-semibold text-gray-700 hover:text-gray-800">About</a>
<a href="#" class="px-3 py-2 rounded-md font-semibold text-gray-700 hover:text-gray-800">Contact</a>
</nav>
</div>
</header>
<!-- Hero section -->
<section class="bg-white py-16">
<div class="container mx-auto px-4">
<h1 class="text-4xl font-bold text-gray-800 mb-2">
Travel Agency
</h1>
<h2 class="text-2xl font-bold text-gray-600 mb-8">
Get ready for your dream vacation!
</h2>
<p class="text-gray-600 mb-8">
Book now and get a 15% discount on your next trip.
</p>
<a
href="#booking"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>Book now</a
>
</div>
</section>
<!-- Destination gallery -->
<section class="bg-gray-100 py-16">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-gray-800 mb-8">Popular destinations</h2>
<div class="grid grid-cols-3 gap-4">
<div class="col-span-1">
<img...