JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        
        <header id="cabecera">
            <div id="rectangle">  
            </div>
            <div id="titulo"><h1>diaz.com</h1>
                <p>Digital</p>
            </div>
        </header>
        
        <div id="container">
            
            <div id="right">
                <aside class="textoimportante">
                    <img id="yo" src="yo.png">
                    <p><a href="mailto:oma.gonzales@gmail.com">oma.gonzales@gmail.com</a></p>
                    <p>Mobile: (51) 96 819 4949</p>
                    <p>Skype: omom</p>
                    <p>Lima - Perú</p> 
                </aside>
            </div>
            
            
            <div id="left">
                <main>
                    <section id="descripcion" class="leftCol">
                    <p>Este es el sitio de
                    Diplomado en Marketing Digital en la
                    misma casa de Estudios (2013).</p>

                   
                
                    <p>Este sitio intenta recoger todo lo aprendido, y lo que
                    queda por aprender sobre el análisis de datos, especialmente
                    el manejo de datos en R.</p>

                    <p>Todos los artículos estarán publicados aquí:</p>

                    <a href="http://gondiaz.com/blog/">http://gondiaz.com/blog/</a>
                    </section>
            
                    <section>
                        <h3>Recursos profesionales: CV, investigaciones, etc.</h3>
                    </section>
                    <section class="enlaces"> <!-- Sección para los enlaces -->
                        <ul>
                            <li>Mi Hoja de Vida:
                                <ul>
                                    <li class="links"><a href="cve.html">Mi Hoja de Vida - Español</a></li>
                                    <li class="links"><a href="cvi.html">Mi Hoja de Vida - Inglés</a></li>
                                </ul>
  ...

CSS

header {
    /*text-align: left;*/
    padding: 10px 0px 20px 20px;
    background: gray;
    height: auto;
    overflow: hidden;
}

/* */
header h1 {
    font-size: 40px;
    margin: 0;
}

/*header p {
    font-size: 20px;
    margin: 0;
}*/


#rectangle {
    float: left;
    margin: 65px 0px 10px 60px;
    width:10px;
    height:90px;
    background:#37B7DE;
    /*position: relative; #No effect*/
     
}



#titulo {
    float: left;
    margin: 60px 20px 10px 10px;
    /*border-left: solid red;*/
 
}




body { 
	font-family: Verdana, Tahoma, sans-serif;
    margin: 0px 0px 20px 0px;
}






#yo {
    height: auto; 
    width: 50%;
    /*max-width: 300px; 
    max-height: 300px;*/
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-image: 25 25 round;
    
    /*border: 1px solid green;*/
}



aside.textoimportante {
    font-size: 20px;
}

#container {
   padding: 0px 0px 10px 0px;
   height: auto;
   overflow: hidden;
}


#right {
    width: 30%;
    float: right;
    background: #aafed6;
    text-align: center;
    padding: 20px 40px 0px 0px;
}

#left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
    padding: 20px 20px 0px 120px;
}​​


/*lu > li.link {
        margin: 10px 0px 10px 0px; 
}*/


li.links {
  margin-top: 5px;
}

/*
li.links a:link {
    margin: 10px 0px 10px 0px;
}

*/

footer {
    height: auto;
    overflow: hidden;
    margin: 0;
}



#simbolo {
    margin: 20px 0px 10px 120px;
}
.enlaces ul li ul li{
	background-color:#00437B;
	padding:10px;
	width:200px;
	margin-top:10px;
}
.enlaces ul li ul li a{
	color:#FFFFFF;
	text-decoration:none;
}
}