JSFiddle - React, Tailwind, and code Playground

by Jaganathan

HTML

<section id="charts">
    
    <div class="wrap">
    	<div class="inner">
			    <div class="column">
			    	<div class="block">
			    		<p>Chart I</p>
			    	</div>
			    </div>
			    <div class="column">
			    	<div class="block">
			    		<p>Chart II</p>
			    	</div>
			    </div>
			    <div class="column">
			    	<div class="block">
			    		
			    		<p>Chart III</p>
			    	</div>
			    </div>
			    <div class="column">
			    	<div class="block">
			    		
			    		<p>Chart IV</p>
			    	</div>
			    </div>
	    </div>
    </div>

</section>

CSS

.wrap {
	padding: 0 40px;
	margin: 0 auto;
	background: #e4f;
	overflow: hidden;
}

	.inner {
		max-width: 1056px;
    width: 100%;
		margin: 0 auto;
		background: #34e;
		overflow: hidden;
    box-sizing: border-box;
    display: table;
    table-layout: fixed;
	}

.column {
	background: #ccc;
    box-sizing: border-box;
    display: table-cell;
    border: 1px solid red;
}