JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">						
	<p><img class="picture" src="http://placehold.it/770x300" alt="laUne"/></p>
	<p class="cat1">FOOTBALL</p>
	<p class="cat2">CHAMPIONNAT DE FRANCE</p>
	<p class="cat3">HOMMES</p>
	<a href="#">
        <p class="cat4">
            <b>Offre "PowerUser</b >
            <br /> Alors que l'iPhone 5S est entré en production de masse et que le prochain iPad le suivra bientôt, le Wall Street Journal révèle qu'Apple testerait des iPhone et iPad équipés d'écran plus large.
        
       </p>
    </a>							
</div>

CSS

* {
    padding:0; 
    margin:0;
    box-sizing:border-box;
}
.content {
    position : relative;
    margin-bottom: 21px;
}
.picture {
    width:770;
}
.cat1, .cat2, .cat3{
    position:absolute;
    top:0px;
    text-transform:uppercase;
    color : #fff;
    font-size:18px;  
    opacity:0.7; /* transparency */  
    padding : 6px 12px 5px 15px;
}
.cat1 {
    left:0; 
    width:150px;
    background-color : #000;
    font-family: 'bebas_neueregular';
}
.cat2 {
    left:150px;
    right:150px;
    background-color : #1775df;
    font-family: 'bebas_neueregular';
}
.cat3 {
    right:0; 
    width:150px;
    background-color : #E74C3C;
    font-family: 'bebas_neueregular';
}
.cat4 {
    position:absolute;
    bottom:5px;
    left:0; 
    right:0;
    background-color : #000;
    color : #fff;
    font-size:14px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    opacity:0.7; /* transparency */  
    padding : 5px 12px 10px 15px;
}