JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<ul style="margin:200px;" id="CircledMenu">
    <li>
        <a href="#" class="MainCircle">Products</a>
        <ul class="SubMenu">
            <li><a href="#">Kitchen</a></li>
            <li><a href="#">Bedroom</a></li>
            <li><a href="#">Car</a></li>
            <li><a href="#">DIY/Storage</a></li>
            <li><a href="#">Bathroom</a></li>
            <li><a href="#">Footwear</a></li>
            <li><a href="#">Garden/Outdoor/Travel</a></li>
            <li><a href="#">Health</a></li>
            <li><a href="#">Gifts</a></li>
            <li><a href="#">Pet</a></li>
            <li><a href="#">Living Solutions</a></li>
            <li><a href="#">Clock/Lighting</a></li>
            <li><a href="#">Personal Care</a></li>
            <li><a href="#">Practial Solutions</a></li>
        </ul>    
    </li>        
</ul>
</body>
</html>

CSS

body {
font-family:verdana;
font-size:12px
}

ul {
list-style:none;
margin:0;
padding:0
}

a {
color:#000;
text-decoration:none
}

#CircledMenu li {
position:absolute
}

.MainCircle {
background:red;
border-radius:100px;
display:block;
height:200px;
line-height:200px;
position:absolute;
text-align:center;
width:200px;
z-index:1
}
.SubMenu li {
margin:50px;
    background:red;
border-radius:50px;
display:block;
height:100px;
    width:100px;
    display:table;
}

.SubMenu a {
height:100px;
width:100px;
    display:table-cell;
    text-align: center;
    vertical-align: middle;
    
}

JavaScript

(function ($)
{
    $.path = {};
    $.path.arc = function (params)
    {
        for (var i in params)
        {
            this[i] = params[i]
        }
        this.dir = this.dir || 1;
        while (this.start > this.end && this.dir > 0)
        {
            this.start -= 360
        }
        while (this.start < this.end && this.dir < 0)
        {
            this.start += 360
        }
        this.css = function (p)
        {
            var a = this.start * (p) + this.end * (1 - (p));
            a = a * 3.1415927 / 180;
            var x = Math.sin(a) * this.radius + this.center[0];
            var y = -Math.cos(a) * this.radius + this.center[1];
            return {
                top: y + "px",
                left: x + "px"
            }
        }
    };
    $.fx.step.path = function (fx)
    {
        var css = fx.end.css(1 - fx.pos);
        for (var i in css)
        {
            fx.elem.style[i] = css[i]
        }
    }
})(jQuery);

$(function()
{
    var clicked = false, allowAnimate = true;
    $('.MainCircle').click(function()
    {
        var list = $(this).siblings('ul').children('li'), noli = list.size();
        if ((!clicked) && (allowAnimate))
        {
            allowAnimate = false;
            list.each(function(i)
            {
                var li = $(this);
                var liw = li.width();
                if (i == 0)
                {
                    li.animate(
                    {
                        top: (liw * -2.3) + "px"
                    }, 250);
                }
                else
                {
                    li.delay(250).animate(
                    {
                        path: new $.path.arc(
                        {
                            center: [0, 0],
                            radius: liw * 2.3,
                            start: 0,
                            end: 360 / noli * i,
                            dir: 1
                        })
                    }, 500,...