JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<header>
  <h1>Header</h1>
  <nav>
    <ul>
      <li><a href="#one">One</a></li>
      <li><a href="#two">Two</a></li>
      <li><a href="#three">Three</a></li>
      <li><a href="#four">Four</a></li>
    </ul>
  </nav>
</header>
<main>
  <h2>Main</h2>
  <p>...with some dummy text to fill the box.</p>
</main>
<footer>
  <h2>Footer</h2>
  <p>...with some dummy text to fill the box.</p>
  <article id="one" class="target">
    <figure>
      <img src="//placekitten.com/g/300/200" alt="Kitten 1">
    </figure>
  </article>
  <article id="two" class="target">
    <figure>
      <img src="//placekitten.com/g/300/201" alt="Kitten 2">
    </figure>
  </article>
  <article id="three" class="target">
    <figure>
      <img src="//placekitten.com/g/301/200" alt="Kitten 3">
    </figure>
  </article>
  <article id="four" class="target">
    <figure>
      <img src="//placekitten.com/g/301/201" alt="Kitten 4">
    </figure>
  </article>
</footer>

CSS

* { 
  margin: 0;
  padding: 0;
}
header, nav, main, footer, article, figure {
  display: block;
}
header,main,footer {
  padding:.75em;
}
header,footer {
  background:#abc;
}
main {
  background:#cde;
}
nav {
  padding: 20px;
  z-index: 20;
  position: relative;
}
nav li {
  display: inline;
  padding-right: 1em;
}
nav li:last-child {
  padding-right:0
}
nav a {
  background: #369;
  padding: 5px 10px;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
nav a:hover, nav a:focus {
  background: #036;
}
footer {
  position:relative;
  min-height:280px
}
.target {
  position: absolute;
  top: 60px;
  left: -320px;
  height: 220px;
  width: 300px;
  transition: 1s;
}
.target:target {
  left: 20px;
}