JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
  <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

<link type="text/css" rel="stylesheet" href="//leaflet.github.io/Leaflet.draw/leaflet.draw.css" />
<script type="text/javascript" src="//leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>

  <style>
    html, body {width:100%; height:100%; padding: 0; margin: 0;}
    #cartodb-map { width: 100%; height:100%; background: black;}
  </style>

  <script>
    var map;
    function init(){
      // initiate leaflet map
      map = new L.Map('cartodb-map', { 
        center: [40,-98],
        zoom: 4,
        drawControl: true
      })

      L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
        attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
      }).addTo(map);

      var layerUrl = 'http://bretwhiteley.cartodb.com/api/v2/viz/f8fef638-c99c-11e4-99ec-0e853d047bba/viz.json';

      // change the query for the first layer
      var subLayerOptions = {
        
      }

      cartodb.createLayer(map, layerUrl)
        .addTo(map)
        .on('done', function(layer) {
          layer.getSubLayer(0).set(subLayerOptions);
        }).on('error', function() {
          //log the error
        });
    }

  </script>


<body onload="init()">
  <div id='cartodb-map'></div>
</body>