JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
  <input type="checkbox" id="css3menu-switcher" class="c3m-switch-input" align="center">
  <ul id="css3menu1" class="topmenu" align="center">
  <li class="switch"><label onclick="" for="css3menu-switcher"></label></li>
  <li class="topfirst"><a href="index.php" style="height:24px;line-height:24px;"><img src="menue/css3menu1/blue-home2.png" alt=""/>Startseite</a></li>
  <li class="topfirst"><a href="index.php?module=news" style="height:24px;line-height:24px;"><img src="menue/css3menu1/blue-home2.png" alt=""/>News</a></li>
  <li class="topmenu"><a href="#" style="height:24px;line-height:24px;"><span><img src="menue/css3menu1/blue-database.png" alt=""/>Tages-Top-Angebote</span></a>
  <ul>
  <li><a href="index.php?module=topoffers&plattform=4">PlayStation 3</a></li>
  <li><a href="index.php?module=topoffers&plattform=1">PlayStation 4</a></li>
  <li><a href="index.php?module=topoffers&plattform=5">xBox 360</a></li>
  <li><a href="index.php?module=topoffers&plattform=2">xBox One</a></li>
  <li><a href="index.php?module=topoffers&plattform=3">Wii U</a></li>
  </ul></li>
  <li class="topmenu"><a href="#" style="height:24px;line-height:24px;"><span><img src="menue/css3menu1/blue-screen.png" alt=""/>Spiel wählen...</span></a>
  <ul>
  <li><a href="#"><span>PlayStation 3</span></a>
  <ul>
  <li><a href=\"index.php?plattform=1&titel=$row->lnr\">$row->titel</a></li>
  </ul></li>
  <li><a href="#"><span>PlayStation 4</span></a>
  <ul>
  <li><a href=\"index.php?plattform=1&titel=$row->lnr\">$row->titel</a></li>
  </ul></li>
  <li><a href="#"><span>xBox 360</span></a>
  <ul>
  <li><a href=\"index.php?plattform=1&titel=$row->lnr\">$row->titel</a></li>
  </ul></li>
  <li><a href="#"><span>xBox One</span></a>
  <ul>
  <li><a href=\"index.php?plattform=1&titel=$row->lnr\">$row->titel</a></li>
  </ul></li>
  <li><a href="#"><span>Wii U</span></a>
  <ul>
  <li><a href=\"index.php?plattform=1&titel=$row->lnr\">$row->titel</a></li>
  </ul></li>
  </ul></li>
  <li...

CSS

.menu {
  display: flex;
  align-items: center;
  justify-content: center;
}

ul#css3menu1,ul#css3menu1 ul{
	margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu1 ul{
	display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#ffffff;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-color:#d4d4d4;padding:0 10px 10px;}
ul#css3menu1 li:hover>*{
	display:block;}
ul#css3menu1 li{
	position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
	z-index:1;}
ul#css3menu1 ul ul{
	position:absolute;left:100%;top:0;}
ul#css3menu1{
	font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
	*display:inline;}
* html ul#css3menu1 li a{
	display:inline-block;}
ul#css3menu1>li{
	margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
	outline-style:none;}
ul#css3menu1 a{
	display:block;vertical-align:middle;text-align:center;text-decoration:none;font:bold 14px Trebuchet MS;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#ffffff;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
	float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
	text-align:left;padding:4px;background-color:#ffffff;background-image:none;border-width:0;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;font:14px Trebuchet MS;color:#000000;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
	background-color:#0c97e2;border-color:#C0C0C0;border-style:solid;color:#000000;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menu1...