JSFiddle - React, Tailwind, and code Playground

by Nick Sheva

HTML

<div class="tabs">
                    <div class="tab_item tab_item_1 active">
                        <div class="tab_name">текст 1</div>
                    </div>
                    <div class="tab_item tab_item_2">
                        <div class="tab_name">текст 2</div>
                    </div>
                    <div class="tab_item tab_item_3">
                        <div class="tab_name">текст 3</div>
                    </div>
                </div>

CSS

.tab_item {
  width:150px;
  height:150px;
  float:left;
  margin-right:30px;
  
}
.tabs .active {
    background: #999;
    color: #000;
    border-radius: 3px;
    box-shadow: 0px 15px 24px 0 rgba(23, 3, 79, 0.1);
}

JavaScript

$('.tab_item').hover(function() {
            $(this).addClass('active');
        }, function() {
            $( this ).removeClass('active');
        });