JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  

  
  <link rel="stylesheet" href="../css/style.css" media="screen" />


    <style media="screen">
    
    .container {
      width: 210px;
      height: 700px;
      position: relative;
      margin: 0 auto;
      border: 1px solid #CCC;
      -webkit-perspective: 1100px;
         -moz-perspective: 1100px;
          -ms-perspective: 1100px;
           -o-perspective: 1100px;
              perspective: 1100px;
    }
    
    #carousel {
      width: 100%;
      height: 100%;
      position: absolute;
       top:0; 
      
      -webkit-transform:translateX(-440px) translateY(-90px) translateZ( -1320px );
         -moz-transform:translateX(-440px) translateY(-90px) translateZ( -1320px );
          -ms-transform:translateX(-440px) translateY(-90px) translateZ( -1320px );
           -o-transform:translateX(-440px) translateY(-90px) translateZ( -1320px );
              transform:translateX(-440px) translateY(-90px) translateZ( -1320px );
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
          -ms-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
          -ms-transition: -ms-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
    }
    #carousel:hover {
        }
    #carousel figure {
      display: block;
      position: absolute;
      width: 960px;
      overflow:hidden;
      height: 700px;
      left: 10px;
      top: 10px;
      border: 2px solid black;
      line-height: 116px;
      font-size: 80px;
      font-weight: bold;
      color: white;
      text-align: center;
    }
    
    #carousel figure:nth-child(1) { background: hsla(   0, 100%, 50%, 0.8 ); }
    #carousel figure:nth-child(2) { background: hsla(  40, 100%, 50%, 0.8 ); }
   ...