JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<svg class="svg icon menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><rect x="4" y="7" width="24" height="2"/> <rect x="4" y="15" width="24" height="2"/><rect x="4" y="23" width="24" height="2"/></svg>

SCSS

.menu {    
	rect:nth-of-type(1) {
	    fill: yellow;
        transform: rotate(45deg) translate(21%, -25%);
	}
    
    rect:nth-of-type(2) {
        fill: yellow;
        transform: rotate(-45deg) translate(-50%, 21%);
    }
    
    rect:nth-of-type(3) {
        display: none;
    }
}