JSFiddle - React, Tailwind, and code Playground

by daneden

HTML

<a class="deals" href="#"><em>3</em> Deals available!</a>

CSS

body {
    margin: 24px;
}

a.deals {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    background: #444;
    display: inline-block;
    font-size: 12px;
    padding: 5px;
    border-radius: 5px;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 0 0 1px #000, inset 1px 1px rgba(255,255,255,.2);
    text-align: center;
    overflow: hidden;
    /* it can be any width! */
    width: 40%;
}

a.deals em {
    padding: 5px;
    margin: -5px 2px -5px -5px;
    color: #333;
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
    background: #fd3;
    content: attr(data-count);
    border-radius: 5px 0 0 5px;
    float: left;
}