JSFiddle - React, Tailwind, and code Playground

by chetfarley

HTML

<strong class="warning">Attention Needed <span>+</span></strong>
<br /><br />
<strong class="danger">Action Required <span>+</span></strong>

CSS

strong {
    font:bold 0.8em Helvetica, Arial, sans-serif;
    cursor:pointer;
}
.warning {
    color:#F17D39;
}
.warning span {
    background:#F17D39;
}
.danger {
    color:#F00;
}
.danger span {
    background-color:#F00;
}
strong span {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    box-shadow:         0 1px 2px 0 rgba(0, 0, 0, 0.3);
    border: 2px solid #FFF;
    color: #FFFFFF;
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    line-height: 0.8em;
    padding: 1px;
    text-align: center;
}

JavaScript

$(document).ready(function() {
    $("strong").click(function() {
        var $this = $(this).find("span");;

        $this.toggleClass("expanded");

        if ($this.hasClass("expanded")) {
            $this.html("&ndash;");
        } else {
            $this.html("+");
        }
    });
});