JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card-flipper">

<div class="product-blurb card-back"><span class="product-blurb-wrapper"><p>Ah, martini glasses: so angular and sexy, so prone to making you look like a drunk as you struggle to keep a generously poured beverage within their confines. The traditional wide bowl, delicate stem, and sharply sloping sides are meant to enhance the botanical aromas of the gin, keep the drink frosty-cold, and provide a comfortable wall for a cocktail pick to lean against, respectively—but in practice, all those features feel like bugs for clumsy-fingered folk. So we sought out a design that wrapped up those attributes in a more user-friendly package, and discovered this lovely set of glasses. The broad mouth remains, but the conical shape has been softened and the stem fattened (which, if we're being honest, will make us all the more inclined to actually use that stem instead of clutching the bowl for dear life). Got no space for uni-tasking glassware? These double nicely as pretty dessert dishes.
                </p></span></div>

</div>

CSS

.product-blurb {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.3s ease;
    -moz-transition: max-height 0.3s ease;
    transition: max-height 0.3s ease;
    cursor: pointer;

    max-height: 0;
    overflow-y: scroll;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    transition: 0.6s;

    max-height: none;
    overflow-y: hidden;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    max-height: none;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.product-blurb-wrapper {
    display: inline-block;
    color: white;
    font-size: 0.875em;
    padding: 1.25em 1.5em;
    background: #3d414a;
    
    display: block;
    height: 100%;
    overflow-y: scroll;
}

.card-flipper {
    position: relative;
    padding-bottom: 100%;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
}