JSFiddle - React, Tailwind, and code Playground

by edelvyncarl_seraspe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="dojo col-md-4" style="display: flex; flex-direction: column; align-items: flex-start;">
  <div class="col-md-12 points-update">Points update!</div>
  <div class="col-md-12 steps-points">🚶 Yesterday you earned <br/> 1,400 points for walking <br/> 14,020 steps.</div>
  <div class="col-md-12 egv-points">📉 Yesterday you earned <br/> 4700 points for keeping </br/> glucose 65% in range.</div>
  <div class="col-md-12 total-points">🏆 Total points: 64,675.</div>
  <div class="col-md-12 points-to-go">Keep it up! Only 15,352 <br/> points until your next belt.</div>
  <div class="col-md-12 belt-desc">In martial arts, bel colors have ancient meaning. Brown symbolizes the maturing of the plant and harvest time as you gain the fruit of earlier hard work.</div>
  <div class="col-md-12 belt"><img src="https://test-chatconnect.base.study/Content/Belts/White-0.png"></div>  
</div>

CSS

.dojo {
  position:relative;
  border:1px solid black;
  width:185px;
  font-size:1em;
  padding:10px;
  color:gray;  
}

.dojo > div {
  margin-bottom:10px;
  padding:3px;    
}
.dojo > div.belt {
    background-color:#f1f1f1;
    box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
    width:112px;
    height:65px;    
    display:inline-table;
    margin:0px auto;
    position:relative;
    padding:5px 3px;
}

div.belt > img {
  position:absolute;
  width:115px;
  height:60px;  
}