JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<ol class="sms-dialog">
  <li class="sms">
    <time class="sms-time">2011-11-12 14:54:39</time>
    <p class="sms-text sms-text--user">
      A que horas vens?
    </p>
  </li>
  
  <li class="sms">
    <time class="sms-time">2011-11-12 14:54:39</time>
    <p class="sms-text sms-text--buddy">
      Lá para as 8. Mas antes vou passar pelo Supermercado como me pediste. O que queres que traga? É só a fruta e as fraldas?
    </p>
  </li>
  
  <li class="sms">
    <time class="sms-time">2011-11-12 14:54:39</time>
    <p class="sms-text sms-text--user">
      Bada ba bada kak woo li scha ka pi ti pi ri p whaza so my aka ka ka?
    </p>
  </li>
  
  <li class="sms">
    <time class="sms-time">2011-11-12 14:54:39</time>
    <p class="sms-text sms-text--buddy">
      kn jbk jvibnvu fygi g8goi ufvu uvu vigugl ojjn obn onbo .
    </p>
  </li>
  
  <li class="sms">
    <time class="sms-time">2011-11-12 14:54:39</time>
    <p class="sms-text sms-text--user">
      
    </p>
  </li>
</ol>

CSS

body{
  margin: 0; padding: 20px;
  background-color: #E5E8D3;
}

.sms-dialog{
  margin: 0; padding: 0; 
  list-style-type: none;
  font: 14px/1.5 helvetica;
}

.sms{
  overflow: hidden;
  padding: 0 9px;
}

.sms-time{
  display: block;
  margin-bottom: 13px;
  text-align: center;
  font-weight: 700;
  color: #888;
}

.sms-text{
  position: relative;
  -moz-box-sizing: border-box;
  max-width: 55%; min-width: 20%;
  min-height: 1.5em;
  margin-bottom: 13px;
  padding: 10px 15px;
  border: 1px solid #aaa;
  border-radius: 15px;
  box-shadow: inset 0 15px 43px white,
              inset 0 -1px 6px white;
}

.sms-text--user{
  float: left;
  background-color: #E8E8E8;
}

.sms-text--buddy{
  float: right;
  background-color: #C1E800;
}

.sms-text:after{
  content: "";
  position: absolute;
  bottom: 6px;
  width:; height:;
  background:;
}

.sms-text--user:after{
  left: -11px;
  background-image:;
}

.sms-text--buddy:after{
  right: -11px;
  background-image:;
}