JSFiddle - React, Tailwind, and code Playground

by c_vilander

HTML

<div class="button_one">
    <p>Bounce</p>
</div>

<div class="button_three">
    <p>Bubble</p>
</div>

<div class="wrapper">
    <div class="front">
        <p>Flip</p>              
    </div>
    <div class="back">
        <p>Back</p>              
    </div>
</div>

<div class="button_four">
    <p></p>
<div class="ball">
    <p>Mjao</p>
</div>
    
</div>

CSS

body {
    font-family: Arial, sans-serif;
    font-weight: 200;    
    line-height: 39px;
    font-size: 22px;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.6);
    color: #fff;
    background: #e8e8e8;
}

/* Button Nr One Start */

.button_one {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 40px;
    margin: 0;
    padding: 0;
    background: #bd378f;
    text-align: center;
    border-radius: 50px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.4);
}

.button_one:hover {
    -webkit-animation: bounce 0.8s forwards;
            animation: bounce 0.8s forwards;
}

@-webkit-keyframes bounce {
    0% { -webkit-transform: scale(1.0); }
   10% { -webkit-transform: scale(1.2); }
   20% { -webkit-transform: scale(1.3); }    
   30% { -webkit-transform: scale(1.2); }
   40% { -webkit-transform: scale(1.0); } 
   50% { -webkit-transform: scale(1.1); }
   60% { -webkit-transform: scale(1.0); } 
   70% { -webkit-transform: scale(1.05);}
   80% { -webkit-transform: scale(1.0); } 
   90% { -webkit-transform: scale(1.02);}    
  100% { -webkit-transform: scale(1.0); }    
}

@keyframes bounce {
    0% { transform: scale(1.0); }
   10% { transform: scale(1.2); }
   20% { transform: scale(1.3); }    
   30% { transform: scale(1.2); }
   40% { transform: scale(1.0); } 
   50% { transform: scale(1.1); }
   60% { transform: scale(1.0); } 
   70% { transform: scale(1.05);}
   80% { transform: scale(1.0); } 
   90% { transform: scale(1.02);}    
  100% { transform: scale(1.0); }    
}

/* Button Nr One End */

/* Button Nr Two Start */

.button_three {
    position: absolute;
    top: 50px;
    left: 300px;
    width: 200px;
    height: 40px;
    margin: 0;
    padding: 0;
    background: #bd378f;
    text-align: center;
    border-radius: 50px;
}

.button_three:hover > p {
    -webkit-animation: bounce 0.8s forwards;
}

/* Button Two End */

/* Button Three Start */

.wrapper {
    position: absolute;
    top: 50px;
    left: 550px;    
   ...