JSFiddle - React, Tailwind, and code Playground

by kurnia1

HTML

<script src="//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js"></script>
<script src="//cdn.jsdelivr.net/prettyphoto/3.1.5/js/jquery.prettyPhoto.js"></script>
<script src="//cdn.jsdelivr.net/jquery.inview/0.2/jquery.inview.min.js"></script>
<script src="//cdn.jsdelivr.net/wow/1.0.3/wow.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.min.css">
<section id="get-in-touch">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title text-center wow fadeInDown">Get in Touch</h2>
                <p class="text-center wow fadeInDown">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
            </div>
        </div>
    </section><!--/#get-in-touch-->


    <section id="contact">
        <div id="google-map" style="height:650px" data-latitude="52.365629" data-longitude="4.871331"></div>
        <div class="container-wrapper">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4 col-sm-offset-8">
                        <div class="contact-form">
                            <h3>Contact Info</h3>

                            <address>
                              <strong>Twitter, Inc.</strong><br>
                              795 Folsom Ave, Suite 600<br>
                              San Francisco, CA 94107<br>
                              <abbr title="Phone">P:</abbr> (123) 456-7890
                            </address>

                            <form id="main-contact-form" name="contact-form" method="post" action="#">
                                <div class="form-group">
                                    <input type="text" name="name" class="form-control" placeholder="Name" required>
                               ...

CSS

/* @import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,700,100italic,300italic,400italic,700italic); */
/*
Template Name: Multi
Version: 1.0
Author: ShapeBootstrap
Author URL: http://shapebootstrap.net
*/
/*************************
*******Typography******
**************************/
body {
  /* padding-top: 100px; */
  background: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #64686d;
  line-height: 26px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  color: #272727;
}
a {
  color: #45aed6;
  -webkit-transition: color 400ms, background-color 400ms;
  -moz-transition: color 400ms, background-color 400ms;
  -o-transition: color 400ms, background-color 400ms;
  transition: color 400ms, background-color 400ms;
}
a:hover,
a:focus {
  text-decoration: none;
  color: #2a95be;
}
hr {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #fff;
}
.gradiant {
  background-image: -moz-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
  background-image: -webkit-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
  background-image: -ms-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
}
.gradiant-horizontal {
  background-image: -moz-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
  background-image: -webkit-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
  background-image: -ms-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
}
.section-header {
  margin-bottom: 50px;
}
.section-header .section-title {
  font-size: 44px;
  color: #272727;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 20px;
  margin: 0 0 20px;
}
.section-header .section-title:before {
  content: "";
  position: absolute;
  width: 140px;
  bottom: 0;
  left: 50%;
  margin-left: -70px;
  height: 1px;
  background: #ebebeb;
}
.section-header .section-title:after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  bottom: -11px;
  left: 50%;
  margin-left: -12px;
  border: 5px solid...