JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<div id="map"></div>

CSS

body {
  margin: 0;
}

#map {
  height: 100vh;
  width: 100vw;
}

JavaScript

let map = L.map('map').setView([-7.959, 110.238], 16);

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

const routes = {"type":"FeatureCollection","features":[
{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[110.2382587,-7.9579805],[110.2380463,-7.9581418]]]},"properties":{"distance":"89.57671272009"}},
{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[110.2374145,-7.9593029],[110.2371966,-7.9598229]]]},"properties":{"distance":"2206.76527447351"}},
{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[110.2374145,-7.9593029],[110.2379765,-7.9594952]]]},"properties":{"distance":"967.74036482918"}}]};

function getColor(d) {
  return d > 1000 ? '#800026' :
         d > 500  ? '#BD0026' :
         d > 200  ? '#E31A1C' :
         d > 100  ? '#FC4E2A' :
         d > 50   ? '#FD8D3C' :
         d > 20   ? '#FEB24C' :
         d > 10   ? '#FED976' :
         '#FFEDA0';
}

L.geoJSON(routes, {
	style: (feature) => {
  	return {color: getColor(feature.properties.distance)};
  }
}).addTo(map);