JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tariffs">
    <div class="tariff-card tariff-card_active">
        <div class="tariff-card__price">75 р</div>
        <div class="tariff-card__views">1000 просмотров</div>
        <div class="tariff-card__meta">
            <div class="tariff-card__list">
                <div class="tariff-card__list-item">Онлайн заказ</div>
                <div class="tariff-card__list-item">Быстрый старт</div>
                <div class="tariff-card__list-item">Лучшая цена на рынке</div>
            </div>
        </div>
        <div class="tariff-card__action">
            <button class="tariff-card__button">Заказать</button>
        </div>
    </div>
    <div class="tariff-card">
        <div class="tariff-card__price">75 р</div>
        <div class="tariff-card__views">1000 просмотров</div>
        <div class="tariff-card__meta">
            <div class="tariff-card__list">
                <div class="tariff-card__list-item">Онлайн заказ</div>
                <div class="tariff-card__list-item">Быстрый старт</div>
                <div class="tariff-card__list-item">Лучшая цена на рынке</div>
            </div>
        </div>
        <div class="tariff-card__action">
            <button class="tariff-card__button">Заказать</button>
        </div>
    </div>
    <div class="tariff-card">
        <div class="tariff-card__price">75 р</div>
        <div class="tariff-card__views">1000 просмотров</div>
        <div class="tariff-card__meta">
            <div class="tariff-card__list">
                <div class="tariff-card__list-item">Онлайн заказ</div>
                <div class="tariff-card__list-item">Быстрый старт</div>
                <div class="tariff-card__list-item">Лучшая цена на рынке</div>
            </div>
        </div>
        <div class="tariff-card__action">
            <button class="tariff-card__button">Заказать</button>
        </div>
    </div>
</div>

CSS

.tariffs {
    display: flex;
    align-items: center;
    margin: 100px 0;
}

.tariff-card {
    background-color: #fff;
    border-radius: 6px;
    text-align: center;
    margin: 0 10px;
    padding: 20px;
    width: 250px;
}

.tariff-card_active .tariff-card__meta {
    display: block;
}

.tariff-card_active .tariff-card__views {
    display: none;
}

.tariff-card__price {
    font-size: 25px;
    margin: 10px 0 15px 0;
}

.tariff-card__meta {
    display: none;
}

.tariff-card__action {
    margin-top: 14px;
}

.tariff-card__button {
    background-color: red;
    border-radius: 2px;
    border: none;
    color: #fff;
    cursor: pointer;
    height: 34px;
}

JavaScript

'use strict';

const cards = Array.from(document.querySelectorAll('.tariff-card'));

cards.forEach((card) => {
    card.addEventListener('mouseenter', (event) => {
        cards.forEach((card) => {
            if (card.classList.contains('tariff-card_active')) {
                card.classList.remove('tariff-card_active');
            }
        });
        card.classList.add('tariff-card_active');
    });
});