JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

<div class="gallery-table">
    <div class="row">
        <div class="cell">Материал</div>
        <div class="cell">Стоимость</div>
        <div class="cell">Сроки</div>
    </div>
    <div class="row">
        <div class="cell">Пеноблоки</div>
        <div class="cell">
            <div class="price-rub">15000000</div>
        </div>
        <div class="cell">14 дней</div>
    </div>
    <div class="row">
        <div class="cell">Газобетонные
            <br/>блоки</div>
        <div class="cell">
            <div class="price-rub">25000000</div>
        </div>
        <div class="cell">34 дня</div>
    </div>
    <div class="row">
        <div class="cell">Облицовочный
            <br/>кирпич</div>
        <div class="cell">
            <div class="price-rub">25000000</div>
        </div>
        <div class="cell">12 дней</div>
    </div>
    <div class="row">
        <div class="cell">Теплая керамика</div>
        <div class="cell">
            <div class="price-rub">35000000</div>
        </div>
        <div class="cell">12 дней</div>
    </div>
    <div class="row">
        <div class="cell">Кирпич</div>
        <div class="cell">
            <div class="price-rub">45000000</div>
        </div>
        <div class="cell">12 дней</div>
    </div>
    <div class="row">
        <div class="cell">Железобетон</div>
        <div class="cell">
            <div class="price-rub">55000000</div>
        </div>
        <div class="cell">12 дней</div>
    </div>
    <div class="row">
        <div class="cell">Мокрый фасад</div>
        <div class="cell">
            <div class="price-rub">55000000</div>
        </div>
        <div class="cell">12 дней</div>
    </div>
</div>

CSS

.gallery-table-wrapper {
    float: right;
    width: 445px;
}
.gallery-table-wrapper .gallery-table {
    float: right;
}
.gallery-table {
    border: 2px solid #666666;
    border-radius: 5px;
    display: table;
    overflow: hidden;
    width: 415px;
}
.gallery-table .row {
    display: table-row;
}
.gallery-table .row .cell {
    background-color: #ffffff;
    border-left: 1px solid #999999;
    border-top: 1px solid #999999;
    display: table-cell;
    padding: 14px 0 14px 12px;
    vertical-align: middle;
    width: 33%;
}
.gallery-table .row .cell:nth-of-type(1) {
    border-left: none;
}
.gallery-table .row:nth-of-type(2n) .cell {
    background-color: #e6e6e6;
}
.gallery-table .row:nth-of-type(1) .cell {
    background-color: #666666;
    border-top: none;
    color: #ffffff;
    font-weight: 700;
}