JSFiddle - React, Tailwind, and code Playground

by seevis

HTML

<div id="slider1" class="csslider">
  <input type="radio" name="slides" id="slides_1" />
  <input type="radio" name="slides" id="slides_2" checked />
  <input type="radio" name="slides" id="slides_3" />
  <input type="radio" name="slides" id="slides_4" />
  <ul>
    <li>
      <h1>Say hello to CSS3</h1>
      <p>CSSlider is lightweight & easy to use slider. No JS - pure CSS.</p>
    </li>
    <li>
      <img src="./themes/stones.jpg" />
    </li>
    <li>
      <div id="bg">
        <div>
          <h1>CSS Events</h1>
          <p>When slide 3 is reached - play CSS animation!</p>
        </div>
      </div>
    </li>
    <li class="scrollable">
      <h1>Lots of text</h1>
      <h2>Scrollable one</h2>
      <div class="scrollable">
			
        Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi, semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce
        vel sapien elit in malesuada mi, semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi, semper id sollicitudin
        urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi, semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida
        vel pretium tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi, semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus. Lorem ipsum dolor sit amet, consectetur
        adipiscing elit fusce vel sapien elit in malesuada mi, semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
			</div>
    </li>
  </ul>
  <div class="arrows">
    <label...

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway:400,700|Lato);
        * {
          margin: 0;
          padding: 0;
        }
        
        ::-webkit-scrollbar {
          width: 2px;
          background: rgba(255, 255, 255, 0.1);
        }
        
        ::-webkit-scrollbar-track {
          background: none;
        }
        
        ::-webkit-scrollbar-thumb {
          background: rgba(74, 168, 0, 0.6);
        }
        
        ul,
        ol {
          padding-left: 40px;
        }
        
        html,
        body {
          height: 720px;
          width: 400px;
          text-align: center;
          font: 400 100% 'Raleway', 'Lato';
          background-color: #282828;
          color: #CCC;
        }
        
        h1 {
          font-weight: 700;
          font-size: 310%;
        }
        
        h2 {
          font-weight: 400;
          font-size: 120%;
          color: #71AD37;
        }
        
        #slider1 {
          margin: 20px;
          font-family: 'Lato';
        }
        
        #slider1 > ul > li:nth-of-type(3) {
          background: url(./themes/fruit.jpg);
        }
        
        #slider1 > input:nth-of-type(3):checked ~ ul .bg {
          width: 80%;
          padding: 22px;
          -moz-transition: .5s .5s;
          -o-transition: .5s .5s;
          -webkit-transition: .5s .5s;
          transition: .5s .5s;
        }
        
        #slider1 > input:nth-of-type(3):checked ~ ul .bg div {
          -moz-transform: translate(0);
          -ms-transform: translate(0);
          -o-transform: translate(0);
          -webkit-transform: translate(0);
          transform: translate(0);
          -moz-transition: .5s .9s;
          -o-transition: .5s .9s;
          -webkit-transition: .5s .9s;
          transition: .5s .9s;
        }
        
        .bg {
          color: #000;
          padding: 22px 0;
          position: absolute;
          left: 0;
          top: 16%;
          height: 20%;
 ...