JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<body style="background-color:#eeeeee; margin: auto; text-align: center;">
<!-- Start cssSlider.com -->
	<div class='csslider1 autoplay '>
  <input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide'>
  <input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide'>
  <input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide'>
  <input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' checked>
  <input name="cs_anchor1" id='cs_pause1' type="radio" class='cs_anchor'>
  <ul>
    <div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;">
      <img src="http://cssslider.com/sliders/pen/images/buns.jpg" style="width: 100%;">
    </div>
    <li class='num0 img'>
      <a href="http://cssslider.com" target=""><img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Buns' title='Buns' /> </a>
    </li>
    <li class='num1 img'>
      <a href="http://cssslider.com" target=""><img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Croissant' title='Croissant' /> </a>
    </li>
    <li class='num2 img'>
      <a href="http://cssslider.com" target=""><img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Lemon pie' title='Lemon pie' /> </a>
    </li>

  </ul>
  <div class='cs_description'>
    <label class='num0'>
				<span class="cs_title"><span class="cs_wrapper">Buns</span></span>
			</label>
    <label class='num1'>
				<span class="cs_title"><span class="cs_wrapper">Croissant</span></span>
			</label>
    <label class='num2'>
				<span class="cs_title"><span class="cs_wrapper">Lemon pie</span></span>
			</label>
  </div>

  <div class='cs_arrowprev'>
    <label class='num0' for='cs_slide1_0'></label>
    <label class='num1' for='cs_slide1_1'></label>
    <label class='num2' for='cs_slide1_2'></label>
  </div>
  <div class='cs_arrownext'>
    <label class='num0' for='cs_slide1_0'></label>
    <label class='num1' for='cs_slide1_1'></label>
    <label...

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese);
@font-face {
	font-family: "demurecontrols";
	src: url("http://cssslider.com/sliders/pen/demurecontrols.eot?cssslidertheme=demure");
	src: url("http://cssslider.com/sliders/pen/demurecontrols.eot#iefix?cssslidertheme=demure") format("embedded-opentype"),
			url("http://cssslider.com/sliders/pen/demurecontrols.woff?cssslidertheme=demure") format("woff"),
			url("http://cssslider.com/sliders/pen/demurecontrols.ttf?cssslidertheme=demure") format("truetype"),
			url("http://cssslider.com/sliders/pen/demurecontrols.svg#demure?cssslidertheme=demure") format("svg");
	font-weight: normal;
	font-style: normal;
}

.text-1 {
  font-family:Roboto;
}
.text-1 a{
  color: #000000;
  text-decoration: none;
}
.csslider1 {
	display: inline-block;
	position: relative;
	max-width: 480px;
	
	width: 100%;
	margin-top: 10px;
}
.csslider1 > .cs_anchor {
	display: none;
}
.csslider1 > ul {
	position: relative;
	z-index: 1;
	font-size: 0;
	line-height: 0;
	margin: 0 auto;
	padding: 0;
	
	overflow: hidden;
	white-space: nowrap;
}
.csslider1 > ul > li.img img {
	width: 100%;
}
.csslider1 > ul > li.img {
	font-size: 0pt;

	-khtml-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.csslider1 > ul > li {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-size: 15px;
	font-size: initial;
	line-height: normal;
	white-space: normal;
	vertical-align: top;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
.csslider1 .cs_lnk{
	position: absolute;
	top: -9999px;
	left: -9999px;
	font-size: 0pt;
	opacity: 0;
	filter: alpha(opacity=0);
}.csslider1 > .cs_arrowprev,
.csslider1 > .cs_arrownext...