JSFiddle - React, Tailwind, and code Playground

by fuggfuggfugg

HTML

<div class="outer">
    <span class="float_right_inline">65%</span>
  <div class="inner">
   &nbsp;
  </div>
     
</div>

CSS

body{
    font-family: arial;
}

.outer {
    padding:2px;
    background:#FFF;
    border:solid 1px #CCC;
        width: 50px;
   
}

.inner{
    width:35%;
   
    text-align:center;
 background: rgb(107,186,112); 
    display: inline-block;
}



.float_right_inline{
   float:right;
    margin-bottom: -18px;
    z-index:1;
    position:relative;
        font-size: 80%;
    line-height: 17px;
    color: white;
    text-shadow: 0 -1px 0 rgb(107,186,112),0px 1px 0 rgb(107,186,112),1px 0 0 rgb(107,186,112),-1px 0 0 rgb(107,186,112),-1px -1px 0 rgb(107,186,112),-1px 1px 0 rgb(107,186,112),1px 1px 0 rgb(107,186,112),1px -1px 0 rgb(107,186,112);
    
}