JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid nisi natus, iste, aperiam pariatur fuga reprehenderit eveniet unde odit quod optio laboriosam, soluta minima illum voluptas, voluptatum. Facilis, voluptatum, natus!</p>

<span>
  <div id="img1">img1</div>
  <div id="img2">img2</div>
  <div id="img3">img3</div>
</span>
<a href="#img1">img1</a>
<a href="#img2">img2</a>
<a href="#img3">img3</a>

CSS

:target {
   border: 5px solid blue;
   padding: 0;
}
div {
  height: 200px;
  width: 400px;
  border: 5px solid transparent;
  box-sizing: border-box;
  position:absolute;
  left: 0;
  padding: 50px 100px;
  background: #FFF;
}
#img2 {
  left: 400px;
}
#img3 {
  left: 800px;
}
span {
  display: block;
  height: 200px;
  overflow: hidden;
  width: 400px;
  position: relative;
}