JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<a href="https://twitter.com/jensonv" target="_blank" class="circleContainer linkTW" style="margin-top: 0px; opacity: 1;">                
                <div class="circleSides">
                    <div class="circleFront">
                        <span class="linkIcon"></span>
                    </div>
                    <div class="circleBack">
                        <span class="linkIcon"></span>
                    </div>    
                </div>
</a>
<a href="https://twitter.com/jensonv" target="_blank" class="circleContainer linkTW" style="margin-top: 0px; opacity: 1;">                
                <div class="circleSides">
                    <div class="circleFront">
                        <span class="linkIcon"></span>
                    </div>
                    <div class="circleBack">
                        <span class="linkIcon"></span>
                    </div>    
                </div>
            </a>

CSS

.circleFront, .circleBack {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: #0D0A08;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.circleSides {
position: absolute;
top: 3px;
left: 3px;
width: 94px;
height: 94px;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.linkTW .linkIcon {
background: url('http://jensonvaughan.com/img/socialTW.png') center center no-repeat;
}
.linkIcon {
display: block;
height: 32px;
width: 32px;
margin-top: 29px;
margin-left: 31px;
}
.circleContainer {
border: solid 1px black;
float: left;
margin-right: 40px;
width: 100px;
height: 100px;
position: relative;
background: #E99969 url('../img/circleFade.png') 0 0 no-repeat;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-perspective: 1000;
-webkit-backface-visibility:...

JavaScript

$('.circleContainer').each(function(){$(this).mouseout(function(){
    $(this).toggleClass('circleContainerOut'); 
});
});