JSFiddle - React, Tailwind, and code Playground

HTML

<section class="crayon article-css-16 demoTime" id="article16">
    <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: 360px;
    
    font-family: "TeXGyreReg",sans-serif;
    font-size: 1.05em;
    
    background: none repeat scroll 0 0 #627878;
}
#article16 dl {
    height: 155px;
    width: 150px;
    
    position: relative;
    top: 15px;
    left: 50%;
    
    margin-left: -75px;
    
    border-radius: 4px 4px 4px 4px;
    
    background: -moz-linear-gradient(center top , #04B3D2, #48DFFF) repeat scroll 0 0 transparent;
    background: -webkit-linear-gradient(top, #04B3D2, #48DFFF) repeat scroll 0 0 transparent;          background: -o-linear-gradient(top, #04B3D2, #48DFFF) repeat scroll 0 0 transparent; 
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
    
    color: #324040;
    text-align: center;
    
    -moz-transform-origin: 50% 120px;
    -moz-transition: -moz-transform 0.7s ease-in-out 0s;
    -webkit-transform-origin: 50% 120px;
    -webkit-transition: -webkit-transform 0.7s ease-in-out 0s; 
    -o-transform-origin: 50% 120px;
    -o-transition: -o-transform 0.7s ease-in-out 0s; 
}
#article16 dt {
    height: 30px;
    width: 100%;
    
    position: absolute;
    bottom: 0;
    
    padding-top: 5px;
}
#article16 dd {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
}
#article16 dd a {
    display: block;
    height: 24px;
    
    padding: 3px 0;
    
    color: #324040;
    text-decoration: none;
}
#article16 dd a:hover {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
}
#article16 dl:hover {
    -moz-transform: rotate(-180deg);
    -moz-transition: -moz-transform 0.5s ease-in-out 0s;
    -webkit-transform: rotate(-180deg);
    -webkit-transition: -webkit-transform 0.5s ease-in-out 0s; 
    -o-transform: rotate(-180deg);
    -o-transition: -o-transform 0.5s ease-in-out 0s; 
}
#article16 .masque {
    height: 135px;
    width: 100%;
    
    position: absolute;
    top: 0;
    left: 0;
    
    z-index: 50;
    
    background: -moz-linear-gradient(center top...