JSFiddle - React, Tailwind, and code Playground

HTML

<div class="upper-element">
       </div>
        <div class="square-items">
            <div class="square-item"><img src="https://s31.postimg.org/a76307ta3/icon1.png" alt=""></div>
        </div>
                <div class="square-items">
            <div class="square-item"><img src="https://s31.postimg.org/hofaffit7/icon2.png" alt=""></div>
        </div>
        <div class="square-items">
            <div class="square-item"><img src="https://s31.postimg.org/4ljnw5sl7/icon3.png" alt=""></div>
        </div>

CSS

* {
    margin: 0;
    padding: 0;
}
.square-items {
    padding: 5px;
    border-radius: 10px;  
    display: inline-block;
    cursor: pointer;
    margin: 5px; 
}
.square-item {
    width: 40px;
    height: 40px;
    border-radius: 10%;
    border: 2px solid #ed812b;
    overflow: hidden;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    -webkit-transform: perspective(80px);
    transform: perspective(80px);
}
.square-item img {
    position: absolute;
    top: -138px;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    -webkit-transform: perspective(220px);
    transform: perspective(220px);
}
.square-items:hover .square-item {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    background: #ed812b;
}
.square-items:first-child .square-item {
    border: 2px solid #45668e;
}
.square-items:hover:first-child .square-item {
    background: #45668e;
}
.square-items:last-child .square-item {
    border: 2px solid #dd4b39;
}
.square-items:hover:last-child .square-item {
    background: #dd4b39;
}
.square-items:hover .square-item img {
    top: 0;
}
.upper-element {
    background: #0861cd;
        width: 100%;
        height: 200px;
}