JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contentwrap">
<div id="content">
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL.</p>
        
<div class="MyBox">
	<ul id="grid">
	   <li><a href="newgrid.html"><img src="http://www.nerdorturd.com/wp-content/uploads/2014/10/css_cascading_style_sheet.jpg"></a></li>
	   <li><a href="newgrid.html"><img src="http://www.nerdorturd.com/wp-content/uploads/2014/10/css_cascading_style_sheet.jpg"></a></li>
	   <li><a href="newgrid.html"><img src="http://www.nerdorturd.com/wp-content/uploads/2014/10/css_cascading_style_sheet.jpg"></a></li>
	   <li><a href="newgrid.html"><img src="http://www.nerdorturd.com/wp-content/uploads/2014/10/css_cascading_style_sheet.jpg"></a></li>  
	</ul>                                    
</div>       
</div>
</div>

CSS

#contentwrap {
    width: 850px;
    float: left;
    margin: 0 auto;
}

#content {
    background: #FFF8DC;
    border-radius: 10px;
    border: 1px solid #ebebeb;
    margin: 5px;
    padding: 10px;
}

ul#grid {
  list-style: none;
  margin: 0 0 0;
  width: 700px;  
  }

#grid li {
  float: left;
  margin: 0 0 10px 5px;
  } 

.MyBox {
  height:auto;
overflow:auto;
  padding: 0px;
  margin-left: 0; margin-right: 0;  margin-top:0;
  width: 1000px;
  font-family: arial, serif; 
  text-align: center;
  }
 #grid li a:hover img {
  opacity:0.3;  filter:alpha(opacity=30);
  }

#grid li img {
  background: white;
  padding: 7px; margin: 0;
  border: 1px dotted #58595b;
  width: 120px;
  height: 98px;
  }  
#grid li a {
  display: block;
  }