JSFiddle - React, Tailwind, and code Playground

by Jerome

HTML

<body>



 

  <div>

  <input id="one" name="multiples" type="radio" value="1">
      <label for="one" class="img" onclick><img alt="Button2nav" src="http://prove.reflektor.ws/assets/button2nav-27974e9a9d7594a83fd61159b19f4588.png" /></label>

  <input id="two" name="multiples" type="radio" value="2">
  <label for="two" onclick>2</label>

  <input id="three" name="multiples" type="radio" value="3">
  <label for="three" onclick>3</label>

  <input id="four" name="multiples" type="radio" value="4">
  <label for="four" onclick>4</label>

  <input id="five" name="multiples" type="radio" value="5">
  <label for="five" onclick>5</label>

  <input id="six" name="multiples" type="radio" value="6">
  <label for="six" onclick>6</label>

  <input id="seven" name="multiples" type="radio" value="7">
  <label for="seven" onclick>7</label>

  <input id="eight" name="multiples" type="radio" value="8">
  <label for="eight" onclick>8</label>

  <input id="nine" name="multiples" type="radio" value="9">
  <label for="nine" class="img" onclick><img alt="Button2nav" src="http://prove.reflektor.ws/assets/button2nav-27974e9a9d7594a83fd61159b19f4588.png" /></label>

  <div class="container">
    <div class="carousel">
      <img alt="Button2" src="http://prove.reflektor.ws/assets/button2-b897e5054ec3907700ee9b33cc297b6e.png" />

      <p><span class="first">R</span>eflektor : lo strumento per la gestione e la distribuzione della disponibilità di ogni struttura ricettiva.<br /><br /> Concepito per ottimizzare l'operatività. Lo strumento è stato sviluppato conteggiando i passi da svolgere in modo da massimizzare le funzioni con un minimo numero di operazioni.<br /><br />
      <b>Multi-funzionale.</b><br />
      Lo strumento permette agli stessi utenti di gestire più di una proprietà.</p>
    
      <p><b>Multi-ruoli.</b><br />
      La direzione definisce prodotti, opzioni ed informazioni sulla struttura.  Gli operatori aggiornano disponibilità e gestiscono dinamicamente i prezzi.<br...

CSS

body > div {
    width: 400px;
    margin: 50px auto;
    text-align: center;
  }

  figure {
    margin: 0;
  }

  .container {
    width: 400px;
    height: 300px;
    text-align: left;
    margin: 60px auto;
    -webkit-perspective: 1000px;
    -webkit-perspective-origin: 50% -22%;
  }

    .carousel {
      -webkit-transform-style: preserve-3d;
      -webkit-transform: translateZ(-540px);
      position: relative;
      margin: 50;
      width: 400px;
      height: 300px;
      -webkit-transition: 1s;
      padding: 0% 0;
    }

      .carousel img {
        position: absolute;
        border: 1px solid rgba(0, 0, 0, .2);
        opacity: .99;
        -webkit-transition: 1s;
        width: 400px;
        height: 300px;
        padding: 10% 5%;
        background:rgba(255,255,255,0.69);
      }

        
        .carousel img:nth-child(1) { -webkit-transform: translateZ(540px) scale(.8); }
        .carousel img:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(.8); }
        .carousel img:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(.8); }
        .carousel img:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(.8); }
        .carousel img:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(.8); }
        .carousel img:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(.8); }
        .carousel img:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(.8); }
        .carousel img:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(.8); }

      .carousel p {
        position: absolute;
        border: 1px solid rgba(0, 0, 0, .8);
        padding: 15px;
        opacity: .7;
        -webkit-transition: 1s;
        width: 400px;
        height: 300px;
        background:rgba(255,255,255,0.9);
        padding: 10% 5%;
      }
        .carousel p:nth-child(1) { -webkit-transform: translateZ(540px) scale(.8);...