JSFiddle - React, Tailwind, and code Playground

by Fansublogger

HTML

<div class='ringMenusatelit'>
<ul>
<li class='main'><a href='#'>main</a></li>
<li class='top'><a href='#'>top</a></li>
<li class='right'><a href='#'>right</a></li>
<li class='bottom'><a href='#'>bottom</a></li>
<li class='left'><a href='#'>left</a></li>
</ul>
</div>

CSS

.ringMenusatelit {
width: 100px;
margin:auto;
}

.ringMenusatelit:hover {}

.ringMenusatelit ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenusatelit ul a {
color: white;
}
.ringMenusatelit ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenusatelit ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;

}
.ringMenusatelit ul li a:hover {
background: rgba(230,150,20,0.7);
}

.ringMenusatelit ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenusatelit:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenusatelit ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: 0px;
left: -202px;
}
.ringMenusatelit ul li.top a {
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-left-radius: 15px;}

.ringMenusatelit ul li.left a {
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;}

.ringMenusatelit ul li.bottom a {
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-top-right-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
}

.ringMenusatelit ul li.right a {
-moz-border-radius-topleft:...