JSFiddle - React, Tailwind, and code Playground

HTML

<section  id="content-1">
            <div class="container-1 clearfix">
                <p class="lead" id="about">О нас</p>
                
                <a href="img/korob/1.png" class="column" onclick="return hs.expand(this)"><img alt="01" src="img/korob/1.png" style="border-width: 0px;" height="260" width="360"></a>
                <a href="img/korob/2.png" class="column" onclick="return hs.expand(this)"><img alt="02" src="img/korob/2.png" style="border-width: 0px;" height="260" width="360"></a>                
                <a href="img/korob/3.png" class="column" onclick="return hs.expand(this)"><img alt="03" src="img/korob/3.png" style="border-width: 0px;" height="260" width="360"></a>
                <a href="img/korob/4.png" class="column" onclick="return hs.expand(this)"><img alt="04" src="img/korob/4.png" style="border-width: 0px;" height="260" width="360"></a>
                <a href="img/korob/5.png" class="column" onclick="return hs.expand(this)"><img alt="05" src="img/korob/5.png" style="border-width: 0px;" height="260" width="360"></a>
                <a href="img/korob/6.png" class="column" onclick="return hs.expand(this)"><img alt="06" src="img/korob/6.png" style="border-width: 0px;" height="260" width="360"></a>
                         
            </div> <!-- end container -->
        </section><!-- end content-1-->

CSS

#content-1 {
	background: #3e3884;
    color: black;
	padding: 20px 0; /* сверху и снизу - слева и справа */
}
.container-1 {
    width: 1000px;
	padding: 0 10px;
    margin: 0 auto;
    text-align: center;
}
p.lead {
	font-size: 28px;
	font-weight: 300;
	line-height: 24px;
/*    text-align: center;*/
}
.column {
    border: 2px solid;
	float: left;
	margin: 10px ;
}
.two {
    
    width: 480px;
}
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after { 
	clear: both;
}
.clearfix {
	zoom: 1; /* For IE6/7 */
}