JSFiddle - React, Tailwind, and code Playground

by Caleb Wong

HTML

<div class="download-progress">
    <div class="progress">
        <span class="meter"></span>
    </div>
    Open
</div>

CSS

body { background: #ccc; }
.download-progress { background: #fff; border-radius: 14px; border: 2px solid #fff; height: 21px; padding: 1px; position: absolute; top: 50px; left: 50px; width: auto; line-height: 21px; }
.progress { background: #2b2b2b; border-radius: 14px; border: 2px solid #2b2b2b; height: 15px; padding: 1px; left: 50px; width: 63px; display: inline-block; }
.meter { background: #ffcc00; border-radius: 14px; display: inline-block; height: 100%; width: 50%; }