JSFiddle - React, Tailwind, and code Playground

by codepo8

HTML

<section class="gallery">
    <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>
    <article id="one" class="target">
      <figure>
        <img src="http://placekitten.com/g/300/200" alt="Kitten 1">
      </figure>
    </article>
    <article id="two" class="target">
      <figure>
        <img src="http://placekitten.com/g/300/201" alt="Kitten 2">
      </figure>
    </article>
    <article id="three" class="target">
      <figure>
        <img src="http://placekitten.com/g/301/200" alt="Kitten 3">
      </figure>
    </article>
    <article id="four" class="target">
      <figure>
        <img src="http://placekitten.com/g/301/201" alt="Kitten 4">
      </figure>
    </article>
  </section>

CSS

* { 
    margin: 0;
    padding: 0;
  }
  body {
    font-size: 15px;
    font-family: helvetica, arial, sans-serif;
    padding: 1em;
  }
  footer, section, article, header, aside, figure, nav {
    display: block;
  }
  nav {
    padding: 20px;
    z-index: 20;
    top: 0px;
    left: 0;
    background: #fff;
    position: absolute;
  }

  nav li {
    display: inline;
    padding-right: 1em;
  }
  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 {
    clear: both;
    font-size: 10px;
  }
  footer a {
    color: #000;
  }
  
  @media screen and (min-width: 400px) {

  .gallery {
    position: relative;
    height: 280px;
    width: 340px;
    overflow: hidden;
  }
  .target {
    position: absolute;
    top: 60px;
    left: -320px;
    height: 220px;
    width: 300px;
    -webkit-transition: 1s;
       -moz-transition: 1s;
        -ms-transition: 1s;
         -o-transition: 1s;
            transition: 1s;

 }
  .target:target {
    top: 60px;
    left: 20px;
  }
}