JSFiddle - React, Tailwind, and code Playground

Simple CSS chart for dynamic content

by Jennifer Perrin

HTML

<div class="container">
    <div class="record">
        <div class="bar" style="width:74%;">
            <span>Mozilla</span>
        </div>
        <div class="p"><span>74%</span></div>
    </div>
    <div class="record">
        <div class="bar" style="width:30%;">
            <span>IE</span>
        </div>
        <div class="p"><span>30%</span></div>
    </div>
    <div class="record">
        <div class="bar" style="width:22%;">
            <span>Safari</span>
        </div>
        <div class="p"><span>22%</span></div>
    </div>
    <div class="record">
        <div class="bar" style="width:20%;">
            <span>Opera</span>
        </div>
        <div class="p"><span>20%</span></div>
    </div>
</div>

CSS

body { margin: 50px; }

.container{
 width:300px;
 font-family: Arial;
 }
 
.record{
 float: left;
 width: 100%;
 border: 1px solid #333;
 background-color: #f0f0f0;
 margin-bottom: 4px;
 -moz-border-radius: 0px 10px 10px 0px;
 border-radius: 0px 10px 10px 0px;
 }
 
.bar {
 background: #444;
 float: left;
 clear: left;
 height: 30px;
 }
 
.bar span{
 font-size: 12px;
 font-weight: bold;
 color: #fff;
 float: left;
 margin-left: 5px;
 margin-top: 7px;
 }
 
.p{
 padding-top: 3px;
 float: right;
 color: #444;
 clear: right;
 font-size: 12px;
 font-weight: bold;
 height: 25px;
 }
 
.p span{
 font-size: 12px;
 font-weight: bold;
 float: left;
 margin-right: 5px;
 margin-top: 5px;
 }