JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="header">
        <div class="encabezado">
        <div class="logotipo"><img src="archivos/imagenes/xlogonexcen.png" width="45" /></div>
        <div class="nav">
        <ul>
            <li><a href="#" class="aqui">Inicio</a></li>
            <li><a href="#">Servicio</a></li>
            <li><a href="#">Saber mas</a></li>
            <li><a href="#">Contactanos</a></li>
            <li>
            <form>
                <input name="search" type="text" class="buscar" placeholder=" B u s c a r. . .">
            </form></li>
        </ul>
        </div>
    </div>
    </div>
     
    <section style="clear:both;">
    <div class="todo">
            <div style="float:left; padding:10px; min-height:500px;   width:200 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
            <div>PHP CSS. Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG. CSS describe como debe ser renderizado el elemento estructurado en pantalla, en papel, hablado o en otros medios.16 ago. 20</div>
    </div>
    <div class="mitad">
        <div style="float:left; padding:10px; min-height:500px;   width:200 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
        <div style="overflow:auto; height:130px;">PHP CSS. Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG. CSS describe como debe ser renderizado el elemento estructurado en pantalla, en papel, hablado o en otros medios.16 ago. 20</div>
    </div>
    <div class="mitad">
        <div style="float:left; padding:10px; min-height:500px;   width:200 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
        <div...

CSS

@charset "utf-8";
    /* CSS Document */
    *{
        margin:0px;
        padding:0px;
    }
    body{
        background-color: #CCCCCC;
    }
    .header{
        width:100%;
        height:50px;    
        background:#333333;
    }
    .encabezado{
        margin:auto;
        width:90%;
        max-width:900px;
        position:relative;
    }
    .logotipo{
        position: absolute;
        width: 50px;
        height: 50px;
        top: 0px;
        left: 0px;
        padding:1px;
    }
    .nav{
        position: absolute;
        left: 70px;
        height: 50px;
        width: auto;
        top: 0px;
    }
    .nav ul{
        list-style:none;
    }
    .nav ul li{
        float:left;
        background:#333333;
    }
    .nav ul li a{
        padding: 15px; 10px;
        display: block;
        color: #FFF;
        text-decoration: none;
        border-radius:10px 0px 10px 0px;
    }
    .nav ul li a:hover{
        color: #2d2d2d;
        background-color: #D8D8D8;
    }
    .nav ul li a:active{
        color: #2d2d2d;
        background-color: #C1C1C1;
    }
    .nav ul li .aqui{
        color: #2d2d2d;
        background-color: #CCCCCC;
        border-radius:0px 10px 0px 0px;
    }
    section{
        margin: auto;
        width: 90%;
        max-width: 900px;
    }
    footer{
        background-color: #BBBBBB;
        height:auto;
        min-height:100px;
    }
    .footer{
        margin: auto;
        width: 90%;
        max-width: 900px;   
    }
    .buscar{
        margin:10px;
        width: 60px;
        box-sizing: border-box;
        border-radius: 3px;
        font-size: 11px;
        background-color: white;
        background-image: url(buscar.png);
        background-position: 1px 1px; 
        background-repeat: no-repeat;
        background-size:contain;
        padding: 6px 10px 6px 30px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
    }
    .buscar:focus {
        width:...