JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  		<tr>
    		<td>
      			<div id="medicinadentariatexto">
        
        			<p class="textomedicinatitulo">MEDICINA DENTÁRIA</p>
        
        		</div>
    		</td>
    		<td>
      			<div id="ordontia" class="botaomedicina">
        
        			<p class="textomedicina">Ordontia</p>

        
        		</div>
    		</td>
            
            <td>
      			<div id="endodontia" class="botaomedicina">
        
        	 		<p class="textomedicina">Endodontia</p>

        
        		</div>
    		</td>
            
            <td>
      			<div id="estetica" class="botaomedicina">
        
              		<p class="textomedicina">Estética</p>
        
        		</div>
    		</td>
            
     	</tr>
        <tr>
            <td>
      			<div id="implantologia" class="botaomedicina">
        
        			<p class="textomedicina">Implantologia</p>  
        
        		</div>
    		</td>
            
            <td>
      			<div id="higieneoral" class="botaomedicina">
        
		        	<p class="textomedicina">Higiene Oral</p>  

        		</div>
    		</td>
            
            <td>
      			<div id="branqueamentodiario" class="botaomedicina">
        
            		<p class="textomedicina">Branqueamento<br />Dentário</p>  

        
        		</div>
    		</td>
            
            <td>
      			<div id="protesefixa" class="botaomedicina">
        
        		<p class="textomedicina">Prótese Fixa e Removível</p>  

        
        		</div>
    		</td>
      	</tr>
        <tr>
	     	 <td>
            
            	<div id="cirurgiaoral" class="botaomedicina">
        
        			<p class="textomedicina">Cirurgia Oral</p>  
        
        		 </div>
            
            </td>    	      
            <td>
            
            	<div id="estetica" class="botaomedicina">
        
        			<p class="textomedicina">Estética e Reabilitação Oral</p>  
        
        
       			 </div>
            
            </td>           
 ...

CSS

.medicina{
	
	width:800px;
	margin:auto;
	padding-top:12px;
	}

#medicinadentariatexto{
	
	width:120px;
	margin-bottom:0px;
	font-size:30px;
	margin-left:20px;

}

.botaomedicina{
	width:140px;
	height:140px;
	font-size:13px;
	margin-left:30px;
	margin-right:30px;	
}

.textomedicina{
	
		color:#447d8b;
		background-image:url(https://dl.dropboxusercontent.com/u/17490270/botao1.png);
		background-size:90%;
		background-position:center;
		background-repeat:no-repeat;	
		padding-top:60px;
		padding-bottom:60px;
		text-align:center;


}

.descricaomedicina{
	
	background-color:blue;
	height:100px;
	
	
}

JavaScript

$(document).ready(function(){
	$('div#ordontia').click(function(){
		$('div#ordontia2').slideToggle("slow");
	});
});