JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div id="layout" class="ig-layout-col">
		<div class="row">
			<div class="col3">
			    <h3>見出し</h3>
			    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
			    </p>
			</div>
			<div class="col3">
			    <h3>見出し</h3>
			    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
			    </p>
			</div>
			<div class="col3">
				<h3>見出し</h3>
			    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
			    </p>
			</div>
			<div class="col3">
				<h3>見出し</h3>
			    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
			   ...

CSS

body {
			font-family: "Segoe UI",Helvetica,Tahoma,Arial,Verdana,sans-serif;
			background-color: #fff;
		}

		.col3 {
			background-color: #EEE;
			color: #555;
			padding: 0 20px 20px 20px;
			margin: 0 0 20px 0;
		}

		#layout .col12 {
			border:2px dashed #999;
			margin: 0 0 20px 0;
		}

		#layout .col7 {
			background-color: #FFA72D;
			color: #FFF;
			padding: 0 20px 20px 20px;
			margin: 0 0 20px 0;
		}

		#layout .col4 {
			background-color: #ffaf41;
			color: #fff;
			padding: 0 20px 20px 20px;
		}

		#layout .col2 {
			background-color: rgb(0, 155,225);
			color: #FFF;
			padding: 0 20px 20px 20px;
		}

		#layout .col5 {
			background-color: #00CCFF;
			padding: 0 20px 20px 20px;
			color: #FFF;
		}
	    @media screen and (min-width: 768px) {
	        #sampleContainer {
	            margin-left: 0;
	        }
	    }

	    .ig-layout-col {
            padding-left: 0;
        }