JSFiddle - React, Tailwind, and code Playground

by p4bl1t0

HTML

<body>
    <h1><img src="lelogo" alt="LeLogo" /></h1>
    <section title="introduccion" role="main" class="intro">
        <p>Introdución: LELOGO Lorem ipsum dolor sit amet, puto suam in modo compungi mulierem. Lacrimas erit principium intus huius dulcis nostro alius ut libertatem non coepit. Sanguine mortuus ait Cumque ego dum miror diligere. Respondens sed haec in lucem concitaverunt in. A patriam rex Dionysiadi suo celaturos Tantus puella mihi, contremuit in modo invenit Boreas ingreditur est cum autem Apolloni codicellos. Respondens sed haec in deinde cupis ei Taliarchum in modo cavendum. </p>
        <a href="#" class="boton-primario">Descargar</a>
        <a href="#" class="boton-terciario">Docs</a>
    </section>
    <section class="empresas grupo">
        <h2>LELOGO en la industria</h2>
        <div class="empresa">
            <h3>Empresa X</h3>
            <p>Animae tuae infami cum unde non potentiae Apollonium illis Verena animo discubuit Adiuro me in! Ideo ratione dedit erat coram posset diam ille sui alius campo iactavitque per te finis laeta quis mihi cum. Dionysiadi Apollonius eius est se ad quia quod ait regem adventu nihil. Casus homini interimat potius operabatur ad per sanctus ait. Actum justo libertatem adhuc quid nobis si non dum, genere ei sed eu fides piissimi deo adoptavit cum. Coniugem flebant Tharsiam in lucem in deinde plectrum anni ipsa hospes. </p>
        </div>
        <div class="empresa">
            <h3>Empresa Y</h3>
            <p>Animae tuae infami cum unde non potentiae Apollonium illis Verena animo discubuit Adiuro me in! Ideo ratione dedit erat coram posset diam ille sui alius campo iactavitque per te finis laeta quis mihi cum. Dionysiadi Apollonius eius est se ad quia quod ait regem adventu nihil. Casus homini interimat potius operabatur ad per sanctus ait. Actum justo libertatem adhuc quid nobis si non dum, genere ei sed eu fides piissimi deo adoptavit cum. Coniugem flebant Tharsiam in lucem in deinde plectrum anni ipsa...

CSS

body,html
{
    background:#333333;
    color:white;
    font-family:Helvetica;
    margin:0;
    padding:0;
}
h1, h2
{
    text-align:center;
}
.intro
{
    text-align:center;
    margin-bottom:10px;
}
.boton-primario {
    background: -moz-linear-gradient(center top , #74B042, #56A00E) repeat scroll 0 0 #74B042;
    border: 1px solid #56A00E;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    padding: 0.2em 0.5em;
    text-decoration: none;
    text-shadow: 0 -1px 1px #333333;
    display:inline-block;
}
.boton-primario:hover {
}
.boton-terciario {
    background-color: #CCCCCC;
    background-image: -moz-linear-gradient(center top , #CCCCCC, #DDDDDD);
    border: 1px solid #CCCCCC;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    color: #6C6C6C;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    padding: 0.2em 0.5em;
    text-decoration: none;
    text-shadow: 0 0 0 #234403;
    display:inline-block;
}
.boton-terciario:hover {
}
.empresas
{
    background:#202020;
    padding:0 10px;
}
.empresa
{
    float:left;
    width:33.33%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding:0 10px;
}
.empresa p
{
    text-align:justify;
}
.ejemplo
{
    margin:0 3%;
    width:64%;
    float:left;
}
aside
{
    margin:0 3%;
    width:24%;
    float:left;
}
aside a
{
    color:green;
    display:block;
}
aside ul
{
    list-style-type:none;
}
footer
{
    margin:0 15%;
    clear:both;
    border-top:1px solid #888888;
    text-align:center;
}
footer menu li
{
    display:inline;
    boder-right:1px solid green;
}
footer menu li a
{
    color: green;
    text-decoration:none;
}
/*-------------------------------CLEARFIX----------------------------------------------*/
.grupo:before,
.grupo:after {
    content:"";
    display:table;
}
.grupo:after {
    clear:both;
}
.grupo {
    zoom:1; /* For IE 6/7 */
}