JSFiddle - React, Tailwind, and code Playground

HTML

<!-- menu footer -->
<div class="footer-menu">
                     <div class="menu">

						<ul class="menu1l">
							 <li><a href="#">Sitemap</a></li>
							 <li><a href="#">Sitemap</a></li>
						</ul>
						<ul	class="menu1l">					
							 <li><a href="#">Sitemap</a></li>
							 <li><a href="#">Sitemap</a></li>
						</ul>

						
					
						<ul class="menu2r">
							 <li><a href="#">Sitemap</a></li>
							 <li><a href="#">Sitemap</a></li>
						</ul>
						<ul class="menu2r">		
							 <li><a href="#">Sitemap</a></li>
							 <li><a href="#">Sitemap</a></li>
						</ul>
						
					</div>
						
						<ul class="social">
							<li><a href="#"><img class="resize-image" src="https://cdn1.iconfinder.com/data/icons/socialmediaicons_v120/48/facebook.png"></a> 
							<a href="#"><img class="resize-image" src="https://cdn1.iconfinder.com/data/icons/socialmediaicons_v120/48/facebook.png"></a></li>
						</ul>	
						
						<ul class="ngs">
                            <li><img class="resize-image"             src="http://s27.postimg.org/snawqbhsv/ngs.png">  </li>
						</ul>
</div>
<!-- menu footer end -->

CSS

footer-menu {
	border-top: 1px solid #caae9c;
	background-color: #fff;
	border-bottom: 1px solid #caae9c; 
	margin: 0 auto;
	max-width: 76%;
	position: relative;
}

.site-footer {
	clear: both;
}

.menu1l {
	float: left;
}

.menu2r {
	float: left;
}

.social {
	float: left;
	list-style-type: none;

}

.media {
	display: none;
}

.site-footer {
	background-color: #fff; 
	text-align: center !important;
}

.ngs {
	float: right;
	list-style-type: none;
}