JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            font-size:14px;
            -webkit-user-select:none;
        }
        ul,li{
            list-style
        }
        img{
            display: block;
            border:none;
        }
        .banner{
            position:relative;
            width:1000px;
            height:300px;
            margin:0 auto;
            overflow:hidden;
        }
        .banner .bannerInner{
            width:100%;
            height:100%;
            background:url("http://mamyukka.tank.jp/invitation/img/injacket.jpg") no-repeat center center #e1e1e1;
        }
        .banner .bannerInner div{
            position:absolute;
            width:100%;
            height:100%;
            top:0;
            left:0;
            z-index:0;
            opacity:0;
            filter:alpha(opacity=0);
        }
        .banner .bannerInner img{
            display:none;
            width:100%;
            height:100%s;
        }

        .banner .bannerTip{
            position:absolute;
            height:18px;
            overflow:hidden;
            right:20px;
            bottom:20px;
            z-index:10;
        }
        .banner .bannerTip li{
            float:left;
            margin-left:10px;
            width:18px;
            height:18px;
            background:lightblue;
            cursor:pointer;
            border-radius:50%;
        }
        .banner .bannerTip li.bg{
            background:red;
        }

        .banner a{
            display:none;
            position:absolute;
            top:50%;
            z-index:20;
            margin-top:-22.5px;
            width:30px;
            height:45px;
            background:url("../img/pre.png");
            opacity:0.5;
            filter:alpha(opacity=50);
        }
        .banner a:hover{
            opacity:1;
           ...