JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
	<div class="logo-cont">
    	<a href="home.html" class="logo-link"></a>
    </div>
    
    <div class="main-cont">
    	<div class="site-box-cont">
        	<ul class="site-box-list clearfix">
            	<li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
                <li><a href="#" class="site-box"></a></li>
            </ul>
        
        </div>
    </div>
</div>

CSS

.logo-cont {padding:35px 0 35px 250px;}
.logo-link {background:url(../images/logo.png) no-repeat; width:177px; height:59px; display:block; }

.main-cont {background:#2d3a42;}
.site-box-cont {width:670px; margin:0 auto; padding:150px 0}
.site-box-list li {float:left; margin:0px 15px 15px 0px;}
.site-box { width:150px; height:150px; display:inline-block; background:#fff; border-radius:25px;}
.site-box:hover {background:#acd037;}