JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flipped-container">
    <a href="https://google.com" target="_blank" class="flipped-back">Back</a>
    <div class="flipped-front">Front</div>
</div>

CSS

.flipped-back, .flipped-front {
    width: 250px;
    height: 1px;
    font-size: 1.5em;
    font-family: Helvetica;
    color: white;
    padding: 60px 0 89px;
    position: relative;
    background-color: #D38E8E; /*red*/
    text-align: center;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    border-radius: 3px;
}

.flipped-front {
  top: -150px;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flipped-back {
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    background-color: #7FCB7F; /*green*/
    display: block;
    text-decoration: none;
}

.flipped-container {
    max-width: 250px;
    max-height: 155px;
}

.flipped-container:hover .flipped-front {
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

.flipped-container:hover .flipped-back {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

JavaScript

/// By Konstantin Rouda https://il.linkedin.com/pub/konstantin-rouda/8a/2a9/262