JSFiddle - React, Tailwind, and code Playground
HTML
<div id="Tile">
<h2>
<span id="Top">0.0%</span>
</h2>
<ul class="Middle">
<li>
<span>2.9k</span>
USERS
<span>BECAME ACTIVE</span>
</li>
</ul>
<span>
<svg width="200" height="80">
<g transform="translate(5,5)">
<rect y="23.33333333333333" x="15" height="11.666666666666671" width="5">
</rect>
<rect y="35" x="21" height="0" width="5">
</rect>
<rect y="25.666666666666686" x="27" height="9.333333333333314" width="5">
</rect>
<rect y="35" x="33" height="4.666666666666686" width="5">
</rect>
<rect y="25.666666666666686" x="39" height="9.333333333333314" width="5">
</rect>
<rect y="25.666666666666643" x="45" height="9.333333333333357" width="5">
</rect>
<rect y="25.666666666666686" x="51" height="9.333333333333314" width="5">
</rect>
<rect y="30.333333333333343" x="57" height="4.666666666666657" width="5">
</rect>
<rect y="32.666666666666686" x="63" height="2.3333333333333144" width="5">
</rect>
<rect y="32.66666666666664" x="69" height="2.333333333333357" width="5">
</rect>
<rect y="16.33333333333333" x="75" height="18.66666666666667" width="5">
</rect>
<rect y="32.666666666666686" x="81" height="2.3333333333333144" width="5">
</rect>
<rect y="35" x="87" height="0" width="5">
</rect>
<rect y="35" x="93" height="20.999999999999993" width="5">
</rect>
<rect y="35" x="99" height="34.999999999999986" width="5">
</rect>
</g>
</svg>
</span>
</div>
CSS
#Tile {
background:red;
overflow:hidden
}
span a {
background:#222;
color:#fff;
display:block;
float:left;
margin:10px 10px 0 0;
padding:5px 10px
}