JSFiddle - React, Tailwind, and code Playground

by Osoascam

HTML

<div class="tweet">
  <img class="avatar" src="http://img12.deviantart.net/0920/i/2013/033/d/b/dingodile_by_captain_regenold-d5tnw5l.png">
  <div class="content">
    <div class="top">
      <span class="username">Juan Carlos</span>
      <span class="arroba">@juanca</span> •
      <span class="time">2min</span>
    </div>
    <div class="text">
      ¿Y vos por qué te metés si tampoco te afecta, entonces?
      <div class="tweet">
        <img class="avatar" src="https://yt3.ggpht.com/-mOnvJkOxpfU/AAAAAAAAAAI/AAAAAAAAAAA/2wTTcG65L4Q/s100-c-k-no-mo-rj-c0xffffff/photo.jpg">
        <div class="content">
          <div class="top">
            <span class="username">Laura María</span>
            <span class="arroba">@lauma</span> •
            <span class="time">3h</span>
          </div>
          <div class="text">
            ¿Y a usted en qué le afecta que él la critique, METIDO?
            <div class="tweet">
              <img class="avatar" src="http://fc08.deviantart.net/fs71/f/2013/077/5/e/crash_bandicoot__157_by_videogamecutouts-d5yfmix.png">
              <div class="content">
                <div class="top">
                  <span class="username">Juan Fernando</span>
                  <span class="arroba">@Juanfer</span> •
                  <span class="time">6h</span>
                </div>
                <div class="text">
                  Mae, ¿en qué le afecta que ella haga UN TWEET donde celebre su felicidad?
                  <div class="tweet">
                    <img class="avatar" src="http://i.imgur.com/JGaeX.png">
                    <div class="content">
                      <div class="top">
                        <span class="username">Juan Pablo</span>
                        <span class="arroba">@juanpa</span> •
                        <span class="time">8h</span>
                      </div>
                      <div class="text">
                        Si fuera cierto, ¿para qué tiene que andarlo diciendo?
                 ...

CSS

* {
  box-sizing: border-box;
  font-family: Avenir;
}

.tweet {
  border: 1px solid rgb(10,105,180);
  border-radius: 4px;
  padding: 12px;
  margin: 5px;
  background: rgba(100,150,255,0.25);
}

.content {
  width: calc(100% - 50px);
  display: inline-block;
}

.avatar {
  width: 40px;
  border-radius: 50%;
  vertical-align: top;
}

.username {
  font-weight: bold;
}

.arroba,
.time {
  color: rgb(10,105,180);
}