JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://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>
<div id="layout" class="ig-layout-col">
<div class="row">
<div class="col3">
<h3>Heading</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>Heading</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>Heading</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>Heading</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>
<div class="row">
<div class="col12">
<div class="col7">
<h3>This is a...
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;
}