JSFiddle - React, Tailwind, and code Playground

by Ghokun

HTML

<table id="ustbuttons" border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td class="td1"><button id="ust1" class="ustbutton">a</button></td>
<td class="td1"><button id="ust2" class="ustbutton">b</button></td>
<td class="td1"><button id="ust3" class="ustbutton">c</button></td>
<td class="td1"><button id="ust4" class="ustbutton">d</button></td>
<td class="td1"><button id="ust5" class="ustbutton">e</button></td>
</tr></tbody></table><table id="ust1tab" class="tab" style="display:block;" border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td class="td1"><button id="alt1" class="altbutton">1</button></td>
<td class="td1"><button id="alt2" class="altbutton">2</button></td>
<td class="td1"><button id="alt3" class="altbutton">3</button></td>
<td class="td1"><button id="alt4" class="altbutton">4</button></td>
<td class="td1"><button id="alt5" class="altbutton">5</button></td>
</tr></tbody></table><table id="ust2tab" class="tab" style="display:none;" border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td class="td1"><button id="alt1" class="altbutton">DE1</button></td>
<td class="td1"><button id="alt2" class="altbutton">DE2</button></td>
<td class="td1"><button id="alt3" class="altbutton">DE3</button></td>
<td class="td1"><button id="alt4" class="altbutton">DE4</button></td>
<td class="td1"><button id="alt5" class="altbutton">DE5</button></td>
</tr></tbody></table><table id="ust3tab" class="tab" style="display:none;" border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td class="td1"><button id="alt1" class="altbutton">TAB1</button></td>
<td class="td1"><button id="alt2" class="altbutton">TAB2</button></td>
<td class="td1"><button id="alt3" class="altbutton">TAB3</button></td>
<td class="td1"><button id="alt4" class="altbutton">TAB4</button></td>
<td class="td1"><button id="alt5" class="altbutton">TAB5</button></td>
</tr></tbody></table><table id="ust4tab" class="tab" style="display:none;" border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td...

CSS

.ustbutton{background:rgb(160,36,67);border:none;width:108.5px;height:24px;color:white;text-shadow: black 0.1em 0.1em 0.1em;font-family: "Trebuchet MS", sans-serif;font-weight:bold;}
.ustbutton.hover{background:rgb(226,226,226);color:black;cursor:pointer;text-shadow: white 0.1em 0.1em 0.1em;}
.ustbutton.clicked {background:black;color:white;text-shadow: none;}
.altbutton{background:rgb(226,226,226);border:none;width:108.5px;min-height:48px;max-height:48px;color:black;text-shadow: white 0.1em 0.1em 0.1em;font-family: "Trebuchet MS", sans-serif;font-weight:bold;}
.altbutton.hover{border-style:solid;border-width:2px;border-color:rgb(160,36,67);cursor:pointer;}
.altbutton.clicked{background:black;color:white;text-shadow: none;}
.td1 {padding-right: 1px;padding-bottom: 1px;}

JavaScript

$(".ustbutton").click(function() {
    $(".tab").hide();
    $("button").not(this).removeClass("clicked");
    });
$(".altbutton").click(function() {
    $(".altbutton").not(this).removeClass("clicked");
    });    
$("button")
    .click(function(event) {
        $(this).addClass("clicked");
        var current_id = event.target.id
        $(".altbaslik").hide("fast");
        var alt_id = current_id + current_id;
        var tab_id = current_id + "tab";
        $("#"+alt_id).toggle("fast");
        $("#"+current_id+"tab").show("fast");        
    })
    .mouseover(function() {
         $(this).addClass("hover");
    })
    .mouseout(function() {
         $(this).removeClass("hover");
    });