JSFiddle - React, Tailwind, and code Playground

by lukas_li

HTML

<template>
    <style>
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
        }
        #slider {
            max-width: 600px;
            text-align: center;
            margin: 0 auto;
        }
        #overflow {
            width: 100%;
            overflow: hidden;
        }
        #slides .inner {
            width: 400%;
        }
        #slides .inner {
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -o-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
            -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
            -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
            -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
            transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
            -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
            -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
            -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
            -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
            transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
        }
        #slides img {
            width: 25%;
            float: left;
        }
        #slide1:checked ~ #slides .inner {
            margin-left: 0;
        }
        #slide2:checked ~ #slides .inner {
            margin-left: -100%;
        }
        #slide3:checked ~ #slides .inner {
            margin-left: -200%;
        }
        #slide4:checked ~ #slides .inner {
            margin-left: -300%;
        }
        input[type="radio"] {
      ...