JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="https://maps.googleapis.com/maps/api/js"
></script>

<script>





var myCenter=new google.maps.LatLng(42.656566,27.654656);
var marker;

function initialize(){
  var mapProp = {
    center:myCenter,
    zoom:17,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };

  var map = [];
  var mapElements = document.getElementsByClassName('googleMap');
  for(var i = 0; i < mapElements.length; i++){
    console.log(mapElements[i]);
    console.log(mapProp);
	  map[i] = new google.maps.Map(mapElements[i], mapProp);
  }

  for(var x = 0; x < map.length; x++){
    var marker=new google.maps.Marker({
      position:myCenter,
    });

    var marker=new google.maps.Marker({
      position:myCenter,
      animation:google.maps.Animation.BOUNCE
    });
    marker.setMap(map[x]);
    var infowindow = new google.maps.InfoWindow({
      content:"name"
    });
    infowindow.open(map[x],marker);
  }
  
}



google.maps.event.addDomListener(window, 'load', initialize);

</script>
<div class='container'>

	<ul class='tabs'>
		<li class='tab-link' data-tab='tab-1'><i class='fa fa-info-circle fa-lg'></i> 1</li>
		<li class='tab-link current' data-tab='tab-2'><i class='fa fa-location-arrow fa-lg'></i> 2</li>
		<li class='tab-link' data-tab='tab-3'>3</li>
		<li class='tab-link' data-tab='tab-4'>4</li>
	</ul>

<div id='tab-1' class='tab-content'>
<div class='googleMap' style='width:575px;height:250px;'></div>
</div>
<div id='tab-2' class='tab-content current'>
<div class='googleMap' style='width:575px;height:250px;'></div>
</div>
<div id='tab-3' class='tab-content'>
<div class='googleMap' style='width:575px;height:250px;'></div>
</div>
<div id='tab-4' class='tab-content'>
<div class='googleMap' style='width:575px;height:250px;'></div>
</div>
</div>

CSS

.container{
			width: 580px;
			margin: 0 auto;
			//background: url("../images/cat.png");
			float:left;
		}


		ul.tabs{
			margin: 0px;
			padding: 0px;
			list-style: none;
		}
		ul.tabs li{
			background: none;
			color: #222;
			display: inline-block;
			padding: 10px 15px;
			cursor: pointer;
		}

		ul.tabs li.current{
			background: #ededed;
			color: #222;
		}

		.tab-content:not(.current){
		  position: absolute;
      left: -200%;
			padding: 2px;
		}

		.tab-content.current{
			display: block;
			
		}

JavaScript

$(document).ready(function(){
	
	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current');

		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
	})

})