JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/gokertanrisever/leaflet-ruler/master/src/leaflet-ruler.css">
<script src="https://cdn.rawgit.com/gokertanrisever/leaflet-ruler/master/src/leaflet-ruler.js"></script>
<div id="map"></div>

CSS

#map { height: 600px; }

JavaScript

var map = L.map('map').setView([44.65, 6.79], 14);

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 group1 = L.featureGroup();
var group2 = L.featureGroup();
// circles
var circle1 = L.circle([44.6663888888889, 6.775],{radius: 150, color:'white',weight:.5, opacity:1,fillColor: '#ff9900',fillOpacity:1}).addTo(group1);
var circle2 = L.circle([44.6502777777778, 6.79333333333333], {radius: 150, color:'white',weight:.5, opacity:1,fillColor: '#008000',fillOpacity:1}).addTo(group1);
var circle3 = L.circle([44.6191666666667, 6.81222222222222], {radius: 150, color:'white',weight:.5, opacity:1,fillColor: '#008000',fillOpacity:1}).addTo(group2);
var circle4 = L.circle([44.6761111111111, 6.795], {radius: 150, color:'white',weight:.5, opacity:1,fillColor: '#008000',fillOpacity:1}).addTo(group2);
map.addLayer(group1);
L.control.ruler().addTo(map);