JSFiddle - React, Tailwind, and code Playground

by Manoj Kumar

HTML

<title>LMUN - Home</title>
</head>
<body>
<div  class="header" id="banner"></div>
<div class="header" id="navbar">
		<div class="nb_item">HOME</div>
		<div class="nb_item">ABOUT US
		<ul id="abtus_menu">
	            <li>LA MARTINIERE COLLEGE, LUCKNOW</li>
	            <li>LA MARTINIERE MODEL UNITED NATIONS</li>
                <li>SECRETARIAT</li>
            </ul>
           </div>
		<div class="nb_item">REGISTER
        	<!--<ul id="rgstr_menu">
            	<li>INDIVIDUAL</li>
                <li>DELEGATION</li> 
            </ul>-->
        </div>
		<div class="nb_item">COMMITTEES
			<!--<ul id="comt_menu">
				<li>COMMITTEE 1</li>
				<li>COMMITTEE 2</li>
				<li>COMMITTEE 3</li>
				<li>COMMITTEE 4</li>
				<li>COMMITTEE 5</li>
				<li>COMMITTEE 6</li>
			</ul> -->
		</div>
		<div class="nb_item">RESOURCES</div>
		<div class="nb_item">EVENTS
        <!--<ul id="evnt_menu">
        	<li>KEYNOTE SPEAKERS</li>
            <li>SOCIALS</li>
        </ul>-->
        </div>
		<div class="nb_item">SPONSORS</div>
		<div class="nb_item">CONTACT US</div>
</div>
</body>

CSS

.html
{
	background-color: #FFFFFF;
}

body
{
	margin: 0;
	padding:0;
}

.header
{
	width: 80%;
	margin:auto;
	padding:0;
	display:flex;	
}

#banner
{
	height: 200px;
	width: 80%;
	background-color: #EEEEEE;
}

#navbar
{
	
	background-color: #70A5DA;
	height: 28px;	
}

.menu
{
	list-style-type:none;
}

.nb_item
{
    display:inline-block;
    width:auto;
  	padding:0px 10px;
    color:#FFFFFF;
    margin:auto;
    text-align:center;
	line-height: 28px;
}

.nb_item:hover
{
	color: #DDDDDD;
}

#comt_menu
{
	list-style-type:none;
}

#abtus_menu li
{
	list-style-type:none;
	display:none;
	
}

#rgstr_menu
{
	list-style-type:none;
}

#evnt_menu
{
	list-style-type:none;
}


.menu li
{
	display:inline;
}