JSFiddle - React, Tailwind, and code Playground

HTML

<section class="mainSection" style="width: 100%">
 	<h1>Gallery</h1>
	<article class="content">
    	<h2>Gallery</h2>
        <ul class="photos">
            <li><a href="#"><img src="https://media.licdn.com/mpr/mpr/shrink_120_120/p/7/005/011/058/355e0d5.jpg" /></a></li>
            <li><a href="#"><img src="https://media.licdn.com/mpr/mpr/shrink_120_120/p/7/005/011/058/355e0d5.jpg" /></a></li>
            <li><a href="#"><img src="https://media.licdn.com/mpr/mpr/shrink_120_120/p/7/005/011/058/355e0d5.jpg" /></a></li>
            <li><a href="#"><img src="https://media.licdn.com/mpr/mpr/shrink_120_120/p/7/005/011/058/355e0d5.jpg" /></a></li>
            <li><a href="#"><img src="https://media.licdn.com/mpr/mpr/shrink_120_120/p/7/005/011/058/355e0d5.jpg" /></a></li>
            <li><a href="#"><img src="https://media.licdn.com/mpr/mpr/shrink_120_120/p/7/005/011/058/355e0d5.jpg" /></a></li>
            <li><a href="#"><img src="https://media.licdn.com/mpr/mpr/shrink_120_120/p/7/005/011/058/355e0d5.jpg" /></a></li>
            <li><a href="#"><img src="https://media.licdn.com/mpr/mpr/shrink_120_120/p/7/005/011/058/355e0d5.jpg" /></a></li>
            <li><a href="#"><img src="https://media.licdn.com/mpr/mpr/shrink_120_120/p/7/005/011/058/355e0d5.jpg" /></a></li>
            <li><a href="#"><img src="https://media.licdn.com/mpr/mpr/shrink_120_120/p/7/005/011/058/355e0d5.jpg"/></a></li>
            <li><a href="#"><img src="https://media.licdn.com/mpr/mpr/shrink_120_120/p/7/005/011/058/355e0d5.jpg"/></a></li>
            <li><a href="#"><img src="https://media.licdn.com/mpr/mpr/shrink_120_120/p/7/005/011/058/355e0d5.jpg"/></a></li>
            <div class="clear"></div>
        </ul>
    </article>
</section>

CSS

body {
    background: #000;
}
.mainSection {
	line-height: 25px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	overflow: hidden;
	float: left; 
    width: 60%;
}
.content {
	background-color:#FFF;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	padding: 3% 5%;
	margin-top: 2%;
    
}
ul.photos li {
	float:left;
	margin: 0 5 0 5px;
	padding: 10px;
	list-style-type:none;
}

ul.photos li img {
	float:left;
	width:200px;
	height:200px;
	text-align:center;
	-webkit-border-radius: 23px;
	border-radius: 23px;
}

ul.photos li img:hover {
	opacity: 0.8;
}

ul.videos li {
	float:left;
	list-style-type:none;
}

.clear{clear:both}