JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content" class="wrapper">
  <div class="main">
    <div id="home-events">
      <div class="show">
        <img src="" alt="" id="secuencia1" onmouseover="img1.Secuencia('stop')" onmouseout="img1.Secuencia('start')">
      </div>
    </div>
  </div>
  <div id="side">
    <div>
      <h2 class="textouss">
        TITULO
      </h2>
      <div id="acceso" class="clientepass">
        <form action="clientes/control.php" method="post">
          <br>
          Usuario:
          <input type="text" size="10" name="usuario" />
          Pass:
          <input type="password" size="10" name="pass" />
          <input type="submit" name="boton" value="entrar" style="height:17px" />
        </form>
        <br>
        ¿Olvidaste la contraseña? | ¡Dáte de ALTA!
      </div>
    </div>
    <div id="landings">
      <h2 class="textouss">
        Noticias
      </h2>
      
      <ul>
        <li>
          <img src="jpg" class="fromdb" alt="" />
          <a title="" href="http://www.">
            Noticia 1
          </a>
        </li>
        <li>
          <img src="jpg" class="fromdb" alt="" />
          <a title="" href="http://www">
            Noticia 2
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="clear">
  </div>
  <div id="listas" class="wrapper">
    <div class="main1">
      <div class="home1-events1">
        <div class="show">
          
          <h2>
            Info detallada fiestas de hoy
          </h2>
          
          <ul class="columnas">
            <li>
              <a href="http://www." title="">
                <img src="murcia/crazy1.jpg" width="180" height="180" class="fromdb inhome rounded-3" alt=""/>
              </a>
            </li>
            <li>
              <a href="http://www." title="">
                <img src="murcia/crazy1.jpg" width="180" height="180" class="fromdb inhome rounded-3" alt=""/>
              </a>
            </li>
            <li>
              <a href="http://www."...

CSS

#content .main {
    float: left;
    width:670px;
    background: #FFF;
    min-height: 330px;
}
#home-events div.show {
    display:block;
}
#side {
    float: right;
    width: 325px;
    background: #000;
    height:330px;
}
#content .side {
    float: right;
    width: 325px;
    background: #000;
    height:330px;
}
#landings {
    clear: both;
}
#landings li {
    padding: 5px;
    font-size: 12px;
}
#landings li {
    min-height: 55px;
    background: #222;
    margin: 5px 0;
}
#landings li img {
    float:left;
}
#landings li a {
    float:left;
    font-size: 13px;
    width: 205px;
    padding-left: 30px;
}
#home1-events1 ul span.data a {
    width:150px;
}
#listas .main1, #listas .home1 {
    float: left;
    width:670px;
    background: #FFF;
    min-height: 330px;
}
#home1-events1 div.show {
    display:block;
}
#side1 {
    float: right;
    width: 325px;
    background: #000;
    height:330px;
}
#content1 .side1 {
    float: right;
    width: 325px;
    background: #000;
    height:330px;
}
#home1-events1 ul {
    margin-top: 20px;
}

.main1{
    border: 2px solid red;
}

#listas {
    border: 2px solid gold;
}

#side1 {
    border: 2px solid green;
}