<header class="sticky top-0 z-10 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>

<div class="wrapper container mx-auto px-6 py-12">
	<main class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
		<div class="article">
			<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-40 w-full rounded-t pb-4 object-cover">
					<div class="w-full font-bold text-xl text-gray-900 px-4">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>
	</main>

	<asida>
		<div class="is-sticky">
			<!-- Medium Rectangle -->
			<div class="ad">
				<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/300x250%402.png" alt="300x500" />
			</div>
			<div class="ad">
				<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/300x250%402.png" alt="300x500" />
			</div>
			<!-- Medium Rectangle -->
		</div>
	</aside>
</div>

.wrapper {
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;
	gap: 20px;
}

.ad {
	margin-bottom: 2rem;
}

.is-sticky {
  position: sticky;
  top: 120px;
}

/* not important */
.ad {
	position: relative;
	border-radius: 1rem;
}

.ad > * {
	border-radius: .5rem;
	box-shadow: 0 0 30px rgba(16,14,23,.25);
}

.ad::before {
	content: "";
	position: absolute;
	background-color: #f5f5f5;
	top: -1rem;
	right: -1rem;
	width: 100%;
	height: 100%;
	z-index: -1;
	border-radius: 1rem;
}

// Not important
// Just to generate more articles
const node = document.querySelector('.article');
[...Array(10)].forEach(_ => node.parentNode.insertBefore(node.cloneNode(true), node));