JSFiddle - React, Tailwind, and code Playground

by AkaiKen

HTML

<div class="pad">
    <div class="newscenter">
            <img src="img/site/accueil/actu_bref.jpg" alt="L'actualités en bref" height="320" />    
        </div>
            <a href="actualites.php?page=actu2" class="bloc-actu_bref-lien">
                            <img class="logo" src="img/site/accueil/tn_logo.png" alt="le logo" height="50" />
              
                        <p class="brefcontenu">
                            <span class="brefdate">09/12/11</span>
                            <br />TITRE DE L'ACTUALIT2
                            <br />Contenu de l'actualité ... 
                            <span style="color: #e53e14;">la suite >></span>
                        </p>
                    
            </a>
</div>

CSS

.newscenter {
    float:left;
}

.bloc-actu-bref {
    margin:auto;
}


a.bloc-actu_bref-lien {
    display: block;
    text-decoration: none;
    width: 400px; /*205 au début */ 
    height: 65px;
    float: left;
    margin-bottom: 10px;
    font-family: Calibri;
    text-align:center;

}

.logo {float:left;}
a:hover.bloc-actu_bref-lien {
    background: #f8deb9;
}
    p.bloc-actu_brefdate {
        color: #020202;
        font-size: 12px;
        padding: 0 2px;
        margin: 0;
        border:0;
    }
    p.bloc-actu_breftitre {
        color: #000080;
        font-size: 15px;
        font-weight: bold;
        padding: 2px;
        height: 30px;
        overflow: hidden;
    }
    p.bloc-actu_brefcontenu {
        color: #020202;
        font-size: 12px;
        height: 30px;
        width: 205px; /*205 au début */ 
        overflow: hidden;
        padding: 0 2px;
        margin: 0;
    }
    p.bloc-actu_brefdetails {
        color: #020202;
        font-size: 12px;
        font-weight:bold;
        text-transform: uppercase;
        padding: 0;
        margin: 0;
    }