JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<div class="wrap">
  <div class="effect">Texto sem o efeito</div>
  <div class="effect">Texto com o efeito
  <img src="http://i74.servimg.com/u/f74/18/12/37/46/stats_10.png" alt="" /></div>
</div>

CSS

.wrap{
  background: #fff;
  padding: 1em;
  width: 70%;
  margin: 0 auto;
  overflow: hidden;
}
.effect{
  width: 50%;
  float: left;
  text-align: center;
  color: #bbb;
  font: bold 16px Arial, Helvetica, sans-serif;
  position: relative;
}
.effect img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
}