JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js"></script>
<body>
  <div id='map'></div>
</body>

CSS

body {
          margin: 0;
          padding: 0;
        }
        
        #map {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
        }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1Ijoib2tpZWJ1YmJhIiwiYSI6ImNpdHZscGs3ajAwNXYyb284bW4ydWUzbGsifQ.1PoNrSP0F65WolWgqKhV4g';
var mystyle = {
    "version": 8,
    "sources": {
        "osm": {
            "type": "vector",
            "tiles": ["https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.mvt?api_key=vector-tiles-LM25tq4"]
        }
    },
    "layers": [
        {
            "id": "background",
            "type": "background",
            "paint": {
                "background-color": "#41afa5"
            }
        }, {
            "id": "water",
            "type": "fill",
            "source": "osm",
            "source-layer": "water",
            "filter": ["==", "$type", "Polygon"],
            "paint": {
                "fill-color": "#3887be"
            }
        }
    ]
};

var map = new mapboxgl.Map({
  container: 'map',
  style: mystyle,
  center: [-97.547760, 35.486067],
  zoom: 11
});

map.on('load', function() {

  var geojson = {
    "type": "geojson",
    "data": {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [-97.554882, 35.542201],
            [-97.617270, 35.482703]
          ]
        },
        "properties": {
          "title": 'aaaaaa' // this is a field we can reference in the addLayer with '{title}'
        }
      }, {
        "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [-97.617270, 35.482703],
            [-97.535206, 35.427500]
          ]
        },
        "properties": {
          "title": 'bbbbbb'
        }
      }, {
        "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [-97.617270, 35.482703],
            [-97.491217, 35.476099]
          ]
        },
        "properties": {
          "title": 'cccccc'
        }
      }]
    }
  };

  map.addSource("route",...