JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    
	<h1>Pure CSS Slider</h1>
    
     <ul class="tumbs">
         <li><a href="#slide-1"><span>This is image 1</span></a></li>
         <li><a href="#slide-2"><span>This is image 2</span></a></li>
         <li><a href="#slide-3"><span>This is image 3</span></a></li>
     </ul>


    <ul class="slides">
        <li class="first" id="slide-1"><img src="https://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg">
        </li>
        <li  id="slide-2"><img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg">
        </li>
        <li  id="slide-3"><img src="http://images.bwbx.io/cms/2014-04-11/0411_hubble_970-630x420.jpg">
        </li>
    </ul>

</div>

CSS

img {
    width: 100px;
    height: 100px;
}

ul {
    list-style: none;
}

@-webkit-keyframes slide {
    0% { left: -500px; }
    100% { left: 0; }
}

ul.slides li:target {
    z-index: 100;
    position: relative;
    -webkit-animation: slide 1s;
}