JSFiddle - React, Tailwind, and code Playground

HTML

<div class="karma1" style="text-align:center">
<div class="karma2" style="text-align:center">
<span class="letter3">$10000   30%   $3000</span>
<div class="karma3" style="margin:-7px auto 0px">
<div class="gray" style="width: 70%;"></div><div class="red" style="width: 30%;"></div>
</div>
<div class="karma4" style="text-align:center">
<span class="letter">Обновлено:  18/09/2011</span>
</div>
</div>
</div>

CSS

.karma1 {
    text-align: center;
    width: 100%;
}
.karma2 {
    border: 0 none;
    float: left;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100%;
}
.karma3 {
    border: 0 none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 120px;
}
.karma4 {
    border-bottom: 1px solid #CCCCCC;
    float: left;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 9px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100%;
}
.letter {
    background-color: inherit;
    color: #010101;
}
.letter3 {
    background-color: inherit;
    border: 0 none;
    color: #010101;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 9px;
    font-weight: bold;
    margin: 3px;
}
.karma3{
    width: 120px;
}
.gray, .red{
    display: inline-block;
    height: 7px;
}
.gray{
    background-color: #CCC;
}
.red{
    background-color: red;
}