JSFiddle - React, Tailwind, and code Playground

by Digvijay Naruka

HTML

<footer id="colophon" class="site-footer">
		<div class="footer-area-top">
			<div class="footer-wrapper">
				<div class="footer-box widget-col-3">
					<h3> About </h3>
					<p>Funded in part through a cooperative agreement with the U.S Small Business Administration. All opinions, conclusions or recommendations expressed are those of the author(s) and do not necessarily reflect the views of the SBA. SBDC programs are open to the public and all services are provided on a nondiscriminatory basis without regard to race, color, religion, sex, age, disability, or national origin. Accommodations are made for individuals with disabilities. Accredited member of the Association of Small Business Development Centers. </p>
				</div>
				<div class="footer-box widget-col-3">
					Widget 1 
				</div>
				<div class=" footer-box widget-col-3">
					Widget 1 
				</div>
			</div>
		</div>
		<div class="footer-area-bottom">
			
			<div class="site-info">

			</div><!-- .site-info -->
		</div>
	</footer><!-- #colophon -->

CSS

.footer-area-top{
	width: 100%;
	background-color: rgba(0,0,0,1);
}

.footer-area-top .footer-wrapper{
	max-width: 1300px;
	margin:  auto;
  display: flex;
  	
}
.footer-area-top .widget-col-3{
	width: 33%;
	float: left;
	color: #fff;

	text-align: justify;
	 -webkit-flex: 1; /* Safari 6.1+ */
   -ms-flex: 1; /* IE 10 */ 
    flex: 1;
    background-color: #4433dd;
    
}

.footer-area-top p{
  display: block;
}
.footer-area-bottom{
	padding: 20px;
	width: 100%;
	height: 100%;
	background: #242331; 
	min-height: 50px;
	color: #fff;
}

.footer-area-bottom .site-info{
	right: 0px;
	bottom: 0px;
	float: right;
	font-size: 0.7em;
}