JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<div id="map"></div>

CSS

#map { 
				height: 700px;
			}	
			
			.my-div-icon {
				width: 25px;
				height:25px;
				background: blue;
				border: 3px dotted black;
			}
      
.olPopup.custom-circle .circle::before {  position:absolute; content:"";opacity:.8; z-index:1; left:0px; top:0px; width:100%; height:100%; border-radius:50%; background:#fff; }
.olPopup.custom-circle .circle.red { width:62px !important; height:62px !important; line-height:62px; }
.olPopup.custom-circle .circle.red::before { background:#CB0000; }
.olPopup.custom-circle .circle.orange { width:49px !important; height:49px !important; line-height:49px; }
.olPopup.custom-circle .circle.orange::before { background:#F57723; }
.olPopup.custom-circle .circle.blue { width:49px !important; height:49px !important; line-height:49px; }
.olPopup.custom-circle .circle.blue::before { background:#1E6CD4; }
.olPopup.custom-circle .circle.blue { width:36px !important; height:36px !important; line-height:36px; }
.olPopup.custom-circle .circle.green::before { background:#5FBB00; }
.olAlphaImg

JavaScript

var map = L.map('map', {
				center: [52.494, 13.446],
				zoom: 13
			});

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

			
								
				
			// Marker auf Basis einer CSS Klasse definieren (Siehe CSS Bereich oben)
			var myIcon = L.divIcon({className: 'circle.red', iconSize: null});

			// Marker mit dem CSS Style hinzufuegen
			L.marker([52.48, 13.45], {icon: myIcon}).addTo(map)
				.bindPopup('Marker per CSS Style');	

            L.marker([52.48, 13.45]).addTo(map);