JSFiddle - React, Tailwind, and code Playground

HTML

<center>
<div class="p-column">
    <h3>
        Тариф 1
    </h3>
    <div class="p-line">Быстрые ежи</div>
    <div class="p-line">Сильные панды</div>
    <div class="p-line">Умные косули</div>
    <div class="p-button">[[btn1]]</div>
</div>

<div class="p-column p-active">
    <h3>
        Тариф 2
    </h3>
    <div class="p-line">Милые котята</div>
    <div class="p-line">Пушистые еноты</div>
    <div class="p-line">Мягкие лемуры</div>
    <div class="p-button">[[btn2]]</div>
</div>

<div class="p-column">
    <h3>
        Тариф 3
    </h3>
    <div class="p-line">Быстрые драконы</div>
    <div class="p-line">Смелые ягнята</div>
    <div class="p-line">Красивые цапли</div>
    <div class="p-button">[[btn3]]</div>
</div>
</center>

CSS

.p-column {
    border: 3px solid #A7CBE1;
    border-radius: 5px;
    width: 32%;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    background: white;
    margin-top: 10px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

.p-column h3 {
    color: #A7CBE1;
    font-weight: bold;
    background: #FBFBFB;
    margin: 0;
    padding: 20px;
}

.p-column .p-line {
    border-top: 1px solid #EEE;
    padding: 10px;
    color: grey;
}

.p-column .p-button {
    border-top: 1px solid #DDD;
    background: #F8F8F8;
    padding: 10px;
}


.p-column.p-active {
    border-color: #42A8D8;
    margin-left: -20px;
    margin-right: -20px;
    position: relative;
    margin-top: 0;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.4);
}

.p-column.p-active h3 {
    padding: 25px;
    color: #42A8D8;
}

.p-column.p-active .p-line {
    color: black;
}

.p-column.p-active .p-button {
    padding: 15px;
}