JSFiddle - React, Tailwind, and code Playground

HTML

<div class="carousel-slide current">
    <div class="flipper">
        <div class="fl front">
            <img src="http://placehold.it/411x274/ff9900/fff" />
        </div>
        <div class="fl back">
            <img src="http://placehold.it/411x274/59a5d1/fff" />
        </div>
    </div> 
    
    <a class="btn-flip" href="#">Flip</a>

</div>


<br /><br />
Bug Report:
<ul>
    <li>Hover over the Flip button</li>
    <li>Notice that the entire button is an active hotspot.</li>
    <li>Click the Flip button</li>
    <li>The image flips over</li>
    <li>
        <strong>BUT NOW:</strong>
        <ul>
            <li>The entire button is no longer clickable or active. 
                <em>(This is the BUG)</em>
            </li>
            <li>Only the edge of the button is clickable.</li>
            <li>Clicking the active area returns the slide to the original state which is the bug</li>
        </ul>
    </li>
<ul>

CSS

.carousel-slide {
    width: 411px;
    height: 274px;
    margin: 0 56px;
    position: relative;
    z-index: 500;
    float: left;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}

.carousel-slide img {
    width: 100%;
    position: relative;
    z-index: 500;
}

.flipper {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flipper.flipped {
    z-index: 500;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flipper .fl {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 500;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flipper .fl.back {
    z-index: 600;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.btn-flip {
    background-color: #c00;
    color: #fff;
    font-weight: bold;
    width: 53px;
    height: 35px;
    position: absolute;
    bottom: 14px;
    right: -14px;
    z-index: 750;
    display: block;
    cursor: pointer;
    -webkit-transform: translateZ(1px);
}

JavaScript

$(".btn-flip").click(function () {
    $(this).parent().find(".flipper").toggleClass("flipped");
    return false;
});