JSFiddle - React, Tailwind, and code Playground
by vasilij_
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.labels {
background-color:#AAAAAA;
padding-left: 2px;
padding-right: 2px;
padding-top: 4px;
padding-bottom: 4px;
margin: 0;
font-family: Roboto,Arial,sans-serif;
font-size: 15px;
}
#floating-panel {
position: absolute;
top: 60px;
left: 5px;
z-index: 5;
}
.buttn {
height:28px;
//border: 2px solid #fff;
//border-radius: 3px;
//box-shadow: 0 2px 6px rgba(0,0,0,.3);
cursor: pointer;
text-align: center;
font-family: Roboto,Arial,sans-serif;
font-size: 14px;
line-height: 25px;
padding-left: 5px;
padding-right: 5px;
margin-top: 2px;
margin-bottom: 2px;
}
.inp {
height:22px;
font-size: 14px;
//border-color: #828282;
font-family: Roboto,Arial,sans-serif;
padding-left: 5px;
padding-right: 5px;
margin-top: 2px;
margin-bottom: 2px;
}
.inp_c {
width:150px;
}
.inp_numbs {
width:35px;
}
</style>
<!-- console visualization; see http://meta.stackexchange.com/a/242491 -->
<!-- <script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script> -->
</head>
<body>
<div id="floating-panel">
<input type="text" class="inp inp_c" id="inp_coords" autocomplete="off" placeholder="Введите координаты места" onkeydown="onInputCoordsKeyPressed(event);"> <input type=button class="buttn" value="→" onclick="onInputCoordsChanged();" id="btn_coords"><br/>
<input type="text" class="inp inp_numbs" id="inp_radius"...