<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;
}