JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class='menu-ui'>
  <a href='#' class="btn btn-default active" data-filter='all'>Show all</a>
  <a href='#' class="btn btn-default" data-filter='filter-1'><i class="fa fa-camera-retro fa-lg"></i>Filter 1</a>
  <a href='#' class="btn btn-default" data-filter='filter-2'><i class="fa fa-camera-retro fa-lg"></i>Filter 2</a>
  <a href='#' class="btn btn-default" data-filter='filter-3'><i class="fa fa-camera-retro fa-lg"></i>Filter 3</a>
  <a href='#' class="btn btn-default" data-filter='filter-4'><i class="fa fa-camera-retro fa-lg"></i>Filter 4</a>
  <a href='#' class="btn btn-default" data-filter='filter-5'><i class="fa fa-camera-retro fa-lg"></i>Filter 5</a>
</nav>

<div id='map'></div>

<!-- Modal to be populated on click -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h2 id="marker_id" class="marker_name"></h2>
        <img id="marker_image" class="marker_img" src="" />
        <address id="marker_address" class="marker_addr"></address>
        <p id="marker_content" class="marker_content"></p>
      </div>
    </div>
  </div>
</div>

SCSS

#map {
  width: 100%;
  height: 800px;
}

.menu-ui {
  position: absolute;
  z-index: 9999;
  top: 75px;
  a {
    display: block;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 20px;
    i {
      padding-right: 15px;
    }
  }
}

JavaScript

var api_key = 'pk.eyJ1IjoieW91bmdlcmFzc29jaWF0ZXMiLCJhIjoiY2ltczIzNGFrMDFjZ3V3bTQ1dGNzYjVkMyJ9.hfJiiN48wWpWQGEaT_sWhw';

L.mapbox.accessToken = api_key;

var geojson = [{
  "type": "Feature",
  "geometry": {
    "coordinates": [-86.781602, 36.162664],
    "type": "Point"
  },
  "properties": {
    "id": 001,
    "title": "POI #1",
    "image": "http://lorempixel.com/image_output/city-h-c-524-822-2.jpg",
    "filter-1": true,
    "filter-2": false,
    "filter-3": false,
    "filter-4": true,
    "filter-5": false,
    "marker-color": "#1087bf",
    "marker-size": "medium",
    "marker-symbol": ""
  }
}, {
  "type": "Feature",
  "geometry": {
    "coordinates": [-86.781602, 36.232664],
    "type": "Point"
  },
  "properties": {
    "id": 002,
    "title": "POI #2",
    "image": "http://lorempixel.com/image_output/city-q-c-524-480-8.jpg",
    "filter-1": false,
    "filter-2": true,
    "filter-3": false,
    "filter-4": true,
    "filter-5": false,
    "marker-color": "#1087bf",
    "marker-size": "medium",
    "marker-symbol": ""
  }
}, {
  "type": "Feature",
  "geometry": {
    "coordinates": [-86.881602, 36.262664],
    "type": "Point"
  },
  "properties": {
    "id": 003,
    "title": "POI #3",
    "image": "http://lorempixel.com/image_output/city-q-c-640-480-3.jpg",
    "filter-1": true,
    "filter-2": false,
    "filter-3": true,
    "filter-4": true,
    "filter-5": true,
    "marker-color": "#1087bf",
    "marker-size": "medium",
    "marker-symbol": ""
  }
}, {
  "type": "Feature",
  "geometry": {
    "coordinates": [-86.981602, 36.162664],
    "type": "Point"
  },
  "properties": {
    "id": 004,
    "title": "POI #4",
    "image": "http://lorempixel.com/image_output/city-q-c-640-480-3.jpg",
    "filter-1": true,
    "filter-2": true,
    "filter-3": true,
    "filter-4": true,
    "filter-5": true,
    "marker-color": "#1087bf",
    "marker-size": "medium",
    "marker-symbol": ""
  }
}];

var map = L.mapbox.map('map', 'mapbox.light')
 ...