JSFiddle - React, Tailwind, and code Playground

HTML

<sticknav>
<div id="cssmenu"><div id="menu-line" style="width: 52px; left: 0px;"></div><div id="menu-button" class="menu-opened">Menu</div>
<ul class="open" style="display: block;">
<li><a class="home" href="/"></a></li>
<li><a href="http://www.batchuontyren.com/">Ty ren tán chuồn</a></li>
<li><a href="/search/label/Sức khỏe?&amp;max-results=10">Sức khỏe</a></li>
<li><a href="/search/label/Làm đẹp?&amp;max-results=10">Làm đẹp</a></li>
<li class="has-sub"><span class="submenu-button"></span><a href="/search/label/Thủ thuật?&amp;max-results=10">Thủ thuật</a>
<ul style="">
<li><a href="/search/label/Blogger?&amp;max-results=10">Blogger</a></li>
<li><a href="/search/label/Di động?&amp;max-results=10">Di động</a></li>
<li><a href="/search/label/Windows?&amp;max-results=10">Windows</a></li>
<li><a href="/search/label/Facebook?&amp;max-results=10">Facebook</a></li>
<li><a href="/search/label/Internet?&amp;max-results=10">Internet</a></li>
</ul>
</li>
<li><a href="/search/label/Game?&amp;max-results=10">Game</a></li>
<li id="searchboxbswright">
<div class="search-box">
<form action="/search" class="search-form" method="get" target="_top">
<input class="search-text" name="q" placeholder="Tìm kiếm trên blog..." type="text">
<button class="search-button" type="submit"><span><i class="fa fa-search"></i></span></button>
</form>
</div>
</li>
</ul>
</div>
</sticknav>

CSS

/*------------ MENU -------------*/
li#searchboxbswright { float: right !important }
.search-box { border-left: 1px solid #ccc; border-right: 1px solid #ccc; position: relative; width: 100%; margin: 0; padding: 0; height: 46px; line-height: 46px }
.search-form { width: 313px; background: none; overflow: hidden }
.search-box input[type="text"] { width: 90%; padding: 13px; color: #666; font-family: 'Roboto Condensed', sans-serif; font-weight: 400; outline: none }
.search-text { font-size: 14px; color: #fff; border-width: 0; background: transparent }
.search-button { font-family: 'Roboto Condensed', sans-serif; font-weight: 400; position: absolute; top: 0; right: 0; width: 50px; padding: 13.5px; font-size: 100%; color: #666; text-align: center; border-width: 0; cursor: pointer; background: none; outline: none }
button { background: #1AAB8A; color: #fff; border: none; position: relative; font: 300 16px Roboto, sans-serif; padding: 10px 20px; cursor: pointer; transition: 800ms ease all; outline: none }
button:before, button:after { content: ''; position: absolute; top: 0; right: 0; height: 2px; width: 0; background: #1AAB8A; transition: 400ms ease all }
button:after { right: inherit; top: inherit; left: 0; bottom: 0 }
.fa-search:before { content: "\f002" }
/*-------- Bắt đầu Stick Nav -------*/
sticknav { background: #ffffff; height: 30px; width: 100%; margin-right: 0; margin-left: 0; left: 0; right: 0; position: relative; z-index: 9999 }
.fixed { position: fixed }
/*-------- Kết thúc Stick Nav -------*/
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; box-sizing: border-box }
#cssmenu:after, #cssmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0 }
#cssmenu #menu-button { display: none }
#cssmenu { opacity: 0.9; width: auto; line-height: 1; background: #ffffff; z-index: 999;...

JavaScript

<script type='text/javascript'>
      //<![CDATA[      
      (function($){$.fn.menumaker=function(options){var cssmenu=$(this),settings=$.extend({title:"Menu",format:"dropdown",sticky:false},options);return this.each(function(){cssmenu.prepend('<div id="menu-button">'+settings.title+'</div>');$(this).find("#menu-button").on('click',function(){$(this).toggleClass('menu-opened');var mainmenu=$(this).next('ul');if(mainmenu.hasClass('open')){mainmenu.hide().removeClass('open')}else{mainmenu.show().addClass('open');if(settings.format==="dropdown"){mainmenu.find('ul').show()}}});cssmenu.find('li ul').parent().addClass('has-sub');multiTg=function(){cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');cssmenu.find('.submenu-button').on('click',function(){$(this).toggleClass('submenu-opened');if($(this).siblings('ul').hasClass('open')){$(this).siblings('ul').removeClass('open').hide()}else{$(this).siblings('ul').addClass('open').show()}})};if(settings.format==='multitoggle')multiTg();else cssmenu.addClass('dropdown');if(settings.sticky===true)cssmenu.css('position','fixed');resizeFix=function(){if($(window).width()>768){cssmenu.find('ul').show()}if($(window).width()<=768){cssmenu.find('ul').hide().removeClass('open')}};resizeFix();return $(window).on('resize',resizeFix)})}})(jQuery);(function($){$(document).ready(function(){$(document).ready(function(){$("#cssmenu").menumaker({title:"Menu",format:"multitoggle"});$("#cssmenu").prepend("<div id='menu-line'></div>");var foundActive=false,activeElement,linePosition=0,menuLine=$("#cssmenu #menu-line"),lineWidth,defaultPosition,defaultWidth;$("#cssmenu > ul > li").each(function(){if($(this).hasClass('active')){activeElement=$(this);foundActive=true}});if(foundActive===false){activeElement=$("#cssmenu > ul > li").first()}defaultWidth=lineWidth=activeElement.width();defaultPosition=linePosition=activeElement.position().left;menuLine.css("width",lineWidth);menuLine.css("left",linePosition);$("#cssmenu > ul >...