JSFiddle - React, Tailwind, and code Playground

HTML

<section class="statusMessageInfo">

      <h2 class="titDots">Visualizações por mensagem</h2>

        <ul class="statusMessageBox">
          <li class="countViews">
            <h6>Visualizações</h6>
            <p><b>1.000.000</b></p>
          </li>
          <li>
            <h6>Contatos</h6>
            <p><strong>567.000</strong></p>
          </li>
          <li class="overflowMessage">
            <h6>Mensagem</h6>
            <p>There are many variations of passages majority There are many variations of passages majority</p>
          </li>
          <li class="overflowMessage">
            <h6>Mensagem</h6>
            <p>Lorem Ipsum is simply dummy text</p>
          </li>
        </ul>

        <ul class="statusMessageBox">
          <li class="countViews">
            <h6>Visualizações</h6>
            <p><b>1.000.000</b></p>
          </li>
          <li>
            <h6>Contatos</h6>
            <p><strong>567.000</strong></p>
          </li>
          <li class="overflowMessage">
            <h6>Mensagem</h6>
            <p>There are many variations of passages majority There are many variations of passages majority</p>
          </li>
          <li class="overflowMessage">
            <h6>Mensagem</h6>
            <p>Lorem Ipsum is simply dummy text</p>
          </li>
        </ul>

        <ul class="statusMessageBox">
          <li class="countViews">
            <h6>Visualizações</h6>
            <p><b>1.000.000</b></p>
          </li>
          <li>
            <h6>Contatos</h6>
            <p><strong>567.000</strong></p>
          </li>
          <li class="overflowMessage">
            <h6>Mensagem</h6>
            <p>There are many variations of passages majority There are many variations of passages majority</p>
          </li>
          <li class="overflowMessage">
            <h6>Mensagem</h6>
            <p>Lorem Ipsum is simply dummy text</p>
          </li>
        </ul>

        <ul class="statusMessageBox">
          <li...

CSS

/*** statusMessageBox
**** Usado inicialmente na home de Email Marketing
***/

.statusMessageInfo h2 {
    font:24px UbuntuLight, Ubuntu, arial, verdana, tahoma, sans-serif;
    padding: 0 10px 12px;
    margin: 0 0 15px;
    background: url(/img/titDots.png) repeat-X left bottom;
}

.statusMessageInfo .lnkSeta {margin-left:10px;}
.statusMessageBox {
  list-style:none;
  border:1px solid #e5e5e5;
  border-radius:3px;
  margin:0 10px 5px;
  font-family:verdana;
    font-size:12px;
}

.statusMessageBox li:first-child {text-align:center;}
.statusMessageBox li {
  display:inline-block;
  *display:inline;
  *zoom:1;
  max-width:280px;
  vertical-align:middle;
  border-right:1px solid #e5e5e5;
  margin-right:5px;
  padding:13px 5px 12px 0;
}

.statusMessageBox h6 {
  color:#767676;
  font:11px verdana, tahoma, arial, helvetica, sans-serif;
}
.statusMessageBox p {margin:0; color:#2a2a2a;}
.statusMessageBox b {
  font:bold 15px verdana, tahoma, arial, helvetica, sans-serif;
  color:#2a2a2a;
}
.statusMessageBox .countViews h6 {color:rgba(0,0,0,0.5);}
.statusMessageBox .countViews {
  margin:2px;
  min-width:102px;
  position:relative;
  border-right:none;
  padding:9px 8px 9px 0;
  text-align:center;
  background-color:#d5e6bc;
  background-image: linear-gradient(bottom, rgb(213,230,188) 37%, rgb(233,242,216) 100%);
  background-image: -o-linear-gradient(bottom, rgb(213,230,188) 37%, rgb(233,242,216) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(213,230,188) 37%, rgb(233,242,216) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(213,230,188) 37%, rgb(233,242,216) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(213,230,188) 37%, rgb(233,242,216) 100%);

  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.37, rgb(213,230,188)),
    color-stop(1, rgb(233,242,216))
  );
}
.statusMessageBox .countViews:after {
  content:" ";
  position:absolute;
  top:0; right:0;
  width:7px; height:49px;
 ...