JSFiddle - React, Tailwind, and code Playground

by Taurean Small

HTML

<table class="coolTable">
  	<tr>
    <th colspan="2">2024 Proposed Metra Fares</th>
   </tr>   
   <tr>
<td onClick="document.location.href='#child;">      
   <a href='#child' class="parent1">Zone A</a>
   <div id="child"><h3>One Way</h3>
   <p>$5.50</p>
       <h3>Monthly</h3>
       <p>$157</p>
   </div><!--EO Child1 -->
   </td>
<td onClick="document.location.href='#child2;">      
   <a href='#child2' class="parent2">Zone B</a>
   <div id="child2"><h3>One Way</h3>
   <p>$5.75</p>
       <h3>Monthly</h3>
       <p>$164</p>
   </div><!--EO Child1 -->
   </td>
</tr>
    <tr>
<td onClick="document.location.href='#child3;">      
   <a href='#child3' class="parent3">Zone C</a>
   <div id="child3"><h3>One Way</h3>
   <p>$7.75</p>
       <h3>Monthly</h3>
       <p>$221</p>
   </div><!--EO Child1 -->
<td onClick="document.location.href='#child4;">      
   <a href='#child4' class="parent4">Zone D</a>
   <div id="child4"><h3>One Way</h3>
   <p>$8.50</p>
       <h3>Monthly</h3>
       <p>$242</p>
   </div><!--EO Child1 -->
   </td>
     </tr>
        <tr>
<td onClick="document.location.href='#child;">      
   <a href='#child4' class="parent4">Zone E</a>
   <div id="child4"><h3>One Way</h3>
   <p>$9</p>
       <h3>Monthly</h3>
       <p>$257</p>
   </div><!--EO Child1 -->
   </td>
<td onClick="document.location.href='#child4;">      
   <a href='#child4' class="parent4">Zone F</a>
   <div id="child4"><h3>One Way</h3>
   <p>$9.50</p>
       <h3>Monthly</h3>
       <p>$271</p>
   </div><!--EO Child1 -->
   </td>
        </tr>
        <tr>
<td onClick="document.location.href='#child5;">      
   <a href='#child5' class="parent5">Zone G</a>
   <div id="child5"><h3>One Way</h3>
   <p>$10</p>
       <h3>Monthly</h3>
       <p>$285</p>
   </div><!--EO Child1 -->
   </td>
   
<td onClick="document.location.href='#child6;">      
   <a href='#child6' class="parent6">Zone H</a>
   <div id="child6"><h3>One Way</h3>
   <p>$11.25</p>
       <h3>Monthly</h3>
       <p>$321</p>
  ...

CSS

a {
    color:white;
    text-decoration:none;
} 


#child, #child2, #child3, #child4, #child5, #child6, #child7, #child8, #child9, #child10, #child11{
	position:absolute;
	display:none;
    top:0px;
    left:210px;
	z-index:9;
	color:red;
}

#child:target, #child2:target, #child3:target, #child4:target, #child5:target, #child5:target, #child6:target, #child7:target, #child8:target, #child9:target, #child10:target, #child11:target {

display:block;
}



table.coolTable td {
    background-color:blue;
    color:green;
}

table.coolTable td:hover {
    background-color:green;
    color:green;
}