JSFiddle - React, Tailwind, and code Playground

by btevfik

HTML

<ul class="tabs">
    <li><a href="#" id="changeText">inclusive Class</a>
    </li>
    <li><a href="#" id="changeText2">inclusive Class</a>
    </li>
    <li><a href="#" id="changeText3">inclusive Class</a>
    </li>
    <li class="end"><a href="#" id="changeText5">inclusive Class</a>
    </li>
</ul>

CSS

.tabs {
    width:100%;
    overflow:auto;
}
.tabs li {
    float:left;
    padding-right:1px;
}
.tabs .end {
    padding:0
}
.tabs a {
    display:block;
    font-size:13px;
    line-height:31px;
    color:#fff;
    text-transform:uppercase;
    text-align:center;
    border-radius:4px 4px 0 0;
    -moz-border-radius:4px 4px 0 0;
    -webkit-border-radius:4px 4px 0 0;
    behavior:url(js/PIE.htc);
    position:relative;
    background:url(../images/tabs_bg.gif) bottom repeat-x #3081c8;
    text-decoration:none;
    p
}
.tabs a:hover, .tabs .active {
    background:url(../images/bg_form.gif) repeat
}