JSFiddle - React, Tailwind, and code Playground

by Thomas Nyan

HTML

<form  class="summarybackground" name="sell"  id="sell" style="height:600px;width:920px;overflow-y:hidden;"  method="post">
<div class="myBox"> 
<div class="col-sm-9">
      <div id="section1"> 
          <h1 class="header double">Landed</h1> 
          <ul class="rig columns-4">
    	<li>
    		<img src="mainpage_grid.jpeg" />
    		<h3>Image Title</h3>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    	</li>
    	<li>
    		<img src="mainpage_grid.jpeg" />
    		<h3>Image Title</h3>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    	</li>
    	<li>
    		<img src="mainpage_grid.jpeg" />
    		<h3>Image Title</h3>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    	</li>
    	<li>
    		<img src="mainpage_grid.jpeg" />
    		<h3>Image Title</h3>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    	</li>
    	<li>
    		<img src="mainpage_grid.jpeg" />
    		<h3>Image Title</h3>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    	</li>
    	<li>
    		<img src="mainpage_grid.jpeg" />
    		<h3>Image Title</h3>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    	</li>
    	<li>
    		<img src="mainpage_grid.jpeg" />
    		<h3>Image Title</h3>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    	</li>
    	<li>
    		<img src="mainpage_grid.jpeg" />
    		<h3>Image Title</h3>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    	</li>
</ul>  
      </div>      
</div> 

</div>
</form>

CSS

.myBox {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 850px;
height: 600px;
margin-bottom: 150%;
}
div.col-sm-9 div {
      height: 600px;
      font-size: 18px;
      
}
  
#section1 {color: #000000; background: #dadada;}

/*This is for Grid view at summary page*/

ul.rig {
    	list-style: none;
    	font-size: 0px;
    	margin-left: -2.5%; /* should match li left margin */
}
ul.rig li {
    	display: inline-block;
    	padding: 10px;
    	margin: 0 0 1.5% 1.5%;
    	background: #fff;
    	border: 1px solid #ddd;
    	font-size: 16px;
    	font-size: 1rem;
    	vertical-align: top;
    	box-shadow: 0 0 5px #ddd;
    	box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
}
ul.rig li img {
    max-width: 100%;
    height: auto;
    margin: 0 0 10px;
}
ul.rig li h3 {
   margin: 0 0 5px;
}
ul.rig li p {
   font-size: .9em;
   line-height: 1.5em;
   color: #999;
}
/* class for 2 columns */
ul.rig.columns-2 li {
   width: 48.5%; /* this value + 1.5 should = 50% */
}
/* class for 3 columns */
ul.rig.columns-3 li {
   width: 31.5%; /* this value + 1.5 should = 33% */
}
/* class for 4 columns */
ul.rig.columns-4 li {
   width: 23.5%; /* this value + 1.5 should = 25% */
   
}
     
@media (max-width: 480px) {
   ul.grid-nav li {
    	display: block;
    	margin: 0 0 5px;
   }
   ul.grid-nav li a {
    	display: block;
   }
   ul.rig {
    	margin-left: 0;
   }
   ul.rig li {
    	width: 100% !important; /* over-ride all li styles */
    	margin: 0 0 0px;
   }
}