JSFiddle - React, Tailwind, and code Playground

HTML

<div class='csslider1 autoplay '>
    <input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide' autocomplete="off">
    <input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide' autocomplete="off">
    <input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide' autocomplete="off">
    <input name="cs_anchor1" id='cs_slide1_3' type="radio" class='cs_anchor slide' autocomplete="off">
    <input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' checked autocomplete="off">
    <input name="cs_anchor1" id='cs_pause1_0' type="radio" class='cs_anchor pause' autocomplete="off">
    <input name="cs_anchor1" id='cs_pause1_1' type="radio" class='cs_anchor pause' autocomplete="off">
    <input name="cs_anchor1" id='cs_pause1_2' type="radio" class='cs_anchor pause' autocomplete="off">
    <input name="cs_anchor1" id='cs_pause1_3' type="radio" class='cs_anchor pause' autocomplete="off">
    <ul>
        <div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;">
            <img src="http://cssslider.com/sliders/demo-8/data1/images/bmw_f800_motorcycle_cycle_transportation_sharp.jpg" style="width: 100%;">
        </div>
        <li class='num0 img'>
            <img src='http://cssslider.com/sliders/demo-8/data1/images/bmw_f800_motorcycle_cycle_transportation_sharp.jpg' alt='Bmw F-800 ' title='Bmw F-800 ' />
        </li>
        <li class='num1 img'>
            <img src='http://cssslider.com/sliders/demo-8/data1/images/dirt_bike_motorcycle_jump_autumn.jpg' alt='Motorcycle jump ' title='Motorcycle jump ' />
        </li>
        <li class='num2 img'>
            <img src='http://cssslider.com/sliders/demo-8/data1/images/motorcycle_zero_s_action_san_francisco_stunt_rider.jpg' alt='Stunt rider' title='Stunt rider' />
        </li>
        <li class='num3 img'>
            <img src='http://cssslider.com/sliders/demo-8/data1/images/dirt_bike_motocross_motorcycle_motorbike_bike.jpg'...

CSS

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  
  

  
  
  

  

  <script type="text/javascript" src="/js/lib/dummy.js"></script>

  

  

  

  
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  

  

  <style type="text/css">
    .csslider1 {
    display: inline-block;
    position: relative;
    max-width: 960px;
    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;
}
.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 > ul > li.img, .csslider1 > .cs_arrowprev, .csslider1 > .cs_arrownext, .csslider1 > .cs_bullets, .csslider1 > .cs_play_pause {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.csslider1 > .cs_arrowprev,...