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>';
      return L.circleMarker(latlng, geojsonMarkerOptions).bindPopup(popupContent, popupOptions, {

      });

    }

  });
  markers.addLayer(geojson);

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