<div class="container mx-auto">
<header class="flex justify-between items-center sticky top-0 z-10 py-4 bg-blue-900">
<div class="flex-shrink-0 ml-6 cursor-pointer">
<i class="fas fa-wind fa-2x text-yellow-500"></i>
<span class="text-3xl font-semibold text-blue-200">Tailwind School</span>
</div>
<ul class="flex mr-10 font-semibold">
<li class="mr-6 p-1 border-b-2 border-yellow-500">
<a class="cursor-default text-blue-200" href="#">Home</a>
</li>
<li class="mr-6 p-1">
<a class="text-white hover:text-blue-300" href="#">News</a>
</li>
<li class="mr-6 p-1">
<a class="text-white hover:text-blue-300" href="#">Tutorials</a>
</li>
<li class="mr-6 p-1">
<a class="text-white hover:text-blue-300" href="#">Videos</a>
</li>
</ul>
</header>
<div class="flex pb-4 bg-blue-100">
<main class="flex flex-col w-2/3 pl-6 pr-4 pt-4 ">
<article class="my-4 shadow">
<a href="#">
<img class="hover:opacity-75" src="https://source.unsplash.com/xrVDYZRGdw4/1600x900">
</a>
<div class="flex flex-col p-6 pt-2 bg-white">
<a href="#" class="my-2 text-sm font-bold uppercase border-b-2 border-yellow-500 text-blue-600">Layout</a>
<a href="#" class="pb-4 text-3xl font-serif font-bold hover:text-gray-700 ">Lorem Ipsum Dolor Sit Amet Dolor Sit Amet</a>
<p class="pb-3 text-sm">By <a href="#" class="font-semibold hover:text-gray-800">David Jacobs</a>, May 25, 2021</p>
<p class="pb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis porta dui. Ut eu iaculis massa. Sed ornare ligula lacus, quis iaculis dui porta volutpat. In sit amet posuere magna..</p>
<a href="#" class="uppercase text-xs text-blue-600 hover:text-yellow-500">Continue Reading <i class="fas fa-arrow-right"></i></a>
</div>
</article>
<article class="my-4 shadow">
<a href="#">
<img class="hover:opacity-75" src="https://source.unsplash.com/4UGmm3WRUoQ/1600x900">
</a>
<div class="flex flex-col p-6 pt-2 bg-white">
<a href="#" class="my-2 text-sm font-bold uppercase border-b-2 border-yellow-500 text-blue-600">Imagery</a>
<a href="#" class="pb-4 text-3xl font-serif font-bold hover:text-gray-700 ">Lorem Ipsum Dolor Sit Amet Dolor Sit Amet</a>
<p class="pb-3 text-sm">By <a href="#" class="font-semibold hover:text-gray-800">Monica Sanchez</a>, May 10, 2021</p>
<p class="pb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis porta dui. Ut eu iaculis massa. Sed ornare ligula lacus, quis iaculis dui porta volutpat. In sit amet posuere magna..</p>
<a href="#" class="uppercase text-xs text-blue-600 hover:text-yellow-500">Continue Reading <i class="fas fa-arrow-right"></i></a>
</div>
</article>
<article class="my-4 shadow">
<a href="#">
<img class="hover:opacity-75" src="https://source.unsplash.com/TkZYCXmrKK4/1600x900">
</a>
<div class="flex flex-col p-6 pt-2 bg-white">
<a href="#" class="my-2 text-sm font-bold uppercase border-b-2 border-yellow-500 text-blue-600">Typography</a>
<a href="#" class="pb-4 text-3xl font-serif font-bold hover:text-gray-700 ">Lorem Ipsum Dolor Sit Amet Dolor Sit Amet</a>
<p class="pb-3 text-sm">By <a href="#" class="font-semibold hover:text-gray-800">David Jacobs</a>, April 20, 2021</p>
<p class="pb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis porta dui. Ut eu iaculis massa. Sed ornare ligula lacus, quis iaculis dui porta volutpat. In sit amet posuere magna..</p>
<a href="#" class="uppercase text-xs text-blue-600 hover:text-yellow-500">Continue Reading <i class="fas fa-arrow-right"></i></a>
</div>
</article>
</main>
<aside class="w-1/3 pl-4 pr-6 pt-8">
<section>
<form class="flex">
<input type="text" class="w-full px-3 py-2 rounded-l-lg focus:outline-none text-gray-800" placeholder="Search...">
<button class="px-2 rounded-r-lg focus:outline-none text-center text-xl text-gray-400 hover:text-gray-900 bg-white"><i class="fas fa-search"></i></button>
</form>
</section>
<section class="mt-8 text-white">
<div class="p-4 rounded-lg shadow-xl text-center bg-gradient-to-b from-red-400 to-red-200">
<h3 class="font-semibold text-lg">Get the latest news & tutorials right to your inbox</h3>
<form>
<input type="email" placeholder="youremail@example.com" class="w-full mt-3 p-3 rounded-lg shadow border border-gray-400 focus:outline-none text-gray-800">
<button type="submit" class="w-full mt-4 p-4 rounded-lg focus:outline-none shadow font-semibold uppercase tracking-wider bg-green-600 hover:bg-green-500">Subscribe</button>
</form>
</div>
</section>
<section class="mt-8">
<h3 class="mb-4 pb-2 text-2xl font-semibold border-b-2 border-yellow-500 text-blue-600 ">Categories</h3>
<ul>
<li class="mb-1">
<a class="text-blue-900 hover:text-blue-500" href="#">Layout (23)</a>
</li>
<li class="mb-1">
<a class="text-blue-900 hover:text-blue-500" href="#">Typography (44)</a>
</li>
<li class="mb-1">
<a class="text-blue-900 hover:text-blue-500" href="#">Colors (16)</a>
</li>
<li class="mb-1">
<a class="text-blue-900 hover:text-blue-500" href="#">Imagery (19)</a>
</li>
</ul>
</section>
</aside>
</div>
<section class="flex flex-col items-center p-4 bg-red-400">
<div class="text-center text-white">
<h2 class="font-bold text-3xl">Want to stay up-to-date?</h2>
<h3 class="text-xl">Join our mail list for hot news & new tutorials</h3>
</div>
<div>
<form class="my-4 flex">
<input class="p-4 rounded-l-lg focus:outline-none text-gray-800" placeholder="your@mail.com"/>
<button class="p-4 rounded-r-lg focus:outline-none font-bold uppercase tracking-wider text-white bg-green-600 hover:bg-green-500">Subscribe</button>
</form>
</div>
</section>
<footer class="bg-blue-900">
<div class="flex flex-wrap text-white">
<div class="w-1/3 p-5 border-r border-blue-800">
<div class="my-6 text-xl font-semibold">ABOUT US</div>
<p class="text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac est massa. Donec eget elementum sapien, tincidunt tempor nunc. Cras sodales id ipsum at convallis.</p>
</div>
<div class="w-1/3 p-5 text-center border-r border-blue-800">
<div class="my-6 text-xl font-semibold">CONTACT US</div>
<p class="text-gray-400">
A108 Adam Street <br>
New York, NY 535022 <br>
United States <br>
<strong>Phone:</strong> +1 5589 55488 55 <br>
<strong>Email:</strong> info@webcraft.com
</p>
<div class="flex justify-center space-x-4 mt-6">
<button class="w-10 h-10 p-1 rounded bg-blue-500">
<i class="fab fa-facebook fa-2x"></i>
</button>
<button class="w-10 h-10 p-1 rounded bg-blue-400">
<i class="fab fa-twitter fa-2x"></i>
</button>
<button class="w-10 h-10 p-1 rounded bg-gray-700">
<i class="fab fa-github fa-2x"></i>
</button>
</div>
</div>
<div class="w-1/3 p-5">
<div class="my-6 text-xl font-semibold">SAY HELLO!</div>
<form>
<input class="w-full h-10 mb-4 p-2 focus:outline-none border-b-2 border-blue-800 bg-blue-900" type="email" placeholder="Your email">
<textarea class="w-full h-24 mb-6 px-2 pt-2 focus:outline-none border-b-2 border-blue-800 bg-blue-900" placeholder="Your message"></textarea>
<button class="w-full px-4 py-2 rounded-lg focus:outline-none font-semibold tracking-wider bg-yellow-600 hover:bg-yellow-500" type="button">SEND</button>
</form>
</div>
</div>
</footer>
</div>
