JSFiddle - React, Tailwind, and code Playground

by HarmonicApps

HTML

<script src="http://prove.reflektor.ws/assets/cssregions.js"></script>
<link rel="stylesheet" href="http://prove.reflektor.ws/assets/home_ff-5e94f58eebd6dfb3d6aa5b90260884d8.css">
<script src="http://prove.reflektor.ws/assets/home_ff-abf23eaad6b08beb2e383950b661b4cf.js"></script>
<script src="//cdn.jsdelivr.net/modernizr/2.8.2/modernizr.min.js"></script>
-<section id="options">
    <nav id="navigation">
      <button id="previous" class="btn" data-increment="-1">Precedente</button>
      <button id="next" class="btn" data-increment="1">Successiva</button>
    </nav>
</section>
<section class="container">
  <div style="transform: translateZ(-549px) rotateY(400deg);" id="carousel">
    <figure class="cover"></figure>
    <figure style="" class="region"><div style="" id="content"> <br><br><br>
  <p><span class="first">R</span>eflektor : lo strumento per la gestione e la distribuzione della disponibilità di ogni struttura ricettiva.</p>	
  <p>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.</p></div></figure>
    <figure style="" class="region"><div style="" id="content"><p><b>Multi-funzionale. </b></p>
  <p>Lo strumento permette agli stessi utenti di gestire più di una proprietà.</p>
  <p><b>Multi-ruoli.</b></p>
  <p>La direzione definisce prodotti, opzioni ed informazioni sulla struttura.  Gli operatori aggiornano disponibilità e gestiscono dinamicamente i prezzi.</p></div></figure>
    <figure style="" class="region"><div style="" id="content"><p><b>Multi-canali. </b></p>
  <p>La disponibilità può essere indirizzata a diversi canali,  oltre al sito in proprio.  Raggruppamenti di strutture e servizi - organizzati su base territoriale, tematica o per circuiti - possono ormai essere nuovi punti di prenotazione per la struttura ricettiva.</p>
  <p><b>Gestione stanze.</b></p>
  <p>Definite dalla loro capacità ricettive, le stanze...

CSS

#carousel .cover {
  background: url(http://prove.reflektor.ws/assets/button2-b897e5054ec3907700ee9b33cc297b6e.png) rgba(255, 255, 255, 0.47) no-repeat;
}
#carousel figure, #carousel .region {
  display: block;
  position: absolute;
  width: 380px;
  height: 280px;
  left: 10px;
  top: 10px;
  color: #333;
  background: #fff;
  padding: 10px;
  border: 1px solid #eee;
}

#carousel figure:nth-child(1), #carousel .region:nth-child(1) {
  transform: rotateY(0deg) translateZ(549px);
}

#carousel figure:nth-child(2), #carousel .region:nth-child(2) {
  transform: rotateY(40deg) translateZ(549px);
}

#carousel figure:nth-child(3), #carousel .region:nth-child(3) {
  transform: rotateY(80deg) translateZ(549px);
}

#carousel figure:nth-child(4), #carousel .region:nth-child(4) {
  transform: rotateY(120deg) translateZ(549px);
}

#carousel figure:nth-child(5), #carousel .region:nth-child(5) {
  transform: rotateY(160deg) translateZ(549px);
}

#carousel figure:nth-child(6), #carousel .region:nth-child(6) {
  transform: rotateY(200deg) translateZ(549px);
}

#carousel figure:nth-child(7), #carousel .region:nth-child(7) {
  transform: rotateY(240deg) translateZ(549px);
}

#carousel figure:nth-child(8), #carousel .region:nth-child(8) {
  transform: rotateY(280deg) translateZ(549px);
}

#carousel figure:nth-child(9), #carousel .region:nth-child(9) {
  transform: rotateY(320deg) translateZ(549px);
}