JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="container">

    <header id="header">
    <div class="div-left">ABOUT US</div>
    <div class="div-right">LET'S TALK</div>
    </header>

    <section id="content">
           <article class="item">
                  	<div class="thumb">
                	<div>
                    <div>
                    <div id="text">
                        <h2>Photo #1:</h2>
                        <p>Title Here</p>
                    </div>  
                    </div>
                	</div>
                    </div>
            </article>
    		

    </section>

</div></body>

CSS

<style>

	

html, body{margin: 0; padding: 0; margin:0; }


#header{
    width: 100%;
    height: 40px;
	}

.div-left{
    width:auto;
	padding-left:14px;
    height: 40px;
	float: left;
	line-height:40px;font-family:Arial, sans-serif, Helvetica; font-size:14px; color:#000000;	
}

h2, h1, p{font-family:Arial, sans-serif, Helvetica; font-size:14px; color:#000000; font-style:normal; }

.div-right{
    width:auto;
	padding-right:14px;
    height: 40px;
	float:right;
	line-height:40px;font-family:Arial, sans-serif, Helvetica; font-size:14px; color:#666666;
}


#content{
    width: 100%;
    float: left;
    position: relative;
}
#content .item{
    float: left;
    margin: 0px;
    padding: 0px;
    position: relative;
	background: -moz-linear-gradient(340deg, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 100%); /* ff3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(247,247,247,1))); /* safari4+,chrome */
	background: -webkit-linear-gradient(340deg, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 100%); /* safari5.1+,chrome10+ */
	background: -o-linear-gradient(340deg, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 100%); /* opera 11.10+ */
	background: -ms-linear-gradient(340deg, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 100%); /* ie10+ */
	background: linear-gradient(110deg, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 100%); /* w3c */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#F7F7F7',GradientType=1 ); /* ie6-9 */
	text-align: center;

}

#content .item img{
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}


@media only screen and (max-width: 2700px) {

	#content .item{width: 25%;padding-bottom:25%}
	p { font-size:225%; line-height: 125%}

}
@media only screen and (max-width: 1010px) {

	#content .item{width: 33.33%;padding-bottom:33.33%}
	p { font-size:159%; line-height: 125%}
}

@media only screen and...