JSFiddle - React, Tailwind, and code Playground

by ipr101

HTML

<body>
    <div class="btn-brand"><a href="#" id="btn-brand" class="btn-show">Nos marques</a></div>   
    <div id="manufacturer-list">
        <p>All our brands</p>
        <a href="" class="close"></a>
        <ul>
            
            <li class="first_item"><a title="More about Adidas Originals" href="http://stonepower.info/www/ca-reste-entre-nous/ecommerce/manufacturer.php?id_manufacturer=58">Adidas Originals</a></li>
            
            <li class="item"><a title="More about Alternative Apparel" href="http://stonepower.info/www/ca-reste-entre-nous/ecommerce/manufacturer.php?id_manufacturer=15">Alternative Apparel</a></li>
            
            <li class="item"><a title="More about American Vintage" href="http://stonepower.info/www/ca-reste-entre-nous/ecommerce/manufacturer.php?id_manufacturer=6">American Vintage</a></li>
            
            <li class="item"><a title="More about April 77" href="http://stonepower.info/www/ca-reste-entre-nous/ecommerce/manufacturer.php?id_manufacturer=7">April 77</a></li>
            
            <li class="item"><a title="More about Barbour x Tokito" href="http://stonepower.info/www/ca-reste-entre-nous/ecommerce/manufacturer.php?id_manufacturer=26">Barbour x Tokito</a></li>
            
            <li class="item"><a title="More about Bleu de Chauffe" href="http://stonepower.info/www/ca-reste-entre-nous/ecommerce/manufacturer.php?id_manufacturer=31">Bleu de Chauffe</a></li>
            
            <li class="item"><a title="More about Blue Lemon" href="http://stonepower.info/www/ca-reste-entre-nous/ecommerce/manufacturer.php?id_manufacturer=37">Blue Lemon</a></li>
            
            <li class="item"><a title="More about Boregart" href="http://stonepower.info/www/ca-reste-entre-nous/ecommerce/manufacturer.php?id_manufacturer=52">Boregart</a></li>
            
            <li class="item"><a title="More about Cala 1789 "...

CSS

#manufacturer-list, #cat-list {
    background-color: #FFFFFF;
    border: 1px solid black;
    display: none;
    height: 265px;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 150px;
    width: 960px;
    z-index: 1500;
}

JavaScript

$(document).ready(function() {
    $('#btn-brand').bind('click', function(event) {
        event.preventDefault();
         event.stopPropagation();
          $('#manufacturer-list').fadeIn(100);
    });
    $('.close').bind('click', function(event) {
        event.preventDefault();
          $('#manufacturer-list').fadeOut(100);
    });
    $(body).click(function(event) {
        if (!$(event.target).closest('#manufacturer-list').length) {
            $('#manufacturer-list').fadeOut(100);
        };
    });
});