JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="block">
        <div>
             <h3>Заголовок</h3>

            <ul>
                <li>Пункт</li>
                <li>Пункт</li>
                <li>Пункт</li>
                <li>Пункт</li>
                <li>Пункт</li>
                <li>Пункт</li>
            </ul>
        </div>
    </div>
    <div class="block">
        <div>
             <h3>Заголовок</h3>

            <ul>
                <li>Пункт</li>
                <li>Пункт</li>
                <li>Пункт</li>
                <li>Пункт</li>
                <li>Пункт</li>
                <li>Пункт</li>
            </ul>
        </div>
    </div>
    <div class="block">
        <div>
             <h3>Заголовок</h3>

            <ul>
                <li>Пункт</li>
                <li>Пункт</li>
                <li>Пункт</li>
                <li>Пункт</li>
                <li>Пункт</li>
                <li>Пункт</li>
            </ul>
        </div>
    </div>
</div>

CSS

.wrapper {
    width: 750px;
    margin: 0 auto;
}
.block > div {
    width: 200px;
    float: left;
    margin: 0 20px;
    position: relative;
    z-index: 1;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.block > div:after {
    content:"";
    display: block;
    height: auto;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwKSIvPjxzdG9wIG9mZnNldD0iMzQlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(34%, #ffffff), color-stop(100%, #ffffff));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #ffffff 34%, #ffffff);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), #ffffff 34%, #ffffff);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0), #ffffff 34%, #ffffff);
    -pie-background: linear-gradient(top, rgba(255, 255, 255, 0), #ffffff 34%, #ffffff);
    background: linear-gradient(top, rgba(255, 255, 255, 0), #ffffff 34%, #ffffff);
    position: absolute;
    top: 45%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}
.block:hover > div:after {
    bottom: auto;
    height: 0;
    opacity: 0;
}
h3 {
    color: green;
    border-bottom: 2px solid...