JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="masthead">
  <div class="masthead__utility">
    utility nav
  </div>
  <div class="masthead__primary">
    primary nav
  </div>
  <div class="masthead__alert">
    an alert
  </div>
</div>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi rem adipisci consequatur cupiditate, iure voluptatum assumenda aliquid error aperiam. Vel, praesentium possimus officia debitis iure, tempora asperiores necessitatibus odio illum nemo suscipit ea! Nisi excepturi ut aperiam recusandae nostrum, tempore iusto ratione numquam quaerat delectus praesentium temporibus nesciunt aspernatur quo!</p>
<p>At dicta inventore magnam sequi non quae, consequatur, nulla vitae atque culpa obcaecati odit minima voluptatum natus molestias iusto exercitationem ipsum sint praesentium est fugiat quibusdam. Earum commodi facere doloremque adipisci tempore fugit omnis est quaerat quia, incidunt ab iste! Optio eos nemo, harum velit quasi quod ea alias consectetur!</p>
<p>Porro, aperiam impedit optio eum laborum molestias, numquam ad, omnis eveniet iusto ipsa incidunt earum corrupti repudiandae recusandae. Sunt illum esse dolorem ad reiciendis non consectetur architecto, quidem maxime sed deleniti, vel officiis consequatur ipsam facere asperiores ratione adipisci dicta. Quos nesciunt laborum asperiores iusto magnam. Qui, amet, maxime. Quos.</p>
<p>Aliquid, nam tenetur consectetur sit praesentium adipisci unde, dolorum harum in ex fugit quas iusto ducimus quidem, officiis minus non eos, deserunt aut illo ratione sunt facere sequi reiciendis! Pariatur minima quos repudiandae, error ad vitae ducimus quas tempore, rerum placeat perferendis modi ex. Voluptatum necessitatibus sunt dolorem non voluptas.</p>
<p>Voluptatum temporibus facilis eaque recusandae sint beatae. Quibusdam soluta aliquid molestias reprehenderit, labore veniam deserunt voluptas. Dolorem molestiae iusto consequuntur quam dolorum nisi eos aliquid dolor, explicabo laboriosam tempore minus corporis fugiat...

CSS

body {
  line-height: 1.5;
  background-color: #ccc;
}

p {
  margin: 0 auto 2rem;
  max-width: 55em;
}
main {
  background-color: white;
}

.masthead {
  display: contents;
}
.masthead__utility,
.masthead__primary,
.masthead__alert {
  padding: .618rem 1rem;
}

.masthead__primary {
  background: #afa;
  position: sticky;
  top: 0;
}