JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="navbar">
			<input type="checkbox" id="navbar-toggle-cbox">
			<label for="navbar-toggle-cbox" class="navbar-toggle collapsed">
				<div class="stripes">
					<div class="stripe first"></div>
					<div class="stripe second"></div>
					<div class="stripe third"></div>
				</div>
			</label>
		</nav>

CSS

.stripes {
	cursor: pointer;
	width: 35px;
}

.stripe {
	width: 35px;
	height: 5px;
    margin: 6px 0;
	transition: background-color 10s;
    background-color: black;
}

label {
	background-color: black;
}

input {
	display: none;
	background-color: black;
}

input:checked + .navbar-toggle .stripe {
	background-color: red;
}

input:checked + .navbar-toggle .stripe.first {
	-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

input:checked + .navbar-toggle .stripe.second {
	opacity: 0;
}

input:checked + .navbar-toggle .stripe.third {
	-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}