JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>CONSULTING FIRM</title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

	<!--     Favicon     -->
	<link rel="shortcut icon" type="image/png" href=""/>

	<!--     Fonts Google    -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:300,400,500,700" rel="stylesheet">

    <!-- Font-awesome -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
	

	<!-- CSS Style -->
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="style-mqueries.css"><!--media queries-->
</head>

<body>
<div class="site-container">

<header class="grey4-bg flex-center section-sep">
	<h1>HEADER</h1>
</header>

<main>

	<section class="intro">
		<div class="marged flex">
			
			<div class="section-text">
				<h2>take away the risk & you can do anything</h2>

				<h4>Rapid solutions to the most complex business challenges with cooperative process-driven.</h4>

				<p>Integer blandit ultricies aliquam. Pellentesque quis dui varius, dapibus velit id, iaculis ipsum. Morbi ac eros feugiat, lacinia elit ut, elem turpis.Curabitur justo sapien, tempus sit amet rutrum eu, commodo eu lacus. Morbi in ligula nibh. Maecenas ut mi at odio hendrerit eleifend tempor.
				justo sapien, tempus </p>

				<h3 class="link"><a href="#">take a tour</a></h3>
			</div>

			<div class="graphic">
				<div class="yellow-block warm-bg"></div>
				<div class="media-holder bg-img shadow-sm"></div>
				<div class="yellow-block warm-bg"></div>
			</div>
		</div><!-- /.marged flex -->
	</section>
<!-- END OF SECTION INTRO -->


<!-- SECTION CHART -->
	<section class="chart grey-bg">
		<div class="marged flex">
		<!-- Chart side -->
			<div class="chart-parent">
			<img src="images/business.jpg" alt="">
			</div>
		
		<!-- Text...

CSS

@charset "UTF-8";

*{margin: 0; padding: 0; }

body{height:100%; box-sizing: border-box; font-family: 'Roboto', sans-serif;}
html{height:100%; font-size:16px; box-sizing:border-box;}
*, *:before, *:after{box-sizing:inherit;}
ul{list-style: none;}
a{color:inherit;text-decoration: none;}
p{line-height: 1.5em; margin-bottom: 20px; font-family: 'Raleway', sans-serif;}



/* POSITIONING ELEMENTS */
/* Flex, Margin, Padding */

.flex, .flex-col, .justify-c, .flex-align-c, .flex-center, .flex-col-center {display: flex; }
.flex-col, .flex-col-center{flex-direction: column;}
.justify-c,.flex-center,.flex-col-center{justify-content: center; }
.align-c, .flex-center, .flex-col-center{align-items: center; }
.justify-fs{justify-content: flex-start;} .justify-fe{justify-content: flex-end;}
.justify-sb{justify-content: space-between;}
.align-fs{align-items: flex-start;} .align-fe{align-items: flex-end;}
.align-sb{align-items: space-between;}

.flex-1{flex:1;}
.flex-2{flex:2;}

.right{float:right;}
.left{float:left;}

.mb-10{margin-bottom: 10px;} .mb-20{margin-bottom: 20px;} .mb-30{margin-bottom: 30px;}
.mb-50{margin-bottom: 50px;} .mb-70{margin-bottom:70px;} .mb-100{margin-bottom: 100px;}
.txt-center{text-align: center;}
.pad-v10{padding:10px 0;} .pad-v15{padding:15px 0;} .pad-v20{padding:20px 0;}


/* COLORS and SHADOWS*/


.white-bg{ background-color: #fff; } .white-txt{ color: #fff; }
.pale-bg{ background-color: #f6f7f7} .pale-txt{ color: #f6f7f7; }
.pale3-bg{ background-color: #eee} .pale3-txt{ color: #eee; }
.pale2-bg{ background-color: #dcdbd9} .pale2-txt{ color: #dcdbd9; }

.grey-bg{background-color:#f4f4f4;} .grey-txt{color:#f4f4f4;}
.grey2-bg{background-color:#E9E9E9;} .grey2-txt{color:#E9E9E9;}
.grey3-bg{background-color:#E9EBEE;} .grey3-txt{color:#E9EBEE;}
.grey4-bg{background-color:#f1f4f9;} .grey4-txt{color:#f1f4f9;}
.grey5-bg{ background-color: #5E5E6A; } .grey4-txt{ color: #4E5E6A; }

.dark3-bg{ background-color: #353535; } .dark3-txt{ color: #353535;...

JavaScript

$(window).scroll(testScroll);
var viewed = false;

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

function testScroll() {
  if (isScrolledIntoView($(".numbers")) && !viewed) {
      viewed = true;
      $('.value').each(function () {
      $(this).prop('Counter',0).animate({
          Counter: $(this).text()
      }, {
          duration: 4000,
          easing: 'swing',
          step: function (now) {
              $(this).text(Math.ceil(now));
          }
      });
    });
  }
}