JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navBox">
    <div class="topLeft"></div>
    <div class="topRight"></div>
    <div class="bottomLeft"></div>
    <div class="bottomRight"></div>
    <div class="hBar">
        <div class="leftTab"></div>
        <div class="rightTab"></div>
        <div class="buttonLeft">
            <div class="leftArrow"></div>
            <div class="leftBar"></div>
        </div>
        <div class="buttonRight">
            <div class="rightArrow"></div>
            <div class="rightBar"></div>
        </div>
    </div>
    <div class="vBar">
        <div class="topTab"></div>
        <div class="bottomTab"></div>
        <div class="centerTab"></div>
        <div class="buttonTop">
            <div class="topBar"></div>
            <div class="topArrow"></div>
        </div>
        <div class="buttonBottom">
            <div class="bottomArrow"></div>
            <div class="bottomBar"></div>
        </div>
    </div>
</div>

CSS

.navBox
{
    position: relative;
    width: 150px;
    height: 150px;
    background-color: black;
}

.navBox .topLeft
{
    position: absolute;
    top: 0px;
    width: 50%;
    height: 50%;
    background-color: #66F;
    z-index: 10;
    
    -moz-border-radius-topleft: 1000px;
    -webkit-border-radius-topleft: 1000px;
    border-top-left-radius: 1000px;
}

.navBox .topRight
{
    position: absolute;
    top: 0px;
    left: 50%;
    width: 50%;
    height: 50%;
    background-color: #66F;
    z-index: 10;
    
    -moz-border-radius-topright: 1000px;
    -webkit-border-radius-topright: 1000px;
    border-top-right-radius: 1000px;
}

.navBox .bottomLeft
{
    position: absolute;
    top: 50%;
    width: 50%;
    height: 50%;
    background-color: #66F;
    z-index: 10;
    
    -moz-border-radius-bottomleft: 1000px;
    -webkit-border-radius-bottomleft: 1000px;
    border-bottom-left-radius: 1000px;
}

.navBox .bottomRight
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    background-color: #66F;
    z-index: 10;
    
    -moz-border-radius-bottomright: 1000px;
    -webkit-border-radius-bottomright: 1000px;
    border-bottom-right-radius: 1000px;
}

.navBox .hBar
{
    position: absolute;
    top: 50%;
    left: 0px;
    right: 0px;
    margin-top: -15px;
    height: 30px;
    background-color: Black;
    z-index: 20;
}

.navBox .vBar
{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 50%;
    margin-left: -15px;
    width: 30px;
    background-color: Black;
    z-index: 25;
}

.navBox .hBar .leftTab
{
    position: absolute;
    left: 0px;
    top: 5px;
    bottom: 5px;
    width: 5px;
    margin-right: 5px;
    background-color: #66F;
    z-index: 30;
}

.navBox .hBar .buttonLeft
{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 10px;
    right: 50%;
    margin-right: 15px;
    z-index: 30;
}

.navBox .hBar .buttonLeft .leftBar
{
    position: absolute;
    top: 5px;
    bottom: 5px;
...