JSFiddle - React, Tailwind, and code Playground

HTML

<title>Mingames.com</title>
<link rel="shortcut icon" href="images/favicon.png"> 
<!-- Css Menu -->
<div id='cssmenu'>
<ul>
<!-- menu dropdown -->
   <li class='has-sub'><a href='#'><span><img src="images/menu_image.png"/></span></a>
      <ul>
         <li class='has-sub'><a href='#'><span><img src="images/games_image.png"/></img>&nbsp;&nbsp;Gamez</span></a>
            <ul>
               <li><a href='#'><font color="#c0c0c0">Recent Gamez</font></a></li>
               <li class='last'><a href='#'><span><img src="images/bullet_image.gif"/>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
<!-- Advsearch -->
<li class='active search'><span>
     <form method="get" action="/search" id="advsearch">
       <input name="q" type="text" size="40" placeholder="Search..." />
     </form>
    </li>
<!-- Logo -->
    <li class='active'><a href='index.htm'><span><img style="margin:left;" src='images/logo_image.png'/></span></a></li>
</ul>
</div>

</html>

CSS

/** Body Of Website */

       body{
          background-image:url('/images/background.png');
          background-color:#0a1857;
         }

/** Advanced css menu */


   #cssmenu ul { margin: 0; padding: 0;}
   #cssmenu li { margin: 0; padding: 0;}
   #cssmenu a { margin: 0; padding: 0;}
   #cssmenu ul {list-style: none;}
   #cssmenu a {text-decoration: none;}
   #cssmenu { height: 42px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4);}
   #cssmenu { position: fixed; left: 0; top: 0; width: 100%; }


   #cssmenu > ul > li {
       float: right;
       margin-right: 35px;
       position: relative;
      }

   #cssmenu > ul > li > a {
       color: rgb(160,160,160);
       font-family: Verdana, 'Lucida Grande';
       font-size: 15px;
       line-height: 70px;
       padding: 15px 20px;
   -webkit-transition: color .15s;
      -moz-transition: color .15s;
        -o-transition: color .15s;
           transition: color .15s;
   }

   #cssmenu > ul > li > a:hover {color: rgb(250,250,250); }


   #cssmenu > ul > li > ul {
       opacity: 0;
       visibility: hidden;
       padding: 16px 0 20px 0;
       background-color: rgb(250,250,250);
       text-align: left;
       position: absolute;
       top: 55px;
       left: 50%;
       margin-left: -90px;
       width: 180px;
   -webkit-transition: all .3s .1s;
      -moz-transition: all .3s .1s;
        -o-transition: all .3s .1s;
           transition: all .3s .1s;
   -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
           border-radius: 5px;
   -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
      -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
           box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   }

    #cssmenu > ul > li:hover > ul {
       opacity: 1;
       top: 65px;
       visibility: visible;
   }

   #cssmenu > ul > li > ul:before{
       content: '';
       display: block;
       border-color: transparent transparent rgb(250,250,250) transparent;
       border-style:...