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>

CSS

#map {
  height: 500px;
}

JavaScript

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

$.getJSON('http://soundgoods.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT * FROM soundgoods_mixtape_map_1', function(data) {
  var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#FFCC00",
    color: "#323232",
    weight: 2,
    opacity: 0.5,
    fillOpacity: 0.4
  };

  var geojson = L.geoJson(data, {

    pointToLayer: function(feature, latlng) {
      var popupOptions = {
        maxWidth: 500
      };
      var popupContent = '<a target="_blank" class="popup" href="' +
        feature.properties.post + '">' +
        feature.properties.soundcloud +
        '<h3>' + "Post & tracklist" + '</h3>' + '</a>';
      var circle = L.circleMarker(latlng, geojsonMarkerOptions).bindPopup(popupContent, popupOptions);

      // Highlight the marker on hover
      circle.on('mouseover', function() {
        circle.setStyle({
          color: 'red'
        });
      });

      // Un-highlight the marker on hover out
      circle.on('mouseout', function() {
        circle.setStyle(geojsonMarkerOptions);
      });

      // Open the popup on click
      /*circle.bindPopup(popupContent, popupOptions);
      circle.on('click', function() {
        circle.openPopup(latlng);
      });*/

      return circle;
    }

  });
  markers.addLayer(geojson);

  // CONSTRUCT THE MAP
  var map = L.map('map').setView([0, 0], 3);
  baseLayer.addTo(map);
  markers.addTo(map);
});