JSFiddle - React, Tailwind, and code Playground

HTML

<center>
      <div class="container">
        <div class="banner">
          <p><img src="logo.png" width="507" height="100" /></p>
        </div>
        <div class="box">
          <div class="menu">
<div class="categorias">
<h3>Categorias</h3>
<div class="categorias_body">
  Link1<br />
  Link2<br />
  Link3<br />
  Link4<br />
  Link5<br />
  Link6<br />
  Link7<br />
  Link8<br />
  Link9<br />
  Link10<br />
  </div>
</div>
          </div>
          
     
<div class="body">
 
<div class="post">
<h3>Noticia1</h3>
<div class="post_body">
  <p>Contenido de Noticia1</p>
  </div>
</div>
 
<div class="post">
<h3>Noticia2</h3>
<div class="post_body">
  <p>Contenido de Noticia2</p>
  </div>
</div>
 
<div class="post">
<h3>Noticia3</h3>
<div class="post_body">
  <p>Contenido de Noticia3</p>
  </div>
</div>
 
<div class="post">
<h3>Noticia4</h3>
<div class="post_body">
  <p>Contenido de Noticia4</p>
  </div>
</div>
 
<div class="post">
<h3>Noticia5</h3>
<div class="post_body">
  <p>Contenido de Noticia5</p>
  </div>
</div>
 
</div>
 
 
          <div class="otromenu">
<div class="categorias">
<h3>Afiliados</h3>
<div class="categorias_body">
  Link1<br />
  Link2<br />
  Link3<br />
  Link4<br />
  Link5<br />
  Link6<br />
  Link7<br />
  Link8<br />
  Link9<br />
  Link10<br />
  </div>
</div>
          </div>
        </div>
        <div class="footer">
          <p><img src="logo.png" width="507" height="100" /></p>
        </div>
  </div>
</center>

CSS

body {
background:transparent url(fondo.jpg) repeat scroll 0 0;
color:gray;
font-family:helvetica,arial,sans-serif;
font-size:14px;
text-align:center;
}

.container {
	height: 768px;
	width: 1050px;
}
.banner {
	min-height: 100px;
	float: left;
	width: 1024px;
	background-color:#000;
	border: solid #222 2px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin: 3px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
.box {
	float: left;
	min-height: 500px;
	width: 1024px;
	background-color:#000;
	border: solid #222 2px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin: 3px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
.menu {
	float: left;
	min-height: 500px;
	width: 200px;
	margin-top: 3px;
	margin-right: 3px;
	margin-bottom: 3px;
	margin-left: 3px;

}

.body {
	float: left;
	min-height: 500px;
	width: 600px;
	margin: 3px;
}
.otromenu {
	float: left;
	min-height: 500px;
	width: 200px;
	margin: 3px;
}

.footer {
	float: left;
	min-height: 100px;
	width: 1024px;
	background-color:#000;
	border: solid #222 2px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin: 3px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;

}

.categorias {
color:gray;
margin-bottom:10px;
width:200px;
word-wrap: break-word;

}

.categorias h3 {
color:orange;
background:#0F0F0F;
border-width: 1px;
border-style:solid;
border-color:333333; 
padding:5px 10px;

}

.categorias_body {
margin:-20px 0 0 0;
color:white;
background:black;
line-height:19px;
padding:5px 10px;
border-width: 1px;
border-style:solid;
border-color:333333;

}

.post {
color:gray;
margin-bottom:10px;
width:600px;
word-wrap: break-word;

}

.post h3 {
color:orange;
background:#0F0F0F;
border-width: 1px;
border-style:solid;
border-color:333333; 
padding:5px 10px;

}

.post_body {
margin:-20px 0 0...