JSFiddle - React, Tailwind, and code Playground

by bidak

HTML

<div class="main">
  <div class="head">
    <input type="text" id="search" placeholder="دنبال کجا میگردی؟">
  </div>
  <div class="map-container">
    <div id="map"></div>
  </div>
</div>

CSS

.map-container {
  position: relative;
  background-color: green;
  height: 500px;
  width: 100%;
}

.head {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}