<body class="bg-gray-100 font-sans leading-normal tracking-normal"> <nav class="fixed top-0 w-full bg-white shadow-lg z-40"> <div class="container mx-auto px-4 py-3"> <div class="flex items-center justify-between"> <h1 class="text-2xl font-bold text-blue-600">Movie Hub</h1> <div class="flex items-center space-x-4"> <form class="flex items-center"> <input type="text" placeholder="Search..." class="px-3 py-1 border border-gray-300 rounded-l-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500" /> <button type="submit" class="bg-blue-600 text-white px-4 py-1 rounded-r-lg hover:bg-blue-500 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-300">Search</button> </form> <a href="#" class="text-gray-700 hover:text-blue-600 transition-colors">Home</a> <a href="#" class="text-gray-700 hover:text-blue-600 transition-colors">About</a> <a href="#" class="text-gray-700 hover:text-blue-600 transition-colors">Contact</a> </div> </div> </div> </nav> <div class="pt-16"> <h2 class="text-center text-3xl font-bold mt-10">Welcome to Movie Hub</h2> <p class="text-center text-gray-700 mt-4">Discover your favorite movies and shows.</p> <div class="flex justify-center mt-8"> <img src="https://www.tailwindai.dev/placeholder.svg" alt="Movie Hub" class="rounded-lg shadow-2xl" /> </div> </div> </body>