JSFiddle - React, Tailwind, and code Playground

HTML

<header id="header">
    <div class="content">
        <div id="topbar">
            <div class="logo">
                <h1><a href="{$mybb->settings['bburl']}/index.php"><img src="http://stormweb.cwdt.pl/demo/mybb/images/meta/logo.png" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></h1>
            </div>
            <nav class="navbar">
                <ul class="menu">
                    <li><a href="#">Regulamin</a></li>
                    <li class="hoverli"><a href="#">Drop Menu</a>
                        <ul class="submenu">
                            <li><a href="#">Pierwsza klasa</a></li>
                            <li><a href="#">Druga klasa</a></li>
                            <li><a href="#">Trzecia klasa</a></li>
                        </ul>
                    </li>
                    <li class="hoverli"><a href="#">Drop Menu 2</a>
                        <ul class="submenu">
                            <li><a href="#">Pierwsza klasa</a></li>
                            <li><a href="#">Druga klasa</a></li>
                            <li><a href="#">Trzecia klasa</a></li>
                        </ul>
                    </li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php">Użytkownicy</a></li>
                    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help">Pomoc</a></li>
                </ul>
            </nav>
        </div>
        <div id="bottombar">
            <div class="wrap">
                <form method="post" class="searchform" action="{$mybb->settings['bburl']}/search.php">
                    <input type="hidden" name="action" value="do_search" />
                    <input type="hidden" name="postthread" value="1" />
                    <input type="hidden" name="forums" value="all" />
                    <input type="hidden" name="showresults" value="threads" />
                    <input type="text" class="searchbox" name="keywords" value="Przeszukaj...

CSS

#header {
	width: 1100px;
	margin: auto;
}

#topbar {
	overflow: hidden;
}

.logo {
	width: 126px;
	float: left;
}

.navbar {
	float: left;
	margin-left: 25px;
}

.navbar ul {
	display: block;
	padding-left: 0px;
	margin-top: 30px;
}

.navbar ul li {
	display: inline-block;
	padding:0px;
	margin-left:-3px;
    position: relative;
}

.navbar ul li a:link,
.navbar ul li a:visited {
	color: #323A45;
	padding: 31px 10px;
	-moz-transition: 0.2s ease-in;
	-webkit-transition: 0.2s ease-in;
	-o-transition: 0.2s ease-in;
	transition: 0.2s ease-in;
}

.navbar ul li a:hover,
.navbar ul li a:active {
	background-color: #DDDFE3;
	-moz-transition: 0.2s ease-in;
	-webkit-transition: 0.2s ease-in;
	-o-transition: 0.2s ease-in;
	transition: 0.2s ease-in;
	
	text-decoration: none;
}

.navbar ul li:hover > ul.submenu {
        display:inline;
}

.navbar ul li > ul.submenu {
	background: #25B695;
	float: none;
	position: absolute;
	z-index: 11;
	top:20px;
    left: 0;
	display: none;
	-webkit-box-shadow: 1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;
	-moz-box-shadow:1px 1px 5px #000;
	text-align:left;
}

.navbar ul li > ul.submenu li {
	background: none;
	display: block;
	float: none;
	text-shadow: none;
	padding: 0;
	margin: 0;
}

.navbar ul li > ul.submenu li a:link,
.navbar ul li > ul.submenu li a:visited {
	color: #EAECF0;
	display: block;
	padding: 10px;
	min-width: 140px;
	border-top: 0;
}

.navbar ul li > ul.submenu li a:hover,
.navbar ul li > ul.submenu li a:active {
	background: #079877;
	color: #EAECF0;
	border-top: 0;
}

#bottombar {
	background-color: #323A45;
	overflow: hidden;
}

.wrap {
	width: 250px;
	float: left;
}

.searchbox {
	border: none;
	padding: 10px;
	color: rgb(204, 204, 204);
	font-family: 'Open Sans', sans-serif;
	background-color: rgb(22, 30, 41);
	margin: 7px;
	margin-left: -2px;
	height: 19px;
}

.subbutton {
	color: rgb(204, 204, 204);
	background-color: rgb(22, 30, 41);
	border: none;
	padding: 13px;
	margin-left: -10px;
	-moz-transition: 0.2s...