JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<div id="wrapper">
    <div class="message">
        <div class="bulle1">
            Ici ton message de la première bulle
        </div>
    </div>
    <div class="message">
        <div class="bulle2">
            Ici la suite des messages
        </div>
        </div>
    <div class="message">
        <div class="bulle1">
            Ici encore une réponse
        </div>
    </div>
</div>

CSS

#wrapper {
    width:300px;
}

.message {
   /*ce que tu veux*/
}

.bulle1, .bulle2 {
    background:#9dc5ed;
    width:75%;
    float:left;
    height:50px;
    margin: 5px 0;
}

.bulle2 {
    background:#93afcc;
    float:right;
}