JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="tabscontainer">
     <div class="tabs">
         <div class="tab selected first" id="tab_menu_1">
             <div class="link">jаvascript</div>
             <div class="arrow"></div>
         </div>
         <div class="tab" id="tab_menu_2">
             <div class="link">CSS</div>
             <div class="arrow"></div>
         </div>
          <div class="tab last" id="tab_menu_3">
             <div class="link">JQuery</div>
             <div class="arrow"></div>
         </div>
    </div>
    <div class="curvedContainer">
        <div class="tabcontent" id="tab_content_1" style="display:block">
        Lego представила новую серию пространственно-тематических наборов. Новые блоки являются частью инициативы FIRST Lego и предназначены для использования в первой задаче Лиги Лего 2018 - 2019 годов.
        </div>
        <div class="tabcontent" id="tab_content_2">
        Участие Лего в Первой программе начинается на начальном уровне и продолжает учиться в средней школе. Каждый год компания выпускает конкретные комплекты Lego, привязанные к теме, и просит студентов изучить настоящую программу и разработать решения для ее решения.
        </div>
        <div class="tabcontent" id="tab_content_3">
        В настоящий момент конкурс Hydro Dynamics по-прежнему завершается, поэтому стартовые страницы для новой кампании еще не завершены. «В Lego Education мы верим, что навыки, поощряемые благодаря развлечениям, программы развития, подобные тем, которые мы создаем с FIRST, научат наших детей тому, что каждый может высвободить свой потенциал для инноваций», - сказал в своем выступлении президент образования Lego Эсбен Стэрк Йоргенсен.   
        </div>
    </div>
</div>

CSS

div.tabscontainer{
    margin:15px 0px;
}
div.tabscontainer div.tabs{
    list-style: none;
    width: 260px;
    cursor: pointer;
    float:left;
    margin-top: 10px;
    left: 0px;
    z-index: 2;
}
div.tabscontainer div.curvedContainer{
    margin-left: 259px;
    border:1px solid #7c7c77;
    min-height:258px;
    -moz-border-radius: 13px;
    border-radius: 13px;
}
div.tabscontainer div.curvedContainer .tabcontent{
    display:none;
    padding:20px;
    font-size:12px;
    font-family: "CenturyGothicRegular", "Century Gothic", Arial, Helvetica, sans-serif;
}
div.tabs div.tab{
    display: block;
    height: 58px;
    background: #eeeeea;
    border: #d6d6d2 solid 1px;
    border-top: none;
    position: relative;
       color: #73736b;
}
div.tabs div.link{
    padding-left: 20px;
    padding-top:20px;
    font-family: "CenturyGothicRegular", "Century Gothic", Arial, Helvetica, sans-serif;
    font-size: 14px;
}
div.tabs div.tab.selected{
    color: #6b6767;
    border-right-color: #aeaeaa;
}
div.tabs div.tab.selected{
    background: url(menuSelBack.png) repeat-x;
    border-right-color: #7c7c77;
}
div.tabs div.tab.first{
    border-top: #dbdbb7 solid 1px;
    -moz-border-radius-topleft: 13px;
    border-top-left-radius: 13px;
}
div.tabs div.tab.last{
    -moz-border-radius-bottomleft: 13px;
    border-bottom-left-radius: 13px;
}
div.tabs div.tab div.arrow{
    position: absolute;
    background: url(homeSelArrow.png) no-repeat;
    height: 58px;
    width: 17px;
    left: 100%;
    top: 0px;
    display: none;
}
div.tabs div.tab.selected div.arrow{
    display: block;
}

JavaScript

$(document).ready(function() {
    $(".tabs .tab[id^=tab_menu]").hover(function() {
        var curMenu=$(this);
        $(".tabs .tab[id^=tab_menu]").removeClass("selected");
        curMenu.addClass("selected");
        var index=curMenu.attr("id").split("tab_menu_")[1];
        $(".curvedContainer .tabcontent").css("display","none");
        $(".curvedContainer #tab_content_"+index).css("display","block");
    });
});