JSFiddle - React, Tailwind, and code Playground

by rpmcmerphy

HTML

<div class="out">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div>С Новым годом !</div>
  <div></div>
</div>
<div class="perep"></div>

CSS

body{
  background: url( http://wallbox.ru/wallpapers/dl/201350/1b1b539a0b2ee5abb7642f29cff1e6b1.jpg) no-repeat;
}

.out{
  width: 500px;
  height: 500px;
  background: url(http://img1.liveinternet.ru/images/attach/c/1//57/797/57797187_3328783869_180e54e641_o500x751.jpg) right center no-repeat;
  margin-left: 50%;
  opacity: 0.7;
}

.out div:nth-child(1){
  width: 500px;
  height: 500px;
  background-color: transparent;
  background: url(http://www.gartlab.net/uploads/posts/2012-12/1354988717_500x500_9.jpg) no-repeat;
  transition-duration: 3s;
}

.out div:nth-child(2){
  border: 50px solid transparent;	 
  border-bottom: 50px solid green;
  position: relative;
  left: 50%;
  border-radius: 0;
  bottom: 450px;
  width: 0;
  box-shadow: none;
  }

.out div:nth-child(3){
  border: 70px solid transparent;	 
  border-bottom: 70px solid green;
  position: relative;
  left: 46%;
  border-radius: 0;
  bottom: 520px;
  width: 0;
  box-shadow: none;
}

.out div:nth-child(4){
  border: 90px solid transparent;	 
  border-bottom: 90px solid green;
  position: relative;
  left: 42%;
  border-radius: 0;
  bottom: 610px;
  width: 0;
  box-shadow: none;
}

.out div:nth-child(5){
  width: 30px;
  height: 50px;
  background: brown;
  position: relative;
  left: 57%;
  border-radius: 0;
  bottom: 610px;
}

.out div:nth-child(6){
  position: relative;
  left: 40%;
  border-radius: 0;
  bottom: 950px;
  box-shadow: none;
  color: white;
  font-size: 2em;
  font-style: italic;
  text-shadow: 0 0 25px white;
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  transition-duration: infinity;
}



.out, .out div{
  border-radius: 0 5px 5px 0;
  box-shadow: 0 3px 10px black; 
}

.out:hover div:nth-child(1){
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transform: translateX(-20px) rotateY(-180deg);
  transform: translateX(-20px) rotateY(-180deg) ;
  cursor: pointer;
  transition-duration: 4s;
}

.perep{
  width: 55px;
  height: 500px;
  position:...