JSFiddle - React, Tailwind, and code Playground

by greenpeace

HTML

<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" defer></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<link rel="stylesheet" href="https://static.greenpeace.es/covid-cities/media-1.css" />
<div style="font-weight: 700; font-size: 1.15em; margin: 1em 0 0.5em 0;">Así puedes moverte en tu ciudad</div>
<div id="map6" style="width: 100%; height: 550px; margin-bottom: 5px;"></div>
<div style="display: flex; margin-bottom: 16px; justify-content: space-between;">
  <div style="flex: 50%; margin-right: 5px;">
    <img style="height: 25px;" src="https://storage.googleapis.com/gpes-static/ciudades-covid/punto.png?v=1" alt="punto" /> <small style="font-size: 13px">- Medidas temporales (fines de semana o por horas)</small>
  </div>
  <div style="flex: 50%; margin-left: 5px;">
    <img style="height: 25px;" src="https://storage.googleapis.com/gpes-static/ciudades-covid/estrella.png" alt="estrella" /> <small style="font-size: 13px">- Medidas fijas (24 horas todos los días)</small>
  </div>
</div>
<div style="margin: 0 0 1em 0; font-size: 0.7em; line-height: 1.5em;">La vuelta a las calles tras el confinamiento por la crisis sanitaria está obligando a las ciudades a repensar el espacio público para garantizar la seguridad y la movilidad de la ciudadanía. Mientras algunos ayuntamientos han puesto en marcha medidas con vocación de permanencia, otros las han limitado solo a ciertas horas o a los fines de semana.</div>
<script src="https://static.greenpeace.es/covid-cities/media-1.js" defer></script>