JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<script src="https://fonts.googleapis.com/css?family=Work+Sans:400,700"></script>
<!--

Los datos del mapa están en:
https://storage.googleapis.com/gpes-static/mapa-export-armas/world-map-geojson.json
Los puedes editar con un editor de geojson

-->
<!-- MAPA EXPORTACIONES DE ARMAS -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" defer></script>
<link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/gpes-static/mapa-export-armas/map-styles.min.css" />

<div id="geoJsonMap" style="width: 100%; height: 200px;"></div>

<script src="https://storage.googleapis.com/gpes-static/mapa-export-armas/map-export-weapons.min.js" type="text/javascript" defer></script>
<script src="https://storage.googleapis.com/gpes-static/mapa-export-armas/map-defs.min.js" defer></script>
<div class="row">
  <div class="col-sm">
    <div>
      <small><span style="color: rgb(232, 153, 137);">█</span> Operaciones a las que hay que poner fin de manera inmediata</small>
    </div>
    <div>
      <small><span style="color: rgb(239, 204, 148);">█</span> Operaciones muy preocupantes</small>
    </div>
  </div>
  <div class="col-sm">
    <div>
      <small><span style="color: rgb(245, 240, 163);">█</span> Operaciones de las que se necesita más información</small>
    </div>
    <div>
      <small>&rarr; Haz click en los colores</small>
    </div>
  </div>
</div>
<!-- /MAPA EXPORTACIONES DE ARMAS  -->