<header class="sticky top-0 bg-white border-b border-gray-300">
<nav class="container mx-auto flex items-center p-6">
<a class="inline-block h-8 mr-auto" href="#">
<img class="inline-block h-full w-auto" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/acme.svg" />
</a>
<ul class="flex items-center">
<li class="ml-6">
<a class="text-blue-500 hover:text-blue-800" href="#">Home</a>
</li>
<li class="ml-6">
<a class="text-blue-500 hover:text-blue-800" href="#">Blog</a>
</li>
<li class="ml-6">
<a class="text-blue-500 hover:text-blue-800" href="#">Events</a>
</li>
<li class="ml-6">
<a class="text-blue-500 hover:text-blue-800" href="#">Contact</a>
</li>
<li class="ml-6">
<a class="text-blue-500 hover:text-blue-800" href="#">About</a>
</li>
</ul>
</nav>
</header>
<!-- Responsive leaderboard -->
<div class="mt-4">
<div class="ad is-left">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/728x90%402-left.png" alt="728x90" />
</div>
<div class="ad is-center">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/728x90%402-center.png" alt="728x90" />
</div>
<div class="ad is-right">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/728x90%402-right.png" alt="728x90" />
</div>
</div>
<!-- Responsive leaderboard -->
<main class="h-screen">
<div class="container mx-auto p-4">
<div class="flex flex-wrap justify-between">
<div class="w-full md:w-1/3 p-2 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
<img src="https://source.unsplash.com/collection/225/800x600" class="h-64 w-full rounded-t pb-6 object-cover">
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
<p class="text-gray-800 font-serif text-base px-6 mb-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ipsum eu nunc commodo posuere et sit amet ligula.
</p>
</a>
</div>
</div>
<div class="w-full md:w-1/3 p-2 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
<img src="https://source.unsplash.com/collection/3106804/800x600" class="h-64 w-full rounded-t pb-6 object-cover">
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
<p class="text-gray-800 font-serif text-base px-6 mb-5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ip Aliquam at ipsum eu nunc commodo posuere et sit amet ligula.
</p>
</a>
</div>
</div>
<div class="w-full md:w-1/3 p-2 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
<img src="https://source.unsplash.com/collection/539527/800x600" class="h-64 w-full rounded-t pb-6 object-cover">
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
<p class="text-gray-800 font-serif text-base px-6 mb-5">
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
</p>
</a>
</div>
</div>
<div class="w-full md:w-1/2 p-2 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
<img src="https://source.unsplash.com/collection/3657445/800x600" class="h-full w-full rounded-t pb-6">
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
<p class="text-gray-800 font-serif text-base px-6 mb-5">
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
</p>
</a>
</div>
</div>
<div class="w-full md:w-1/2 p-2 flex flex-col flex-grow flex-shrink">
<div class="flex-1 flex-row bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
<img src="https://source.unsplash.com/collection/764827/800x600" class="h-full w-full rounded-t pb-6">
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
<p class="text-gray-800 font-serif text-base px-6 mb-5">
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
</p>
</a>
</div>
</div>
<div class="w-full md:w-2/3 p-2 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
<img src="https://source.unsplash.com/collection/325867/800x600" class="h-full w-full rounded-t pb-6">
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
<p class="text-gray-800 font-serif text-base px-6 mb-5">
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
</p>
</a>
</div>
</div>
<div class="w-full md:w-1/3 p-2 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
<img src="https://source.unsplash.com/collection/1118905/800x600" class="h-full w-full rounded-t pb-6">
<p class="w-full text-gray-600 text-xs md:text-sm px-6">GETTING STARTED</p>
<div class="w-full font-bold text-xl text-gray-900 px-6">Lorem ipsum dolor sit amet.</div>
<p class="text-gray-800 font-serif text-base px-6 mb-5">
Lorem ipsum eu nunc commodo posuere et sit amet ligula.
</p>
</a>
</div>
</div>
</div>
</div>
</main>
.ad {
display: flex;
overflow: hidden;
max-width: 728px;
margin: 16px auto;
}
.ad.is-left {
justify-content: flex-start;
}
.ad.is-center {
justify-content: center;
}
.ad.is-right {
justify-content: flex-end;
}
.ad img {
display: inline-block;
height: 90px;
width: 728px;
max-width: none;
}
This Pen doesn't use any external JavaScript resources.