JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<header>
  I am a fixed header
  
  <a href="#anchor1">Anchor 1</a>
  <a href="#anchor2">Anchor 2</a>
</header>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor eveniet aperiam minima voluptate aliquam? Dolorum distinctio nostrum commodi libero asperiores cum sint quis earum modi quae atque maiores sed facilis obcaecati consequatur corporis neque autem fuga illum, sit, magnam ad fugiat quisquam, eius. Ad repellat illo officiis eum rerum dicta.</p>
<p>Dicta ex fugiat vero minima deleniti, exercitationem voluptatum, tempore, ab perferendis, laborum cupiditate! Consequatur quae porro sint animi dolore officia eos quisquam, incidunt ea aspernatur voluptas. Quo, voluptates perspiciatis nisi dolores. Repellendus voluptatum iusto omnis, et distinctio architecto, expedita voluptatem aperiam, alias inventore consequuntur culpa assumenda consectetur in enim ullam.</p>
<p>Nemo, fuga quos eligendi neque soluta harum ullam sed cum quod voluptas labore debitis, deserunt maxime. Fugit numquam praesentium magni sed, porro quod. Sit aut ab, fugiat aliquid. Reiciendis, alias accusantium assumenda suscipit optio? Perferendis esse, corrupti aspernatur asperiores itaque architecto nemo rerum blanditiis quae modi voluptatibus quaerat odit facere.</p>
<p>Esse ullam quisquam officia cum repudiandae atque dicta illum nobis at accusamus laborum excepturi, provident laboriosam obcaecati explicabo laudantium minima consequatur aspernatur est, vel assumenda quasi rem dignissimos! Incidunt, modi ullam quidem minus, voluptatum distinctio ipsam adipisci, saepe possimus debitis aperiam commodi, maiores aliquam dolorum amet quaerat nesciunt eligendi. Blanditiis.</p>
<p>Velit eligendi blanditiis officia obcaecati voluptates dolorem quam minima sunt aliquam repellat possimus accusantium assumenda natus omnis, molestias. Incidunt, esse voluptates tempore architecto quia adipisci voluptas at dolorem aspernatur eum, earum repudiandae, nisi deleniti asperiores rerum accusamus, iure...

CSS

header {
  position: fixed;
  background: rgba(0, 0, 255, .25);
  left: 0;
  right: 0;
  top: 0;
  height: 5rem;
}

body {
  padding-top: 5rem;
}

.fix-anchor {
  padding-top: 5rem;
  margin-top: -5rem;
}

h2 {
  background-color: rgba(0,255,0,.25);
}

p, h2 {
  padding: 0 2rem;
}