JSFiddle - React, Tailwind, and code Playground

HTML

<div class="docBox">
        <div class="previewImgBox">
          <div class="thumb"><img src="imagenes/thumb.jpg">IMAGE HERE</img></div>
        </div>
        <div class="previewData">
          <div class="docHeaderContainer">
            <p class="docTitle">RUTA - Choferes</p>
            <p class="docPath">Tortuguitas / 20357562704 / Choferes / 35756720</p>
          </div>
          <p class="docKeys"><span class="docDate">Fecha: 27/06/2012</span> - Keyword 2: valor - Keyword 3: valor Keyword 4: valor - Keyword 5: valor - Keyword 6: valor- Keyword 2: valor - Keyword 3: valor Keyword 4: valor - Keyword 5: valor - Keyword 6: valor- Keyword 2: valor - Keyword 3: valor Keyword 4: valor - Keyword 5: valor - Keyword 6: valor</p>
        </div>
      </div>

CSS

.docBox {
    height: 300px;
    width: 340px;
    border: solid 1px #006633;
    display: inline-block;
    margin: 10px 0px 0px 10px;
    overflow: hidden;
}

.previewImgBox {
    height: 60%;
    /*border: solid 1px #00CC33;*/
    text-align: center;
}

.previewImgBox .thumb {
    margin-top: 5px;
}
.previewData {
    height: 40%;
    /*border: solid 1px #00CC33;*/
    overflow: auto;
}

.previewData p {
    margin: 5px 5px 0px 5px;
}

.previewData .docHeaderContainer {
    background: #FFF;
    border: solid 1px #00CC33;
    position: absolute;
}


.previewData .docDate {
    font-family: arial, sans-serif;
    font-weight:bold;
    font-size: 13px;
    color: #999999;
}

.previewData .docTitle {
    color: #111FCC;
    font-family: arial, sans-serif;
    font-size: 18px;
}

.previewData .docPath {
    color: #008029;
    font-family: arial, sans-serif;
    font-size: 13px;
    margin-bottom: 5px;
}

.previewData .docKeys {
    color: #333333;
    font-family: arial, sans-serif;
    font-size: 13px;
    margin-top: 50px;
}