JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
<table>
<tr>
  <td><div class="small"><p>Text1</p></div></td>
  <td><div class="small"><p>Text2</p></div></td>
</tr>
<tr>
  <td><div class="small"><p>Text3</p></div></td>
  <td><div class="small"><p>Text4</p></div></td>
</tr>
</table>
</div>

CSS

table{
width:500px;
height:500px;
background-color:gray;
border:2px solid olive;
margin:0 auto;
padding:0;
}
.small{
width:240px;
height:240px;
background-color:white;
border:2px solid purple;
border-radius:15px;
}
.small:hover{
box-shadow:0 0 10px rgba(0,0,0,0.5);
}
td{
text-align:center;
}

JavaScript

function {
	$(".small").click()
}