JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<html>
<head>
 <title>Responsive circle menu</title>
 <meta charset="utf-8">
</head>
<body>
 <header>
 <div class="ginuxecontainers">
 <div class="developmen">
 <a href="#" class="environments">ZORNET.RU</a>
 <ul>
 <li><a href="#">Скрипты</a></li>
 <li><a href="#">Шаблоны</a></li>
 <li><a href="#">Стиль</a></li>
 <li><a href="#">Дизайн</a></li>
 </ul>
 <div class="focuson-rastructure">
 <div class="nologies"></div>
 </div>
 </div>
 </div>
 </header>
 <div class="content">
 <div class="ginuxecontainers">
 <div class="resize-message">
 </div>
 </div>
 </div>
</body>
</html>

CSS

body{
 font-family: 'Montserrat', Helvetica, Arial, sans-serif;
 background-color: #ECF0F1;
 margin: 0;
}
a,
a::after,
a::before{
 -webkit-transition: all .3s ease-in-out;
 -moz-transition: all .3s ease-in-out;
 -ms-transition: all .3s ease-in-out;
 -o-transition: all .3s ease-in-out;
 transition: all .3s ease-in-out;
}
a,
a:hover,
a:focus,
a:active{
 outline: none;
 text-decoration: none;
}
*, *::after, *::before {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
header {
    position: relative;
    background-color: #2a2d3a;
    padding: 10px 0;
    width: 100%;
    float: left;
}
.developmen{
 position: relative;
 float: none;
 width: 100%;
}
.developmen ul{
 float: right;
 padding: 0;
 margin: 0;
 list-style: none;
}
.developmen ul li{
 float: left;
}
.developmen ul li a {
    display: inline-block;
    margin: 7px;
    font-size: 15px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #f7f4f4;
    opacity: .8;
    position: relative;
    padding: 7px 14px;
    width: initial;
}
.developmen ul li a:hover{
 opacity: 1;
}
.ginuxecontainers{
 width: 1165px;
 margin: 0 auto;
}
body .ginuxecontainers::after{
 -webkit-transition: all .5s cubic-bezier(1, 0.03, 0, 0.99);
 -moz-transition: all .5s cubic-bezier(1, 0.03, 0, 0.99);
 -ms-transition: all .5s cubic-bezier(1, 0.03, 0, 0.99);
 -o-transition: all .5s cubic-bezier(1, 0.03, 0, 0.99);
 transition: all .5s cubic-bezier(1, 0.03, 0, 0.99);
 position: fixed;
 content: '';
 width: 49.7px;
 height: 49.7px;
 float: left;
 top: 3px;
 right: 10.1%;
 transform: scale(0);
 border-radius: 50%;
 z-index: 88;
 background: #4895f1;
 background: -webkit-linear-gradient(left, #4595f5 0%, #09dcf3 79.9%, #05daf1 100%);
 background: linear-gradient(to right, #4b96ef 0%, #09d9ef 79.9%, #09d9ef 100%);
}
body.orchestrate .ginuxecontainers::after{
 transform: scale(0);
 opacity: 1;
 visibility: visible;
}
.environments{
 top: 13px;
 color: #f3f8f9;
 left: 0;
 position:...

JavaScript

(function($) {

    // Animate bar menu
    $('.focuson-rastructure').on('click', function() {
        $('.nologies').toggleClass('animate');
        if( $('body').hasClass('orchestrate')){
            $('body').removeClass('orchestrate');
        }else{
            $('body').toggleClass('orchestrate');
        }
    });

    // Close menu when press esc
    $(document).keyup(function(e) {
        if (e.keyCode == 27) {
            $('.nologies').removeClass('animate');
            $('body').removeClass('orchestrate');
        }
    });

})(jQuery);