JSFiddle - React, Tailwind, and code Playground

by Cristofer Sousa

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=true"></script>
<section class="bg-modelo">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h2>Modelo de Negócio SHX: <span class="orange">UM NOVO CONCEITO EM GESTÃO EMPRESARIAL</span></h2>
          <p>A SHX tem como foco a criação de soluções de alta eficiência gerencial. Para garantir este objetivo é necessário ir muito além da proposta de software. Por esta razão a empresa concentra seus esforços na estruturação de produtos e serviços voltados para a organização interna e capacitação de seus clientes. 
            Possui uma rígida metodologia de trabalho que prioriza a qualidade dos serviços realizados em cada etapa do processo.</p> <br>
            
            <h2>Política de Evolução Contínua</h2>
            <p>
              O cliente SHX conta com a tranquilidade de possuir uma solução que está em contínuo aperfeiçoamento. O sistema possui uma política de evolução que garante a incorporação periódica de customizações, exigências legais (contábil-fiscal) e atualizações tecnológicas.
              
            </p><br>
            <h2>Transparência e Respeito ao Cliente</h2>
            <p>
              O projeto comercial da SHX é uma prova de transparência e respeito por seus clientes. Desde o momento em que o cliente recebe sua proposta inicial, tem a completa ciência do custo total de seu projeto, sem custos extras. Enfim, o modelo comercial da SHX não cobra valores adicionais por customizações, da mesma forma que não limita as horas para implantação e atendimento ao cliente, o único objetivo é o resultado final.
            </p>
          </div> 
        </div><!--/row-->
        
      </div><!--/container--> 

  
  </section>
        
    <div id="cd-google-map">
      <div id="google-container"></div>
      <div id="cd-zoom-in"></div>
      <div...

CSS

.bg-modelo{
    background-color:#EEE;
    height: 100vh;
    padding-top:120px;
    padding-bottom:90px;
    z-index: 5;
    opacity: 0.9;
}


#cd-google-map {
  position: relative;
  height: 50px;
  z-index: -1;
  opacity: 0.4;
  top: -50px;
}









/*mapa*/

/* -------------------------------- 

Primary style

-------------------------------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


/* -------------------------------- 

Main components 

-------------------------------- */
#google-container {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: #e7eaf0;
}
@media only screen and (min-width: 768px) {
  #google-container {
    height: 300px;
  }
}
@media only screen and (min-width: 1170px) {
  #google-container {
    height: 800px;
  }
}

#cd-google-map {
  position: relative;
  height: 50px;
  z-index: -1;
  opacity: 0.4;
  top: -599px;
}

#cd-google-map address {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 1em 1em;
  background-color: rgba(211, 104, 104, 0.9);
  color: white;
  font-size: 13px;
  font-size: 0.8125rem;
}
@media only screen and (min-width: 768px) {
  #cd-google-map address {
    font-size: 15px;
    font-size: 0.9375rem;
    text-align: center;
  }
}

#cd-zoom-in, #cd-zoom-out {
  height: 32px;
  width: 32px;
  cursor: pointer;
  margin-left: 10px;
  background-color: rgba(211, 104, 104, 0.9);
  background-repeat: no-repeat;
  background-size: 32px 64px;
  background-image: url("../img/cd-icon-controller.svg");
}
.no-touch #cd-zoom-in:hover, .no-touch #cd-zoom-out:hover {
  background-color: #d36868;
}
@media only screen and (min-width: 768px) {
  #cd-zoom-in, #cd-zoom-out {
   /* margin-left: 50px;*/
   margin-left: 1500px;
  }
}

#cd-zoom-in {
  background-position: 50% 0;
  margin-top: 10px;
  margin-bottom: 1px;
}
@media only...

JavaScript

jQuery(document).ready(function($){
	//set your google maps parameters
	var latitude = -23.5003814,
		longitude = -46.8427315,
		map_zoom = 5;
			

	//google map custom marker icon - .png fallback for IE11
	var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;
	var marker_url = ( is_internetExplorer11 ) ? 'img/cd-icon-location.png' : 'img/cd-icon-location.png';
		
	//define the basic color of your map, plus a value for saturation and brightness
	var	main_color = '#2d313f',
		saturation_value= -20,
		brightness_value= 5;

	//we define here the style of the map
	var style= [ 
		{
			//set saturation for the labels on the map
			elementType: "labels",
			stylers: [
				{saturation: saturation_value}
			]
		},  
	    {	//poi stands for point of interest - don't show these lables on the map 
			featureType: "poi",
			elementType: "labels",
			stylers: [
				{visibility: "off"}
			]
		},
		{
			//don't show highways lables on the map
	        featureType: 'road.highway',
	        elementType: 'labels',
	        stylers: [
	            {visibility: "off"}
	        ]
	    }, 
		{ 	
			//don't show local road lables on the map
			featureType: "road.local", 
			elementType: "labels.icon", 
			stylers: [
				{visibility: "off"} 
			] 
		},
		{ 
			//don't show arterial road lables on the map
			featureType: "road.arterial", 
			elementType: "labels.icon", 
			stylers: [
				{visibility: "off"}
			] 
		},
		{
			//don't show road lables on the map
			featureType: "road",
			elementType: "geometry.stroke",
			stylers: [
				{visibility: "off"}
			]
		}, 
		//style different elements on the map
		{ 
			featureType: "transit", 
			elementType: "geometry.fill", 
			stylers: [
				{ hue: main_color },
				{ visibility: "on" }, 
				{ lightness: brightness_value }, 
				{ saturation: saturation_value }
			]
		}, 
		{
			featureType: "poi",
			elementType: "geometry.fill",
			stylers: [
				{ hue: main_color },
				{ visibility: "on" }, 
				{...