JSFiddle - React, Tailwind, and code Playground

by justin_thomas

HTML

<div id="output"> 
    <span class="grade">Your grade :
      <span class="total">123</span>/<span class="max">777</span>
      <div class="percentage">23.45%</div>
    </span>
</div>

CSS

#output {
    text-align: center;
    font-family : roboto light;
    color : #A4C639;
    font-size : 30px;
    width: 250px;
}
.grade {
    font-size : 25px;
    color: black;
}
.total {
    color : #A4C639;
}
.max {
    margin-left:0;
}
.percentage {
    text-align: center;
    font-size: 200%;
    background : #A4C639;
    color : #FFFFFF;
    padding : 15px;
    border-radius : 15px;
}