JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 & HTML Slider</title>
<link href="sliderstyle.css" type="text/css" rel="stylesheet">
</head>
 
<body>
<h1>Pure CSS3 & HTML Slider</h1>
   <div class="slider"> 
        <input type="radio" id="control1" name="controls" checked="checked"/>
        <label for="control1"></label>
        <input type="radio" id="control2" name="controls"/>
        <label for="control2"></label>
        <input type="radio" id="control3" name="controls"/>
        <label for="control3"></label>
        <input type="radio" id="control4" name="controls"/>
        <label for="control4"></label>
        <input type="radio" id="control5" name="controls"/>
        <label for="control5"></label>
        <div class="sliderinner">
            <ul>
                <li>
                    <img src="http://www.blogohblog.com/labs/css3-slider/images/1.jpg" />
                    <div class="description">
 
                        <div class="description-text">
                            <h2>Slideshow Title 1</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="http://www.blogohblog.com/labs/css3-slider/images/2.jpg" />
                    <div class="description">
 
                        <div class="description-text">
                            <h2>Slideshow Title 2</h2>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                        </div>
                    </div>
                </li>
                <li>
                    <img src="http://www.blogohblog.com/labs/css3-slider/images/3.jpg" />
                    <div class="description">
 
                        <div class="description-text">
                           ...

CSS

@import url(http://fonts.googleapis.com/css?family=Archivo+Narrow);
 
* { margin: 0; padding: 0; }
 
body {background-color:#666;}
h1 {color:#333; text-shadow:1px 1px #999; font-size:40px; font-family:Archivo Narrow; margin:40px; text-align:center;}
.slider {
    display: block;
    height: 320px;
    min-width: 260px;
    max-width: 640px;
    margin: auto;
    margin-top: 20px;
    position: relative;
}
 
.sliderinner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
 
.sliderinner>ul {
    list-style: none;
    height: 100%;
    width: 500%;
    overflow: hidden;
    position: relative;
    left: 0px;
    -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}
 
.sliderinner>ul>li {
    width: 20%;
    height: 320px;
    float: left;
    position: relative;
}
 
.sliderinner>ul>li>img {
    margin: auto;
    height: 100%;
}
 
.slider input[type=radio] {
    position: absolute;
    left: 50%;
    bottom: 15px;
    z-index: 100;
    visibility: hidden;
}
 
.slider label {
    position: absolute;
    left: 50%;
    bottom: -45px;
    z-index: 100;
    width: 12px;
    height: 12px;
    background-color:#ccc;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    -o-transition: background-color .2s;
    transition: background-color .2s;
}
 
.slider input[type=radio]#control1:checked~label[for=control1] { background-color: #333; }
.slider input[type=radio]#control2:checked~label[for=control2] { background-color: #333; }
.slider...