JSFiddle - React, Tailwind, and code Playground

by jnfsmile

HTML

<br /><br />
<div id="menu">
<div class="tab selected">זמנים</div>
<div class="tab">שבת</div>
<div class="tab">מועד</div>
</div>

CSS

body{
    direction: rtl;
    background: LIGHTBLUE;
}
#menu div {
    line-height: 18px;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    border-top-left-radius: 3px;
}
.tab {
    float: right;
    background: #EBEBEB;
    text-align: center;
    padding-right: 6px;
    border-left: none;
}
.tab.selected {
    background: WHITE;
    z-index: 2;
}
.aTab{
    float: right;
    margin-left: -4px;
    -ms-transform: skewX(-25deg);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    border-right: none;
    background: #EBEBEB;
    z-index: 1;
}
.selected + .aTab {
    background: WHITE;
    z-index: 2;
}



/* IE 8 */
.selected.aTab {
    background: WHITE;
    z-index: 2;
}
.aTab {

   /* IE8+ - must be on one line, unfortunately */ 
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.46630765815499875, M21=0, M22=1, SizingMethod='auto expand')";
   
   /* IE6 and 7 */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=1,
            M12=-0.46630765815499875,
            M21=0,
            M22=1,
            SizingMethod='auto expand');


   /*
    * To make the transform-origin be the middle of
    * the object.    Note: These numbers
    * are approximations.  For more accurate results,
    * use Internet Explorer with this tool.
    */
   left: 7px; /*
   margin-top: -0px;*/

}

JavaScript

$(".tab").after("<div class=\"aTab\">&nbsp;&nbsp;</div>");
    $(".tab").append("&nbsp;");

$("#menu div").on("click", function()
                  {
                      var element = $(this).hasClass("tab") ? $(this) : $(this).prev();
                      var nElement = element.next();
                      if(element.hasClass("selected")) return;
                      $(".tab").removeClass("selected");
                      $(".aTab").removeClass("selected");
                      element.addClass("selected");
                      nElement.addClass("selected");
                  });