JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html>

<head>

<title>Pure CSS Slideshow</title>
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width = device-width;"> 

<!-- Should work in Chrome, Safari, Opera and Firefox 4. 
     Graceful Degradation in older Versions (no transition effects).
     Except Internet Explorer of course. -->

<!-- Every page has its own #url for direct links.
     Check your browserhistory. Its not broken. -->

    <link rel="stylesheet" href="css/style.css">


<!-- This is for the ipad. Check it there too. -->

<script> 
 function BlockMove(event) {
  // Tell Safari not to move the window.
  event.preventDefault() ;
 }
</script> 


    


</head>
<body ontouchmove="BlockMove(event);"> 


<!-- These divs are used for anchor-jumps with the pseudoclass :target -->

<div id="a1">
 <div id="a2">
  <div id="a3">
    <div id="a4">


   <!-- Top Navigation. Ya, tables are evil. -->

   <table> 
    <tr>     
     <td><a href="#a1" id="p1">1</a></td> 
     <td><a href="#a2" id="p2">2</a></td> 
     <td><a href="#a3" id="p3">3</a></td>
     <td><a href="#a4" id="p4">4</a></td>      
    </tr> 
   </table>



   <!-- Fallback -->

   <div id="i0" class="page">

    <h1>Your browser sucks.</h1>

   </div>



   <!-- First Page #a1 -->

   <div id="i1" class="page">
   

        

    <a href="#a4" class="backbutton"></a>
    <a href="#a2" class="nextbutton"></a>

    <h1>Pure CSS Slideshow</h1>

    <img src="pure-css-slideshow-1.png">

   </div>



   <!-- Second Page #a2 -->

   <div id="i2" class="page">
   


    <a href="#a1" class="backbutton"></a>
    <a href="#a3" class="nextbutton"></a>

    <h1>Simplified Demo</h1>

    <img src="pure-css-slideshow-2.png">

   </div>



   <!-- Third Page #a3 PORTFOLIO -->

   <div id="i3" class="page ">
  

    <a href="#a2" class="backbutton"></a>
    <a href="#a4" class="nextbutton"></a>

    <h1>Check the Source Code</h1>

    <img src="pure-css-slideshow-3.png">

   </div>

   <!-- Fourth #a4 -->
   
 ...

CSS

/* Basic Styles */

* { margin: 0; padding: 0; }
body { overflow: hidden; color: #222; font-family: helvetica, arial; line-height: 1.2; } a:active { outline: none;}


.nextbutton, .backbutton { position: absolute; top: 0; height: 100%; width: 50%; }
.nextbutton { cursor: url('../img/right.png'), e-resize; right: 0; }
.backbutton { cursor: url('../img/left.png'), w-resize; left: 0; }


h1 { text-align: center; padding: 0 50px; margin-top: 150px; font-size: 50px; }


img { margin: 0 auto; display: block; margin-top: 50px;}


footer { z-index: 2; position: fixed; bottom: 60px; left: 50%; width: 600px; margin-left: -300px; text-align: center; }
footer a.link { color: #111; font-size: 15px; font-weight: bold; text-decoration: none; border-bottom: solid 2px; }
footer a.link:hover { color: red; }


/* Top Navigation.  */

table { 

display: table;
width: 100%; 
cellspacing: 0; 
border-collapse: collapse;
position: fixed;
z-index: 5000;
top: -1px;
left: 0;
right: 0;
}


table a {
font-family: helvetica, arial;
font-size: 11px;
font-weight: bold;
text-decoration: none;
color: #aaa;
display: block;
text-align: center;
margin: 0;
height:100px;
-moz-transition: all 1s; 
-webkit-transition: all 1s; 
-o-transition: all 1s; 
transition: all 1s; 
}


#a1:target #p1,
#a2:target #p2,
#a3:target #p3,
#a4:target #p4 { background-color: red; color: #fff; }

table a:hover {
background-color: #4aa44;
-moz-transition: background 0s; 
-webkit-transition: background 0s; 
-o-transition: background 0s; 
transition: background 0s; 
}








/* The Basic Style for all Pages */

.page { 
position: absolute; 
width: 100%; 
height: 100%; 
}



/* The Pages */

#i1 { left: 0%; background-color: #c6c6c6; }
#i1 { left: 100%; background-color: #fff; }
#i2 { left: 200%; background-color: #bbb; }
#i3 { left: 300%; background-color: #777; }
#i4 { left: 400%; background-color: #ccc; }


/* The Transition Effect */

.page { 
-webkit-transition: -webkit-transform 0.8s;
-moz-transition: -moz-transform...