JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="gallery-elements">
    <li class="item transition">
        <div class="item-flipper">
            <div class="item-front">
                <div class="item-content">
                    <h4>Cultural Transformation</h4>
                </div>
            </div>
            <div class="item-back">
                <div class="item-content">
                    <p>Global energy company recognized that <strong>cultural transformation</strong> and <strong>organizational alignment</strong> would be required to achieve sustainable growth and implement critical changes in operations to realize necessary safety changes.</p>
                </div>
            </div>
        </div>
    </li>
    <li class="item transition">
        <div class="item-flipper">
            <div class="item-front">
                <div class="item-content">
                    <h4>Redesign Work Environment</h4>
                </div>
            </div>
            <div class="item-back">
                <div class="item-content">
                    <p>Using a national retailer's long-range vision and brand guidelines, the firm <strong>redesigned the work environment</strong>, with appropriate design narratives, to recreate the brand and its corresponding experience for customers and employees.</p>
                </div>
            </div>
        </div>
    </li>
    <li class="item dislocation">
        <div class="item-flipper">
            <div class="item-front">
                <div class="item-content">
                    <h4>Workforce Alignment</h4>
                </div>
            </div>
            <div class="item-back">
                <div class="item-content">
                    <p>Conducted collaborative leadership work sessions to help <strong>develop, implement and align the human capital management applications</strong> hiring, evaluation, development, and succession planning) of a Fortune 100 company with the organization’s vision, values and strategic...

CSS

/* ELEMENT STYLING */
.gallery-elements {
    margin: 0;
    padding: 0;
    text-align: center;
    left: 0;
    position: relative;
    white-space: nowrap;
}
li.item {
    list-style: none;
    display: inline-block;
    margin: 0 1em;
    overflow: visible;
    position: relative;
}
li.item:first-child {
    margin-left: 0;
}
li.item,
.item-front,
.item-back {
    width: 189px;
    height: 279px;
    vertical-align: middle;
    white-space: normal;
}
.item-front {
    background-color: rgb(179, 51, 0);
    background-repeat: none;
}
.item-back {
    background: #FFF;
    overflow-y: auto;
    overflow-x: hidden;
}
.item-front .item-content {
    margin: 0 1em;
    display: block;
    position:absolute;
}
.item-front .item-content h4 {
    text-align: left;
    color: #FFF;
    font-weight: normal;
    font-size: 1.3em;
    line-height: 1.6em;
    letter-spacing: 0.02em;
    padding-top: 50%;
}
.item-back .item-content {
    margin:1em;
    display: block;
}
.item-back .item-content p {
    font-size: 1em;
    line-height: 2em;
    text-align: left;
}
/* TRANSFORM CSS */
.gallery-elements {
    -webkit-perspective:1000;
    -moz-perspective:1000;
    -ms-perspective:1000;
    -o-perspective:1000;
    perspective:1000;
}
.item-flipper {
    transition: 0.3s;
    -webkit-transform-style: preserve-3d;
    position: relative;
}
.item-front, .item-back {
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
    position: absolute;
    top: 0;
    left: 0;
    clear: both;
}
.item-front {
    z-index: 2;
}
.item-back {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
    transform:rotateY(180deg);
}
li.item.flip .item-flipper {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
   ...

JavaScript

$(function () {
    var items = $('.gallery-elements').find('.item');
    $.each(items, function () {
        $(this).on('click', function (e) {
            e.preventDefault();
            $(this).toggleClass('flip');
        });
    });
});