JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<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>
    
     ...

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;
    perspective: 1000px;
    perspective-origin: 50% -22%;
  }

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

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

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

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