JSFiddle - React, Tailwind, and code Playground

by ssimm

HTML

<table class="coolTable">
  	<tr>
    <th colspan="2">Title</th>
   </tr>   
   <tr>
   <td onClick="document.location.href='#child;">      
   <a href='#child' class="parent1">Parent1 muuuuuuuuuuch longer, and even longer and longer and longer and longer and longer and longer </a>
   <div id="child"><h3>Child1</h3>
   <p> Here pops Info on something when parent1 is clicked.</p>
   </div><!--EO Child1 -->
   </td>
   <td>      
   <a href='#child2' class="parent2"><div>
   Parent2</div></a>
   <div id="child2"><h3>Child2</h3>
   <p> Here pops Info on something when parent2 is clicked.</p>
   </div><!--EO Child2 -->
   </td>
   </tr>
    <tr>
   <td>      
   <a href='#child3' class="parent3">Parent3</a>
   <div id="child3"><h3>Child3</h3>
   <p> Here pops Info on something when parent3 is clicked.</p>
   </div><!--EO Child1 -->
   </td>
   <td onClick="document.location.href='#child4">      
   <a href='#child4' class="parent4">Parent4</a>
   <div id="child4"><h3>Child4</h3>
   <p> Here pops Info on something when parent4 is clicked.</p>
   </div><!--EO Child2 -->
   </td>
   </tr>
</table>

CSS

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


#child, #child2, #child3, #child4{
	position:absolute;
	display:none;
    top:200px;
	z-index:9;
	color:red;
}

#child:target, #child2:target, #child3:target, #child4:target {

display:block;
}



table.coolTable td {
    vertical-align:top;
    background-color:purple;
    color:green;
}

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

td a {
    vertical-align:top;
    display:block;
    width:100%;
}