JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menub">
    
    <li><a href="#">Intro</a><!-- Begin Home Item -->
    
        <div class="dropdown_2columns"><!-- Begin 2 columns container -->
    
            <div class="col_2">
                <h2>Lorem ipsum dolor sit amet</h2>
            </div>
    
            <div class="col_2">
                <p>Lorem ipsum dolor sit amet consectetuer at Vivamus elit pretium nec. Auctor et semper nisl vitae hac pede sociis porta ante lacus. Donec malesuada enim ligula.</p>             
                <p>Lorem ipsum dolor sit amet consectetuer at Vivamus elit pretium nec. Auctor et semper nisl vitae hac pede sociis porta ante lacus. Donec malesuada enim ligula.</p>             
            </div>
    
            <div class="col_2">
                <h2>Lorem ipsum dolor sit amet</h2>
            </div>
            
            <div class="col_1">
                <img src="https://www.w3schools.com/w3images/mountains.jpg" width="125" height="48" alt="" />
            </div>
            
            <div class="col_1">
                <p>Lorem ipsum dolor sit amet consectetuer at Vivamus elit pretium nec. Auctor et semper nisl vitae hac pede sociis porta ante lacus. Donec malesuada enim ligula.</p>
            </div>
          
        </div><!-- End 2 columns container -->
    
    </li><!-- End Home Item -->

    <li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item -->
    
        <div class="dropdown_5columns"><!-- Begin 5 columns container -->
        
            <div class="col_5">
                <h2>Lorem ipsum dolor sit amet</h2>
            </div>
            
            <div class="col_1">
                <p class="black_box">Lorem ipsum dolor sit amet consectetuer at Vivamus elit pretium nec. Auctor et semper nisl vitae hac pede sociis porta ante lacus. Donec malesuada enim ligula.</p>
            </div>
            
            <div class="col_1">
                <p>Lorem ipsum dolor sit amet consectetuer at Vivamus elit pretium...

CSS

body, ul, li {
	font: 14px Arial, Helvetica, sans-serif;
	line-height: 21px;
	text-align: left;
}

#menub {
	list-style: none;
	width: 940px;
	margin: 30px auto 0;
	height: 43px;
	padding: 0 20px;

	border-radius: 10px;
	background: #014464;
	border: 1px solid #002232;
	box-shadow: inset 0 0 1px #edf9ff, 6px 6px 10px black;
}

#menub li {
	float: left;
	display: block;
	text-align: center;
	position: relative;
	padding: 4px 10px;
	margin-right: 30px;
	margin-top: 7px;
}

#menub li:hover {
	border: 1px solid #777777;
	padding: 4px 9px;
	background: #F4F4F4;
	border-radius: 5px 5px 0 0;
	box-shadow: 6px 6px 10px black;
}

#menub li a {
	font: 14px Arial, Helvetica, sans-serif;
	color: #EEEEEE;
	display: block;
	outline: 0;
	text-decoration: none;
	text-shadow: 1px 1px 1px #000;
}

#menub li:hover a {
	color: #161616;
	text-shadow: 1px 1px 1px #ffffff;
}

.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns {
	margin: 4px auto;
	float: left;
	position: absolute;
	left: -999em;
	text-align: left;
	padding: 10px 5px;
	border: 1px solid #777777;
	border-top: none;
	background: #F4F4F4;
	border-radius: 0 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menub li:hover .dropdown_1column, #menub li:hover .dropdown_2columns, #menub li:hover .dropdown_3columns, #menub li:hover .dropdown_4columns, #menub li:hover .dropdown_5columns {
	left: -1px;
	top: auto;
	box-shadow: 6px 6px 10px black;
	transition: 0.6s;
}

.col_1, .col_2, .col_3, .col_4, .col_5 {
	display: inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}
.col_1 {width: 130px;}
.col_2 {width: 270px;}
.col_3 {width: 410px;}
.col_4 {width: 550px;}
.col_5 {width: 690px;}

#menub .menub_right {
	float: right;
	margin-right: 0;
}
#menub li .align_right {
	border-radius: 5px 0 5px 5px;
}

#menub p, #menub...