JSFiddle - React, Tailwind, and code Playground

by cs09g

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8 />
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<!-- jquery -->
	<script src='bower_components/jquery/dist/jquery.min.js'></script>
	<!-- mapbox -->
	<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.css' rel='stylesheet' />
	<!-- bootstrap -->
	<!-- <script src='bower_components/bootstrap/dist/js/bootstrap.min.js'></script> -->
	<link href='bower_components/bootstrap/dist/css/bootstrap.min.css' rel='stylesheet' />
	<!-- leaflet -->
  <!-- <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" /> -->
  <!-- turf -->
  <script src="https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js" /></script>
  <!-- ominvore -->
  <!-- <script src='script/leaflet-omnivore.min.js'></script> -->	
  <!-- topojson -->
  <!-- <script src="topojson.js"></script> -->
  <!-- data -->
  <script src='data/parchimetri.json'></script>	
  <style type="text/css" media="screen">
  	body { margin:0; padding:0; }
  	#map { position:absolute; top:0; bottom:0; width:100%; }
	 	#attiva-filtro  {
  		position: absolute;
  		top: 20px;
  		right: 10px;
  		z-index: 1;
  		background-color:#ffb2c2;
  		color:#fff;
  		font-size:1.2em;
  	}
  	#attiva-filtro:hover,
  	#attiva-filtro a:active  {
  		position: absolute;
  		top: 20px;
  		right: 10px;
  		z-index: 1;
  		background-color: #ff325e;
  		color:#fff;
  		font-size:1.2em;
  	}
  	

  </style>
</head>
<body>
	<div id='map'></div>
	<a id='attiva-filtro' type="button" class="btn btn-default">Filtro</a>

	<script >

		// Provide your access token: grazie Zedda!
		L.mapbox.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6IlhHVkZmaW8ifQ.hAMX5hSW-QnTeRCMAy9A8Q';

var map =...