JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Секс</title>
  <style>
* {
  margin: 0px;
  padding: 0px;
}

#slideshow {
	margin: 50px auto;
	position: relative;
	width: 400px;
}

ul {
  list-style: none;
}

li {
	float: left;
	overflow: hidden;
	margin: 0 20px 0 0;

}

li a {
	color: #222;
	text-decoration: none;
	font: 15px/1 Helvetica, sans-serif;

	-webkit-transition: color 0.5s ease;
	   -moz-transition: color 0.5s ease;
	     -o-transition: color 0.5s ease;
	    -ms-transition: color 0.5s ease;
	        transition: color 0.5s ease;
}

li a:hover {
	color: #50b0df;
}

li img {
  position: absolute;
  top: 50px;
  left: 0;
  z-index: -1;

  -webkit-transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
       -o-transition: opacity 1s ease-in-out;
      -ms-transition: opacity 1s ease-in-out;
          transition: opacity 1s ease-in-out;

}

li img:target {
	z-index: 1;
}
li img:not(:target) {
	opacity: 0;
}
</style>
</head>
<body>


<div id="slideshow">
  <ul>
    <li><a href="#one">One</a><img id="one" src="http://lorempixum.com/400/300/city/5"/></li>
    <li><a href="#two">Two</a> <img id="two" src="http://lorempixum.com/400/300/city/4"/></li>
    <li><a href="#three">Three</a> <img id="three" src="http://lorempixum.com/400/300/city/3"/></li>
    <li><a href="#four">Four</a> <img id="four" src="http://lorempixum.com/400/300/city/2"/></li>
    <li><a href="#five">Five</a> <img id="five" src="http://lorempixum.com/400/300/city/1"/></li>
  </ul>
</div>
</body>
</html>