JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="sidenav">
    <div class="wrapper">
        <div class="message">About</div>
        <div class="circle">
            <div class="circle-mid"></div>
        </div>
    </div>
    <div class="wrapper">
        <div class="message">Techs</div>
        <div class="circle">
            <div class="circle-mid"></div>
        </div>
    </div>
    <div class="wrapper">
        <div class="message">Works</div>
        <div class="circle">
            <div class="circle-mid"></div>
        </div>
    </div>
    <div class="wrapper">
        <div class="message">Contact</div>
        <div class="circle">
            <div class="circle-mid"></div>
        </div>
    </div>
</nav>

SCSS

$initial_circle_bgc: #000;
$central_circle_border_colour: #6AADF1;
$initial_circle_diamiter: 11px;
$first-transition-timing: 200ms;

@mixin centered-parent{
	 position: absolute;
	 transform: translate(-50%, -50%);
	 -webkit-transform: translate(-50%, -50%);
}

@mixin centered-child {
	 top: 50%;
     left: 50%;
	 position: absolute;
	 transform: translate(-50%, -50%);
	 -webkit-transform: translate(-50%, -50%);
}

@mixin circle($diamiter) {
	 width: $diamiter;
	 height: $diamiter;
	 border-radius: 50%;
}
@mixin transit($time){
	transition: all $time ease;
}

.circle-mid{
	@include transit($first-transition-timing);
	border: 2px solid #6AADF1;
	@include circle($initial_circle_diamiter*0);
	@include centered-child;
	opacity: 0;
}



.circle{
	@include centered-child;
	width: 50%;
	position: relative;
	background-color: $initial_circle_bgc;
	@include circle($initial_circle_diamiter*0.5);
	@include transit($first-transition-timing);
	}


.sidenav{
	position: fixed;
	right: 0;
 	top: 50%;
  	transform: translateY(-50%);
	width: 10%;
    min-width: 100px;
	.wrapper{
		margin: 0 auto;
		margin-top: 40px;
	}
	&:last-child{
		margin-bottom: 20px;
	}
}

.wrapper{
	cursor: pointer;
    position: relative;
	&:hover{
		.message{
			@include transit($first-transition-timing);
			opacity: 1;
            left: -20%;
		}
		.circle-mid{
     		background-color: #FFF;
     		@include circle($initial_circle_diamiter);
			@include transit($first-transition-timing);
			opacity: 1;
	}
}

}

.message{
	@include transit($first-transition-timing);
	position: absolute;
	left: -10%;
	bottom: -1%;
	opacity: 0;

}