JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<span class="icon-dustinburger">
    <span></span>
    <span></span>
    <span></span>
</span>

CSS

.icon-dustinburger {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 15px;
}

.icon-dustinburger span {
    display: block;
    height: 1px;
    background: #777 none repeat scroll 0% 0%;
    margin-bottom: 5px;
}

.icon-dustinburger span:nth-child(2) {
    width: 75%;
}

.icon-dustinburger span:nth-child(3) {
    width: 50%;
    margin-bottom: 0px;
}

:hover > .icon-dustinburger span, .active > .icon-dustinburger span {
    background: #333 none repeat scroll 0% 0%;
}