JSFiddle - React, Tailwind, and code Playground

by chovy

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/[email protected]/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"
    />
    <style>
      html {
        font-size: 62.5%;
      }
      body {
        margin: 0;
        padding: 0;
        font-size: 1.6rem;
        font-family: sans-serif;
        width: 95vw;
        height: 90vh;
        margin: 0 auto;
      }

      header {
        padding: 1rem 0;
      }

      #map {
        width: 100%;
        height: 100%;
      }

      .marker img {
        width: 3rem;
      }

      .marker span {
        display: block;
        background: #fff;
        width: 10rem;
        padding: 1rem;
        border-radius: 0.4rem;
        border: 1px solid black;
      }

      @media (max-width: 481px) {
        /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
        #status {
          display: block;
        }
      }
    </style>
  </head>

  <body>
    <header>
      <button id="start">start</button>
      <button id="stop">stop</button>
      <button id="marker">add marker</button>
      <button id="export">export</button>
      <span id="status"></span>
    </header>
    <div id="map"></div>

    <script
      src="https://unpkg.com/[email protected]/dist/leaflet.js"
      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
      crossorigin=""
    ></script>
    <script...