JSFiddle - React, Tailwind, and code Playground

by blueberrymuffin

HTML

<div class="ws-css-table">
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td a1 a5">C</div>
        <div class="ws-css-table-td a2">B</div>
        <div class="ws-css-table-td a3 a4">H</div>        
    </div>
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td a5">O</div>
        <div class="ws-css-table-td a1 a2 a4">A</div>
        <div class="ws-css-table-td a3">O</div>        
    </div>
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td a4 a5">T</div>
        <div class="ws-css-table-td a2">T</div>
        <div class="ws-css-table-td a1 a3">T</div>        
    </div>
</div>

<a href="#"  data-ws="a1" class="highlightme">CAT</a>
<a href="#" data-ws="a2" class="highlightme">BAT</a>
<a href="#"  data-ws="a3"class="highlightme">HOT</a>
<a href="#" data-ws="a4" class="highlightme">HAT</a>
<a href="#" data-ws="a5" class="highlightme">COT</a>

CSS

.ws-css-table {
    display: table;
}
.ws-css-table-tr {
    display: table-row;
}
.ws-css-table-td {
    display: table-cell;
    border:1px solid #000;
    width: 15px;
    height:15px;
    text-align:center;
    vertical-align:middle;
}


.blackcolor {
  color: #000!important
}

.ws-showWord {
   //  border:5px solid #000;
    background-color: #b0c4de;
    
}
}

JavaScript

$('.highlightme').hover(function(e) {
     
    var ws = $(this).data('ws'); 
     //alert (ws)
    $('.'+ws).each(function ()
    { 
        
       
        //$myElement.css("font-weight","Bold");
    $(this).toggleClass('ws-showWord'); 
  // $(this).text("");
});
    
	
});

//$("p").css("background-color");  .toggleClass('ws-table-blackcolor'); .mouseover