JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<div class='units'>
    <div>
    <input value='40' />
    <em>%</em>
    </div>
    <div class='selected'>
    <input value='1' />
    <em>flex</em>
    </div>
    <div>
    <input value='375' />
    <em>px</em>
    </div>
</div>
<div class='units'>
    <div>
    <input value='40' />
    <em>%</em>
    </div>
    <div class='selected'>
    <input value='1' />
    <em>flex</em>
    </div>
    <div>
    <input value='375' />
    <em>px</em>
    </div>
</div>

CSS

.units { padding:2px; font-size:11px; display:inline-block;  }
.units > div { display:inline-block; text-align:center; background: #e7e9f4; color: #222; padding:4px; border-radius: 5px; cursor:pointer; margin:2px; border:solid 1px #cacfec; display:block; }

.units > div.selected, .units > div:hover { background: #94a1e2; }

.units > div input { width: 30px; font-size: 10px; text-align:center;}
.units em1 { display:block; }