JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="block-arrow">
	<span class="prev">
		<i></i>
	</span>
	<span class="next">
		<i></i>
	</span>
</nav>

CSS

.block-arrow {
		position: relative;
		cursor: pointer;
	}

	.block-arrow span{
		position: absolute;
		top:0;
		display: block;
		width: 100px;
		height: 100px;
		background: #ff0;
	}
	.block-arrow i {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	
	.block-arrow .prev {
		left:0;
	}

	.block-arrow .next {
		right:0;
	}

	.block-arrow .prev::before,  
	.block-arrow .prev i::before, 
	.block-arrow .prev i::after, 
	.block-arrow .prev::after{
		outline: 1px solid transparent;
		z-index: 0;
		position: absolute;
		left: 50%;
		top:50%;
		width: 3px;
		height: 50%;
		content: '';
		background: #0099cc;
		-webkit-transition: -webkit-transform 0.3s;
		transition: transform 0.3s;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.block-arrow .prev::before, 
	.block-arrow .prev i::before {
		-webkit-transform : translateX(-50%) rotate(-135deg);
		transform:translateX(-50%) rotate(-135deg);
		-webkit-transform-origin: 50% 0;
		transform-origin: 50% 0;
	}
	.block-arrow .prev::after,
	.block-arrow .prev i::after{
		-webkit-transform : translateX(-50%) rotate(-45deg);
		transform:  translateX(-50%) rotate(-45deg);
		-webkit-transform-origin: 50% 0;
		transform-origin: 50% 0;
	}

	.block-arrow  .prev i::before,
	.block-arrow .prev i::after{
		background: red;
		height: 0;
		z-index:100;
		-webkit-transition: height 0.3s, -webkit-transform 0.3s;
		transition: height 0.3s, transform 0.3s;
	}
	
	.block-arrow  .prev:hover::before, 
	.block-arrow .prev:hover i::before
	 {
		-webkit-transform : translateX(-50%) rotate(-120deg);
		transform:  translateX(-50%) rotate(-120deg);
		height: 50%;
	}

	.block-arrow  .prev:hover::after,
	.block-arrow .prev:hover i::after
	 {
		-webkit-transform : translateX(-50%)  rotate(-60deg);
		transform: translateX(-50%) rotate(-60deg);
		height: 50%;
	}