JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navbar">
		<div class = "option">link</div>
		<div class = "option">link</div>
		<div class = "option">link</div>
		<div class = "option">link</div>
		<div class = "option">link</div>
	</div>

CSS

.option:hover
{
	font-style: normal !important;
	cursor: pointer;
	box-sizing: border-box;
	left: 0;
	top: 0;
    position: relative;
}
.option:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: -2px;
    top: 0;
    z-index: -1;
}
.option:hover:before {
    background-color: gold;
	-webkit-transform: skew(-25deg);
	transform: skew(-25deg);
	transition-property: background;
	transition-duration: .4s;
}