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> 
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
    <title>Тестовый сайт</title> 
    <style type="text/css" media="screen"> 
    html{margin:10px 20px;}
    </style> 
 
    <link rel="stylesheet" href="main.css" type="text/css" /> 
    <!-- Таблицы стилей main.css --> 
 
</head> 
 
<body>
    <div id="nav"> 
 
<ul class="current"> 
    <li><a href="***"><b>Главная</b></a> 
        <ul class="sub_active"> 
        <li class="current_sub"><a href="***">***</a></li> 
        <li><a href="***">***</a></li> 
        <li><a href="***">***</a></li> 
        <li><a href="***">***</a></li> 
        </ul> 
    </li> 
</ul> 
 
<ul class="select"> 
    <li><a href="***"><b>Магазин</b></a> 
        <ul class="sub"> 
        <li><a href="***">***</a></li> 
        <li><a href="***">***</a></li> 
        <li><a href="***">***</a></li> 
        <li><a href="***">***</a></li> 
        <li><a href="***">***</a></li> 
        <li><a href="***">***</a></li> 
        </ul> 
    </li> 
</ul> 
 
 
<ul class="select"> 
    <li><a href="***"><b>***</b></a> 
        <ul class="sub"> 
        <li><a href="***">***</a></li> 
        <li><a href="***">***</a></li> 
        <li><a href="***">***</a></li> 
        <li><a href="***">***</a></li> 
        <li><a href="***">***</a></li> 
        </ul> 
    </li> 
</ul> 
 
<ul class="select"> 
    <li><a href="***"><b>***</b></a> 
        <ul class="sub"> 
        <li><a href="***">***</a></li> 
        <li><a href="***">***</a></li> 
        <li><a href="***">***</a></li> 
        <li><a href="***">***</a></li> 
        </ul> 
    </li> 
</ul> 
 
<ul class="select"> 
    <li><a href="***"><b>***</b></a> 
        <ul class="sub"> 
        <li><a href="***">***</a></li> 
        <li><a href="***">***</a></li> 
        </ul> 
    </li> 
</ul>...

CSS

body {
 background-color: #000;
 height: 100%;
}

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

#nav {
    width:450px;
    position:relative;
    margin: 200px auto 0 ;
    padding: 3px 0 0 0; /* Позиция кнопок*/
    overflow:visible;
}

#nav .select, #nav .current {
    margin:0; /*Ширина бэкграунда подменю*/
    padding:0;
    list-style:none;
    display:inline;
}

#nav li {
    font-family: Tahoma;
    font-size:2px;
    display:inline;
    margin:0;
    padding:0;
    height:auto;
}

#nav .select a, #nav .current a {
    display:block;
    height:40px; 
    float:left;
    background: url("images/left_nav.png") no-repeat left top; 
    padding:0 0 0 5px;
    text-decoration:none;
    font-size:14px; 
    line-height:40px;
    white-space:nowrap;
    margin-right: 2px; 
    z-index: 500;
}

#nav .select a b, #nav .current a b {
    height:100%;
    display:inline-block;
    background:url("images/right_nav.png") no-repeat right top;
    padding:0 20px 0 15px;
    color:#ddd; 
}

#nav .select a:hover, #nav .select li:hover a {
    background-position:0 -50px;
    cursor:pointer;
}

#nav .select a:hover b, #nav .select li:hover a b {
    background-position:100% -50px;
    color:#fff;
}

#nav .sub {
    display:none;
}

#nav .current a {
    background-position:0 -50px;
    border-color:#046;
}
#nav .current a b {
    background-position:100% -50px;
    color:#fff; 
}


#nav .sub li a:hover, #nav .select a:hover .sub li a:hover, #nav .select li:hover .sub li a:hover, #nav .sub_active .current_sub a, #nav .sub_active a:hover {
    color:#fff; 
    text-decoration:underline;
}


#nav .select li a:hover .sub, #nav .select li:hover .sub, #nav .sub_active {
    display:block;
    position:absolute;
    width:100%;
    height: 35px;
    top:40px;
    left:0;
    background:#171717; 
    padding:0;
    z-index:100;
}

#nav .sub_active {
    z-index:10;
}

#nav .sub, #nav .sub_active {
    margin:0;
   ...