JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contenedor">

<div id="titulo">
	<img src="../pic/titulo2.png"/>
</div>

<div id="explicacion">
	<h2>Contacto</h2>
	<div class="clear"></div>
</div>

	<div id='tabla'>
		<table>
		    <tr>
		        <td>1</td>
		        <td>1</td>
		        <td>1</td>
		        <td>1</td>
		        <td>1</td>
		    </tr>
		    <tr>
		        <td>1</td>
		        <td>1</td>
		        <td>1</td>
		        <td>1</td>
		        <td>1</td>
		    </tr>
		    <tr>
		        <td>1</td>
		        <td>1</td>
		        <td>1</td>
		        <td>1</td>
		        <td>1</td>
		    </tr>
		</table>
    </div>
	<div id="pie">
		<a href="../index.php">&lt;&lt;Atr&aacute;s>></a>
		<div class="clear"></div>
	</div>
</div>

CSS

#tabla {
background-color: #42CBA4;
border: 2px solid #80EA78;
text-align: justify;
padding:1.6em;
margin: 2em;
margin-top: 0em;
border: 2px solid #80EA78;
}

#contenedor {
 background-color:#92E1C3;
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  margin-top:3em;
  max-height: 100%;
  border: 10px solid #C5C5C5;
  border-bottom-style: outset;
}
#titulo img {width: 1185px;
height: 140px;
max-width: 100%;
max-height: 100%;
margin:.5em;
}
#explicacion h2{background-color: #37B08E;
border: 2px solid #C5C5C5;
text-align: center;
padding:.5em;
margin:auto;
width: 95%;
float:center;
margin-left: .8em;
margin-bottom: .1em;
color:#706565;}

#pie a {background-color: #37B08E;
border: 4px solid #C5C5C5;
text-align: center;
padding: .3em;
border-bottom-style: outset;
color: #80EA78;
text-decoration: none;
float:right;
margin-right:.2em;
margin-bottom:.2em;
}

#pie a:active
{
border-bottom-style: inset;
color: rgb(38, 121, 99);
}
div.clear { clear: both; }