JSFiddle - React, Tailwind, and code Playground

HTML

<section class="container first-block aligncenter colorbar">
    <hr class="vertical-space3">
    	<h2 class="mex-title">Welcome to the Polymers Enterprises</h2>

    	<h4 class="slight frontsight">Scaling new heights on the strength of Excellence, Efficiency &amp; Ethics</h4>

    <hr class="vertical-space3">
    <div class="services">
        <div class="one_fourth">
            <article class="icon-box1"><i class="fa-user"></i>

                	<h5>ABOUT US</h5>

                <p>For over 30 years, Polymers Enterprises has developed a record of service, growth and reliability unsurpassed....</p>
                <button type="button" class="small skyblue demooo" onclick="window.location.href='about.html'">Read more</button>
            </article>
        </div>
        <!--<div class="one_fourth">
					<article class="icon-box1"><i class="li_bulb"></i>
						<h5>EFFICIENCY</h5>
						<p>We have made good relationship with customers by supplying them excellent quality products, which help us to ...</p>
						<button type="button" class="small skyblue demooo" onclick="window.location.href='about.html'">Read more</button>
					</article>
				</div>-->
        <div class="one_fourth">
            <article class="icon-box1"><i class="li_note"></i>

                	<h5>WHAT WE DO</h5>

                <p>Our policy is to achieve Quality in supply chain and maximize the serviceability to the client coupled with quality of cost....</p>
                <button type="button" class="small skyblue demooo" onclick="window.location.href='about.html'">Read more</button>
            </article>
        </div>
        <div class="one_fourth column-last">
            <article class="icon-box1"><i class="fa-cubes"></i>

                	<h5>OUR PRODUCTS</h5>

                <p>Polymer Enterprises provides a wide range of products and consulting services to customers .....</p>
                <button type="button" class="small skyblue demooo"...

CSS

/*==============Custome Css ====================*/
	.slider_patch {
	    background: rgba(63, 61, 61, 0.61);
	    padding: 0px 15px;
	    box-shadow: 1px 1px 28px #2F2F2F;
	}
	button.small.skyblue a {
	    color: #fff;
	}
	/*==============Custome Css ====================*/
	/* #Misc
	================================================== */
	/* EXTRAS */
	.brdr-r1, .brdr-r2 {
	    border-right: 1px solid #e5e5e5;
	    padding-right: 19px;
	}
	.brdr-l1, .brdr-l2 {
	    border-left: 1px solid #e5e5e5;
	    padding-left: 19px;
	}
	.brdr-r2 {
	    padding-right: 27px;
	}
	.brdr-l2 {
	    padding-left: 27px;
	}
	.pad-r27 {
	    padding-right: 27px;
	}
	.pad-l27 {
	    padding-left: 27px;
	}
	.alignright {
	    text-align: right;
	}
	img.alignright {
	    float: right;
	}
	.alignleft {
	    text-align: left;
	}
	img.alignleft {
	    float: left;
	}
	.aligncenter {
	    text-align: center;
	}
	.wp-caption {
	    display: block;
	    color: #444;
	}
	.wp-caption-text {
	    font-size: 15px;
	}
	.sticky {
	    color: #555;
	}
	.gallery-caption {
	    display: inline;
	}
	.bypostauthor {
	    font-size: 13px;
	}
	.moonicons-box1 {
	    font-size: 16px;
	    display: inline-block;
	    width: 15em;
	    padding: .25em .5em;
	    background: #fff;
	    margin: .5em 1em .5em 0;
	    border: 1px solid #e8e8e8;
	}
	.alignright {
	    text-align: right;
	}
	img.alignright {
	    float: right;
	}
	.alignleft {
	    text-align: left;
	}
	img.alignleft {
	    float: left;
	}
	.aligncenter {
	    text-align: center;
	}
	.wp-caption {
	    display: block;
	    color: #444;
	}
	.wp-caption-text {
	    font-size: 15px;
	}
	.sticky {
	    color: #555;
	}
	.gallery-caption {
	    display: inline;
	}
	.bypostauthor {
	    font-size: 13px;
	}
	/* Scroll to top */
	#scroll-top a {
	    width: 16px;
	    height: 16px;
	    padding: 6px 8px 9px;
	    border-radius: 4px;
	    background: #818c90;
	    position: fixed;
	    bottom: 48px;
	    right: 32px;
	    display: none;
	    opacity: 0.89;
	  ...