JSFiddle - React, Tailwind, and code Playground

by c_vilander

HTML

<div class="wrapper">

	<div class="container">
		<div id="slide1"><p>Slide One</p></div>
		<div id="slide2"><p>Slide Two</p></div>
		<div id="slide3"><p>Slide Three</p></div>
  
		<div class="navigation">
		<div class="btn">
		<a href="#slide1">Slide 1</a></div>
		<div class="btn">	
		<a href="#slide2">Slide 2</a></div>    
		<div class="btn">
		<a href="#slide3">Slide 3</a></div>
		</div>
	</div>  
  
</div>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 100;
    font-size: 100%;
    background: #888;
    -webkit-transform: translate3D(0, 0, 0);
}

#slide1, #slide2, #slide3 {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
}

p {
    font-family: Garamond, Times, serif;
    font-size: 75px;
    text-align: center;
    letter-spacing: 5px;
    color: #fff; 
    margin: 0;
    padding: 60px 0px 0px 0px;
}

.wrapper {
  	width: 500px;
	margin: 0 auto;	
}

.container {
	position: relative;
	top: 0;
	left: 0;
	width: 500px;
	height: 200px;
	margin: 0;
	padding: 0;
    background: #282929;
    box-shadow: 0px 0px 25px rgba(0,0,0,0.7);
    border: 1px solid #8d9393;
}

.navigation {
	position: absolute;
	bottom: -25px;
	left: 80px;
	margin: 0;
	padding: 0;
}

.btn {
    float: left;
    margin: 5px;
    width: 100px;
    height: 40px;
    text-align: center;
    background: #282929;
    border: 1px solid #8d9393;
    -webkit-transition: 0.1s ease-in;
            transition: 0.1s ease-in;
}

.btn a {
    color: white;
    text-decoration: none;
    line-height: 40px;
    letter-spacing: 2px;
    font-size: 12px;
}

.btn:hover {
    -webkit-transition: 0.1s ease-in;
            transition: 0.1s ease-in;
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
}


#slide1:target, #slide2:target, #slide3:target {
	-webkit-animation: slide 1.5s ease-in-out forwards;
	        animation: slide 0.4s ease-in-out forwards;
}

@-webkit-keyframes slide {
    0% { -webkit-transform: scale(0.0); opacity: 1;}
   40% { -webkit-transform: scale(1.0); opacity: 1;}
   50% { -webkit-transform: scale(0.8); opacity: 1;}
   60% { -webkit-transform: scale(1.0); opacity: 1;} 
   70% { -webkit-transform: scale(0.9); opacity: 1;}
   80% { -webkit-transform: scale(1.0); opacity: 1;} 
   90% { -webkit-transform: scale(0.95);opacity: 1;}    
  100% { -webkit-transform: scale(1.0); opacity: 1;}   
}

@keyframes...