JSFiddle - React, Tailwind, and code Playground

by Admiral Potato

HTML

<nav id="menu">
    <ul>
        <li><span class="rotator"><span class="bob">Tacos</span></span></li>
        <li><span class="rotator"><span class="bob">Burgers</span></span></li>
        <li><span class="rotator"><span class="bob">Noodles</span></span></li>
        <li><span class="rotator"><span class="bob">Forks</span></span></li>
        <li><span class="rotator"><span class="bob">Spoons</span></span></li>
    </ul>
</nav>

SCSS

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html, body{
    height: 100%;
}
*{
    margin: 0;
    padding: 0;
}
#menu{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 80px;
    height: 80px;
    ul{
        position: relative;
        display: block;
        background-color: hsl(10, 60%, 60%);
        height: 100%;
        li{
            position: absolute;
            top: 50%;
            left: 50%;
            display: block;
            .rotator{
                display: block;
                position: absolute;
                left: 200px;
                &:nth-child(1){transform: rotate(72deg);}
                &:nth-child(2){transform: rotate(144deg);}
                &:nth-child(3){transform: rotate(-144deg);}
                &:nth-child(4){transform: rotate(-72deg);}
                .bob{
                    display: block;
                    position: absolute;
                    width: 80px;
                    padding: 32px;
                    background-color: #09f;
                    &:nth-child(1){transform: rotate(-72deg);}
                    &:nth-child(2){transform: rotate(-144deg);}
                    &:nth-child(3){transform: rotate(144deg);}
                    &:nth-child(4){transform: rotate(72deg);}
                }
            }
        }
    }
}