JSFiddle - React, Tailwind, and code Playground

by cheack

HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <header>
      <div></div>
    </header>
    <main>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </main>
  </body>
</html>

CSS

body {
  margin: 0;
}

header {
  height: 100px;
  position: sticky;
  top: 10px;
}

header div {
  background-color: #000;
  height: 32px;
  margin: 68px 100px 0 100px;
}

main {
  background-color: #00f;
  height: 5000px;
}

main div {
  background-color: #fff;
  height: 16px;
  margin: 24px 50px;
}

header:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: transparent;
  z-index: -1;
}

header:target:before {
  background-color: red;
}

header:after {
  content: "";
  display: block;
  height: 1px;
  margin-top: -1px;
}