JSFiddle - React, Tailwind, and code Playground

HTML

<section id="content"> 
    	
        <div class="container">
        
        	<div id="about">
            	<h1><a name="about">WE'RE GOOD... JUST ASK OUR CLIENTS!</a></h1>
                <div id="about-text">
                <p>Above The Fold is a Dublin based creative, digital marketing agency that provides a personal, professional and passionate service tailored specifically to each of our clients no matter the size. We specialise in creative digital solutions centred around the user and aim to provide a rich user experience for people interacting with your brand online. Blending creativity with technical know-how and research we can brand, plan, design and build your websites and online campaigns<p>

                </div><!-- end of about-text -->
            </div><!-- End of about -->
            
            <div id="services">
            <a name="services"></a>
            	<div class="service">
                	<div class="service-info">
                        <img src="images/creative-design.png" alt="Creative Design icon" />
                        <h3>Creative Design</h3>
                        <p>Creativity is at the heart of what we do. Combining creative thinking with technology to deliver beautiful websites that stand out and engage your target audience.</p>
                    </div>
                    <a href="#"><div class="find-out-more">FIND OUT MORE</div></a>
                </div>
                <div class="service">
                	<div class="service-info">
                        <img src="images/branding-icon.png" alt="Branding icon" />
                        <h3>Branding</h3>
                        <p>Much more then simply the design of a website. Through strategic planning and research we create dynamic brand icons (logos) that define who you are.</p>
                    </div>
                    <a href="#"><div class="find-out-more">FIND OUT MORE</div></a>
                </div>
                <div class="service">
   ...

CSS

.container {
	width: 1160px;
	margin: 0 auto;
	overflow: hidden;
}

#content {
	height: 605px;
	background: #F3F3F2;
	margin-top: 1px;
	padding-top: 25px;
}

#about {
	width: 100%;
	display: inline-block;
	text-align: center;
}

#about p {
	font-family: "Proxima Light",Arial,helvetica,garuda,sans-serif;
	font-size: 24px;
	line-height: 28px;
	margin-bottom: 10px;
}

#about-img {
	background: url(../img/about-img.png) no-repeat;
	width: 370px;
	height: 154px;
	float: left;
	margin-right: 20px
}

#about-text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #333;
	line-height: 23px;
}

#services {
	width: 100%;
	display: inline-block;
}

#services h3 {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 15px;
	color: #FFF;
}

#services p {
	font-size: 16px;
	line-height: 20px;
	color: #FFF;
}

#services a {
	text-decoration: none;
}

.service {
	background: #3498db; url(../images/service-find-out-triangle.png) no-repeat center 256px;
	width: 275px;
	height: 295px;
	float: left;
	margin: 20px 20px 20px 0;
	text-align: center;
	position: relative;
	
}

.service:last-child {
	margin-right: 0;
}

.service-info {
	background: #3498db;
	width: 255px;
	height: 245px;
	padding: 20px 10px 0;
}

.service img {
	margin-bottom: 10px;
}

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

.container {
	width: 1000px;
	margin: 0 auto;
	overflow: hidden;
}

#content { height: auto;}

.service { width: 490px; margin: 20px 20px 20px 0;}
.service:first-child { margin-right: 0!important;}
.service:nth-child(2) { margin-right: 0!important;}
.service-info {	width: 465px; }
    
}

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

.container { width: 800px;}
    
.service { width: 390px;}
.service-info {	width: 370px; }
    
}

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

.container { width: 680px;}
    
.service { width: 330px;}
.service-info {	width: 310px;}

}

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

.container { width: 95%;}

.service { width: 100%; margin:...