JSFiddle - React, Tailwind, and code Playground

by hnn21

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>marker6</title>
</head>

<body>¨

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Multiple filters on markers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>


<style>
.menu-ui {
  background:#fff;
  position:absolute;
  top:10px;right:10px;
  z-index:1;
  border-radius:3px;
  width:20%;
  border:1px solid rgba(0,0,0,0.4);
  }
  .menu-ui a {
    font-size:15px;
    color:#404040;
    display:block;
    margin:0;padding:0;
    padding:10px;
    text-decoration:none;
    border-bottom:1px solid rgba(0,0,0,0.25);
    text-align:center;
    }
    .menu-ui a:first-child {
      border-radius:3px 3px 0 0;
      }
    .menu-ui a:last-child {
      border:none;
      border-radius:0 0 3px 3px;
      }
    .menu-ui a:hover {
      background:#f8f8f8;
      color:#404040;
      }
    .menu-ui a.active,
    .menu-ui a.active:hover {
      background:#DC4D4F;
      color:#FFF;
      }
</style>

<!-- jQuery is required for this example. -->
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>


<nav class='menu-ui'>
  <a href='#' id="all" class="active"  data-filter='all'>Tous</a>
  <a href='#' id="reste" data-filter='Fruits et légumes'>Fruits et légumes</a>
  <a href='#' id="reste" data-filter='Œufs et produits à base de viande (saucisses, pâtés, etc.)'>Œufs et produits à base de viande (saucisses, pâtés, etc.)</a>
  <a href='#'  id="reste" data-filter='Huile et vinaigre'>Huile et vinaigre</a>
   <a href='#' id="reste" data-filter='Lait et produits laitiers'>Lait et produits laitiers</a>
  <a href='#' id="reste" data-filter='Fruits secs et graines'>Fruits secs et...