JSFiddle - React, Tailwind, and code Playground

by lonewolfs

HTML

<div id="question" class="tabs">
    <div class="higher">
        <div class="cell">
            Search
        </div>
    </div>
    <div class="cellspacer"></div>
    <div class="higher">
        <div class="cell">
            Insert
        </div>
    </div>
    <div class="cellspacer"></div>
    <div class="higher">
        <div class="cell">
            List
        </div>
    </div>
</div>

CSS

.cell,.cellspacer,.higher{position:relative;display:table-cell;border-top:none;border-left:none;border-right:none;}
.higher{padding-top:5px;border-bottom:none;}
.cellspacer{width:20px;border-bottom:thin solid;}
.cell{width:auto;padding:5px;cursor:pointer;padding-left:20px;padding-right:20px;border-bottom:thin solid;}
.activate{border-top:thin solid;border-right:thin solid;border-left:thin solid;border-bottom:none !important;}
.nobottom{border-bottom:none !important;}

.cell,.activate,.cellspacer{border-color:#F00;}/*applies border color*/
.tabs{height:auto;width:260px;margin:auto;border:none}

JavaScript

$('.cell').live('mouseover',function() {
    if(!$(this).parent().hasClass('activate'))
    {
        $(this).addClass('activate');
        $(this).addClass('nobottom');
    }
});
$('.cell').live('mouseout',function() {
    if(!$(this).parent().hasClass('activate'))
    {
        $(this).removeClass('activate');
        $(this).removeClass('nobottom');
    }
});
$('.cell').live('click', function() {
    var cell = $(this);    
    $('.higher').removeClass('activate');
    $('.cell').removeClass('nobottom');
    cell.addClass('nobottom');
    cell.removeClass('activate');
    cell.parent().addClass('activate');
});