JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet-src.js"></script>
<div id="map"></div>
<p>
  Current map zoom: <span id="currentZoom"></span>
</p>

CSS

#map {
  height: 500px;
}

.test {
  transition: stroke-width 1s;
}

JavaScript

var map = L.map("map").setView([48.86, 2.35], 12);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var circle = L.circle([48.86, 2.35], 1000, {
	weight: 1,
  className: "test"
}).
	addTo(map).
  on({
  	"mouseover": function () {
    	circle.setStyle({
        weight: 20
      })
    },
    "mouseout": function () {
    	circle.setStyle({
        weight: 1
      })
    }
  });

var currentZoom = document.getElementById("currentZoom");

function showZoom() {
	currentZoom.innerHTML = map.getZoom();
}

map.on("zoomend", showZoom);
showZoom();