JSFiddle - React, Tailwind, and code Playground

by Junior Din

HTML

-
  <body>

    <div id="fb-root"></div> <!--Facebook Like Button -->
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-96654319-2', 'auto');
  ga('send', 'pageview');

</script>

    <!--Heading Elements -->
      <div class="jumbotron">
        <div class="blue-background">
        <div class="contact-banner">
          <p>P.O. Box 660 Murrysville, PA 15668</p>
          <p id="phone-number"><a href="(412) 848-3421"><strong>(412) 848-3421</strong></p> 
          <p>Email: <a href="mailto:danrandolph40@gmail.com" target="_top">danrandolph40@gmail.com</a>
        </div>
        </div>
        <div class="container">
          <a href="www.alleghenysewerandplumbling.com"><img class="img-responsive img-center" src="img/logo.png"></a>
        </div>
      </div>
      
      <div class="company-name">
        <h1>Allegheny Sewer and Plumbing LLC in Murrysville, PA</h1>
      </div>
    <!--Begin Main Content -->
   <div class="container"> <!--New Container -->

    <div class="content-container"> <!--Content on Left Side of Testimonials -->
      <div class="row gas-content"> <!--Gas, Water, & Sewer Line Row -->
        <div class="col-md-4">
          <img class="pull-left img-responsive pipes-img" src="img/pipes.jpg" alt="Pipelines">
        </div>
        <div class="col-md-8 move-up">
          <br>
          <h3 class="content-heading gas-heading">Gas,...

CSS

/* Heading Content: Jumbotron, Contact Info*/

.jumbotron {
	background-image: url(../img/background.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	text-align: center;
	margin-bottom: 0;
}

.container {
	display:flex;
}

.container img {
	margin-top: 50px;
	margin-bottom: 0;
}

.contact-banner {
	/*background-color: rgba(3, 17, 85, 0.6);*/
	max-width: 100%;
	padding-top: 15px;
	padding-bottom: 15px;
	border-top: solid 1px rgb(97, 122, 148);
	border-bottom: solid 1px rgb(97, 122, 148);
}

.blue-background {
	max-width: 100%;
	background-color: rgba(3, 17, 85, 0.6);
}

.contact-banner p {
	color: #EEE;
	display: inline;
	font-family: 'Open Sans', sans-serif;
	padding-right: 0.50em;
	padding-left: 0.50em;
	font-size: 16px;
}

#phone-number {
	font-weight: bold;
	font-size: 1.65em;
	border-left: solid 2px white;
	border-right: solid 2px white;
	padding-left: 0.50em;
	padding-right: 0.50em;
	font-size: 24px;
}

.company-name h1 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 800;
	text-align: center;
	text-transform: uppercase;
	color: white;
	background-color: rgb(3, 17, 85);
	border-top: solid 2px rgb(97, 122, 148);
	border-bottom: solid 2px rgb(97, 122, 148);
	margin-top: 0;
	padding-top: 15px;
	padding-bottom: 15px;
}

/* Content Styles*/
.gas-content {
	margin: 4.50em 0 4.50em 5%;
}

.left-content {
	margin: 2.50em 0 2.50em 5%;
}

.content-container {
border:solid red;
}

.test-container {
	width: 25%;
	float: left;
	margin-top: -10px;
}
.test-container{
  margin-top:0;
}
.move-up {
	margin-top: -2em;
}

.move-down {
	margin-top: 2em;
}

.img-center {
	display: block;
	margin: 0 auto;
}

.content-heading {
	color: rgb(3, 17, 85);
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	line-height: 1.50em;
}

.services li {
	color: rgb(3, 17, 85);
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 600;
}

.emergency-services li {
	color: rgb(3, 17,...