JSFiddle - React, Tailwind, and code Playground

by antibiolexa

HTML

<div class="items-list">
    <div class="item time">
        <div class="flex-right">
            <img src="" alt="">
        </div>
        <div class="text">
            <h3>Алгоритмы на выбор</h3>
            <p>Предоставляем актуальную
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Caksdkfk aksdkf kasd Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
            </p>
        </div>
    </div>
    <div class="item time">
        <div class="flex-right">
            <img src="" alt="">
        </div>
        <div class="text">
            <h3>Мгновенный результат</h3>
            <p>Предоставляем актуальную
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Caksdkfk aksdkf kasd Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
            </p>
        </div>
    </div>
    <div class="item time">
        <div class="flex-right">
            <img src="" alt="">
        </div>
        <div class="text">
            <h3>Время на перевод</h3>
            <p>Предоставляем актуальную
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Caksdkfk aksdkf kasd Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
            </p>
        </div>
    </div>
    <div class="item time">
        <div class="flex-right">
            <img src="" alt="">
        </div>
        <div class="text">
            <h3>Изменение цены</h3>
            <p>Предоставляем актуальную
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Caksdkfk aksdkf kasd Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
            </p>
        </div>
    </div>
    <div class="item time">
        <div class="flex-right">
            <img src="" alt="">
        </div>
        <div class="text">
     ...

SCSS

.items-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: row;
    margin-top: 20px;
    .item {
        height: 332px;
        width: 258px;
        margin: 15px;
        background-color: #f3f6f8;
        box-sizing: border-box;
        padding: 33px 29px 40px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 3px;
        .flex-right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            img {
                width: 60px;
                height: 60px;
                display: block;
                border: 1px solid #000;
                box-sizing: border-box;
                background-color: #000;
            }
        }
        .text {
            h3 {
                // font-family: $font-family-second;
                font-weight: normal;
            }
            p {
                font-size: 12px;
                margin-top: 20px;
                opacity: 0.6;
            }
        }
    }
    .time {
        .text {
            p {
                height: 45px;
                overflow: hidden;
            }
        }
        &:hover {
            cursor: pointer;
            .text {
                p {
                    height: auto;
                }
            }
        }
    }
}