JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div style="margin: 40px;">

    <div style="position: relative;">
        <div style="border: 1px solid #aaa; position: absolute; height: 30px; width: 98px; background: #eee;">
            <div style="position: absolute; top: 0px; left: 0px; background: #ccc; border-right: 1px solid #aaa; height: 100%; width: 32px; font-family: 'Hubspots Custom Font'; font-size: 23px; text-align: center;">p</div>
            <div style="position: absolute; top: 0px; left: 33px; border-right: 1px solid #aaa; height: 100%; width: 33px;"></div>
        </div>
        <p style="padding-left: 120px; padding-top: 8px;"><b>Tabs</b> &mdash; Find your tools more quickly.</p>
    </div>

    <div style="position: relative; padding-top: 20px;">
        <div style="border: 1px solid #aaa; position: absolute; height: 30px; width: 98px; background: #eee;">
            <div style="position: absolute; top: 0px; left: 0px; background: #ccc; border-right: 1px solid #aaa; height: 100%; width: 32px; font-family: 'Hubspots Custom Font'; font-size: 23px; text-align: center;">p</div>
            <div style="position: absolute; top: 0px; left: 33px; border-right: 1px solid #aaa; height: 100%; width: 33px;"></div>
        </div>
        <p style="padding-left: 120px; padding-top: 8px;"><b>Tabs</b> &mdash; Find your tools more quickly.</p>
    </div>
    
</div>

CSS

html, body { font-family: "helvetica neue"; font-size: 13px; color: #444; background: -webkit-linear-gradient(#fff, #eee); height: 100% }