JSFiddle - React, Tailwind, and code Playground

by pete_b

HTML

<svg width="23" height="15" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <rect id="bar" width="100%" height="3" rx="1" ry="1"></rect>
        <g id="bars">
            <use xlink:href="#bar"></use>
            <use xlink:href="#bar" y="6"></use>
            <use xlink:href="#bar" y="12"></use>
        </g>
    </defs>
    <use class="bars" xlink:href="#bars"></use>
</svg>

CSS

body {
    background: powderblue;
}
svg {
    padding: 10px;
    border-radius: 5px;
    background: #333;
}
svg:hover {
    background-color: #fff; 
}
svg:hover .bars {
    fill: #333;
}
.bars {
    fill: #ddd;
}