JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flipanimation">
    <div class="cI iconBack" style="background: #0B57CF;">
        <svg style="fill: #fff; " xml:space="preserve" enable-background="new 0 0 88 76" viewBox="0 0 88 76" height="36px" width="36px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1">
            <g transform="translate(0.000000,72.000000) scale(0.100000,-0.100000)" fill="#fff" stroke="none">
                <path d="M427 393 l-157 -158 -60 60 c-49 49 -63 58 -77 49 -9 -6 -18 -15 -20 -20 -2 -5 33 -45 77 -89 l80 -80 177 178 178 177 -20 20 -20 20 -158 -157z"></path>
            </g>
        </svg>
    </div>
    
    <div class="cI iconFront" style="background: #E631FB;">
        <span class="cT">T</span>
    </div>
</div>

CSS

.cI {
    width: 40px;
    height: 40px;
    display: inline-flex;
    position: absolute;
    justify-content: center;
    vertical-align: middle;
    align-items: center;
    text-align: center;
    line-height: 40px;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
}

.cT {
    color: #ffff;
    font-size: 20px;
}

.cI svg {
    width: 40px;
    height: 40px;
    margin-left: 4px;
    margin-top: 2px;
}

.cI.rotated > .iconBack {
    -webkit-transform: perspective( 600px ) rotateY( -180deg );
    transform: perspective( 600px ) rotateY( -180deg );
}
.cI.rotated > .iconFront {
    -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
}

JavaScript

$(".iconFront").click(function() {
        alert("button clicked");
        $(".flipanimation").toggleClass("rotated");
    });