JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav-wrapper">

    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
    <div class="circle5"></div>

 </div>

CSS

.circle1 {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #BBBBBB;
}

.nav-wrapper {
    height: 100%;
    width: 100%;
    top: 0;
    background : rgba(255,255,255,0.5);
}