JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<section id="article16" class="crayon article-css-16 demoTime">
                            <dl class="menu">
      
     <dt class="btnRot">Partagez</dt>
      
     <dd><a href="">...</a></dd>
     <dd><a href="">Delicious</a></dd>
     <dd><a href="">Facebook</a></dd>
     <dd><a href="">Twitter</a></dd>
      
</dl>
 
<div class="masque"></div>
<div class="ombre"></div>
</section>

CSS

#article16{
height:160px;
font-family:"TeXGyreReg",sans-serif;
font-size:1.05em;
    width:250px;
background:#627878;
overflow: hidden;
}
 
#article16 dl{
position:relative;
top:-140px;
left:50%;margin-left:-75px;
width:150px;
height:155px;
color:#324040;
text-align:center;
background:#04b3d2;
background:-webkit-linear-gradient(#04b3d2,#48dfff);
background:-moz-linear-gradient(#04b3d2,#48dfff);
background:-ms-linear-gradient(#04b3d2,#48dfff);
background:-o-linear-gradient(#04b3d2,#48dfff);
background:linear-gradient(#04b3d2,#48dfff);
border-radius:4px;
-webkit-box-shadow:0px 0px 6px rgba(0,0,0,0.7);
box-shadow:0px 0px 6px rgba(0,0,0,0.7);
-webkit-transform-origin:50% 120px;
-moz-transform-origin:50% 120px;
-ms-transform-origin:50% 120px;
-o-transform-origin:50% 120px;
transform-origin:50% 120px;
-webkit-animation:bounceOut 0.7s ease-in-out;
-moz-animation:bounceOut 0.7s ease-in-out;
-ms-animation:bounceOut 0.7s ease-in-out;
-o-animation:bounceOut 0.7s ease-in-out;
animation:bounceOut 0.7s ease-in-out;
}
 
#article16 dt{
position:absolute;
bottom:0px;
width:100%;
height:30px;
padding-top:5px;
}
 
#article16 dd{
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
width: 100%;
    padding-left:50%;
}
 
#article16 dd a{
display:block;
height:24px;
padding:3px 0px;
color:#324040;
text-decoration:none;
text-align:center;
    margin-left:40px;
    width:100%;
}
 
#article16 dd a:hover{
background:rgba(255,255,255,0.1);
}
#article16 dl:hover{
-webkit-transform:rotate(-180deg);
-moz-transform:rotate(-180deg);
-mstransform:rotate(-180deg);
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
-webkit-animation:bounceIn 0.7s ease-in-out;
-moz-animation:bounceIn 0.7s ease-in-out;
-ms-animation:bounceIn 0.7s ease-in-out;
-o-animation:bounceIn 0.7s ease-in-out;
animation:bounceIn 0.7s ease-in-out;
}
 
@-webkit-keyframes bounceIn {
from...