JSFiddle - React, Tailwind, and code Playground

by chardetm

HTML

<div id="topbar">
  fakebook
</div>
<p>
  <span class="message">
    Salut !
  </span>
</p>
<p>
  <span class="message">
    Ça va ?
  </span>
</p>
<p>
  <span class="message by-me">
    Oui et toi ?
  </span>
</p>

CSS

#topbar {
  padding: 12px;
  background: #25B;
  font-family: sans-serif;
  color: white;
  font-size: 28px;
}

p {
  margin: 26px;
}

.message {
  background: #DADADA;
  border-radius: 16px;
  padding: 12px;
  font-family: Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;
}

.by-me {
  float: right;
  background: #25B;
  color: white;
}