JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<body>
    
<div id='box' class="grow">
    <p id='handler'></p>	
</div>
    
   <div id="googlemaps" ></div>
<div id='box2' class="grow">
    <p id='handler2'></p>	
</div>
</body>

CSS

html{background: #ffffff}
body,div,p{margin:0;padding:0}
#box{height:120px;width:200px;background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: -moz-linear-gradient(50% 0%, #292929, #111);
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-collapse: collapse;
border-spacing: 0px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.9) 0px 0px 20px 0px;
color: #DDD;
font-family: helvetica,arial,verdana,serif;
font-size: 11px;
left: 5px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 0px;
margin-top: 0px;
opacity: 0.84;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
padding-top: 0px;
pointer-events: all;
position: fixed;
top: 67px;
z-index: 15;position: absolute;left:0;background: #002433}
p{height:30px;background:#ddd;cursor: move;background: #002433}

.grow{height:50px;width:200px;background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: -moz-linear-gradient(50% 0%, #292929, #111);
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-collapse: collapse;
border-spacing: 0px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.9) 0px 0px 20px 0px;
color: #DDD;
font-family: helvetica,arial,verdana,serif;
font-size: 11px;
left: 5px;
margin-bottom: 0px;
margin-left: 10px;
margin-right: 0px;
margin-top: 0px;
opacity: 0.84;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
padding-top: 0px;
pointer-events: all;
position: fixed;
top: 67px;
z-index: 15;position: absolute;left:0;background: #001233}
#googlemaps { 
  height: 100%; 
  width: 100%; 
  position:absolute; 
  top: 0; 
  left: 0;...

JavaScript

window.onload=function(){
    new drag('box','handler',true);
    new drag('box2','handler2',true);
}

function drag(){return this.init.apply(this,arguments)};

drag.prototype={
	init: function(container,handler,isLimit){
		this.o=document.getElementById(container);
		this.h=document.getElementById(handler);
		this._x=this._y=0;
		this.limit = isLimit;
		this._move=this.bind(this,this.move); 
		this._end=this.bind(this,this.end);
		this.addEvent(this.h,'mousedown',this.bind(this,this.start));
	},

	start:function(e){
		var ev = e || window.event;
		this._x = ev.clientX - this.o.offsetLeft;
		this._y = ev.clientY - this.o.offsetTop;
		this.addEvent(document,'mousemove',this._move);
		this.addEvent(document,'mouseup',this._end);
		ev.preventDefault && ev.preventDefault();
		this.h.setCapture && this.h.setCapture();
	},

	move:function(e){
		var ev = e || window.event,
		l= ev.clientX - this._x,
		t= ev.clientY - this._y;
		if(!!this.limit){
			var maxX = document.documentElement.clientWidth - this.o.offsetWidth,
			maxY = document.documentElement.clientHeight - this.o.offsetHeight;
			l = l < 0 ? 0 : l;
			l = l > maxX ? maxX : l;
			t = t < 0 ? 0 : t;
			t = t >maxY ? maxY : t;
		}
		this.o.style.left = l +'px';
		this.o.style.top = t +'px';
	},

	end:function(){
		this.removeEvent(document,'mousemove',this._move);
		this.removeEvent(document,'mouseup',this._end);
		this.h.releaseCapture && this.h.releaseCapture(); 
	},

	addEvent:function(o,e,fn){
		return o.attachEvent ? o.attachEvent('on'+e,fn) : o.addEventListener(e,fn,false);
	},

	removeEvent:function(o,e,fn){
		return o.detachEvent ? o.detachEvent('on'+e,fn):o.removeEventListener(e,fn,false);
	},

	bind:function(o,fn){
        return function(){
        	return fn.apply(o,arguments);
        }
	}
}

// The latitude and longitude of your business / place
var position = [27.1959739, 78.02423269999997];
 
function showGoogleMaps() {
 
    var latLng = new google.maps.LatLng(position[0], position[1]);
 
    var...