JSFiddle - React, Tailwind, and code Playground

by Serg78

HTML

<div class="affichage_publication_membre">
                    <div class="affichage_publication_membre_image">
						<div class="image" style="background-image:url(http://image.noelshack.com/fichiers/2016/12/1458811226-3983.jpg)"> 
							<img src="http://image.noelshack.com/fichiers/2016/12/1458811226-3983.jpg" alt="image auteur">
						</div>	
                    </div>
                    <div class="affichage_publication_membre_message">
                        <div class="nom">Alan Dole</div>
                        <div class="message">ddddddddddddsddddddddddddsddddddddddddsddddddddddddsddddddddddddsddddddddddddsddddddddddddddddddddddddsddddddddddddsdddddddd</div>	
							<div class="action">
							<span class="date">Il y a 40 minutes</span> |
																							
									<span class="commentaires"><a href="supprimerpubli.php?id=34">Supprimer</a></span>
						
																		<span class="commentaires"><a href="profil.php?id=2&amp;a=rp&amp;p=34">Reponses</a></span>
																		
									
																
						  <span class="like">
						  J'aime ♥
						  </span>
						</div>
                    </div>
                </div>

<div class="affichage_publication_membre">
                    <div class="affichage_publication_membre_image">
				<div class="image" style="background-image:url(http://image.noelshack.com/fichiers/2016/12/1458811226-3983.jpg)"> 
							<img src="http://image.noelshack.com/fichiers/2016/12/1458811226-3983.jpg" alt="image auteur">
						</div>	
                    </div>
                    <div class="affichage_publication_membre_message">
                        <div class="nom">Alan Dole</div>
                        <div...

CSS

.affichage_publication_membre {
			width:420px;
			position:relative;
			}
			.affichage_publication_membre_image .image {
			width:68px; height:75px; float:left;
			position: absolute;
			background-size: cover;
			}

			.affichage_publication_membre_image .image img {
			display: none;
			}


			.affichage_publication_membre_message {
			width:390px;
			margin-left: 80px;
			position: relative;
			padding: 0 0 2px;			
			}
			.affichage_publication_membre_message .message {
			overflow: hidden;           
			word-wrap: break-word;
			width:380px;
			font-size: 11px;
			}
			.affichage_publication_membre_message .nom {
			overflow: hidden;           
			width:380px;
			font-weight: bold;
			color: #45668f;
			font-size: 13px;			
			}
			.affichage_publication_membre_message .action {
			overflow: hidden;           
			width:380px;
			display:inline-block;
			font-size: 11px;
			margin-top: 5px;
			}       
			.affichage_publication_membre_message .action .like{
			float:right;
			color: #C9D8E5;
			}       
			.affichage_publication_membre_message .action .date {
			color: #808080;
			}
			.affichage_publication_membre_message .action .commentaires a {
			color:#45668f;
			text-decoration:none;
			display:inline-block;
			}