JSFiddle - React, Tailwind, and code Playground

by apoucoz

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

.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, .csslider1 > .cs_arrownext {
    position: absolute;
    top: 50%;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    z-index: 5;
}
.csslider1 > .cs_arrowprev > label, .csslider1 > .cs_arrownext > label {
    position: absolute;
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    z-index: -1;
}
.csslider1 > .cs_arrowprev {
    left: 0;
}
.csslider1 > .cs_arrownext {
    right: 0;
}
.csslider1 > .slide:checked ~ .cs_arrowprev...