<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="flex justify-center py-4">
  <div class="responsive-ad">
    <picture>
      <source media="(min-width: 1024px)"
              srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/970x250.png, https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/970x250%402.png 2x" />

      <source media="(min-width: 768px)"
              srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/728x90.png, https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/728x90%402-left.png 2x" />

      <source media="(min-width: 340px)"
              srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/336x280.png, https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/336x280%402.png 2x" />

      <img srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/300x250.png, https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/300x250%402.png 2x"
           src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/255716/300x250.png" />
    </picture>
  </div>
</div>
<!-- Responsive leaderboard -->

<main class="h-screen">
  <div class="container mx-auto p-4">
    <div class="flex flex-wrap justify-between">
      <div class="article 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>
  </div>
</main>

picture {
  display: block;
  width: 100%;
  height: auto;
}

.responsive-ad {
  width: 300px;
  height: 250px;
}

@media (min-width: 340px) {
  .responsive-ad {
    width: 336px;
    height: 280px;
  }
}

@media (min-width: 768px) {
  .responsive-ad {
    width: 728px;
    height: 90px;
  }
}

@media (min-width: 1024px) {
  .responsive-ad {
    width: 970px;
    height: 250px;
  }
}

const node = document.querySelector('.article');
[...Array(5)].forEach(_ => node.parentNode.insertBefore(node.cloneNode(true), node));