JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="custom-dropdown" style="float:left">
    <div class="custom-dropdown-folded">
        <a class="custom-dropdown-btn" tabindex="1">
            <span class="custom-dropdown-btn-label">Sacre bleu!</span>
        </a>
    </div>

    <div class="custom-dropdown-unfolded">
        <div>
            <a class="custom-dropdown-btn-unfolded">
                <span class="custom-dropdown-btn-label">Sacre bleu!</span>
            </a>
            <ul class="custom-dropdown-list">
                <li><a>All News</a></li>
                <li><a>Landing Page</a></li>
                <li><a>News Releases</a></li>
                <li><a>Press Kits</a></li>
                <li><a>Media Contacts</a></li>
                <li><a>Corporate Image & Video</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="custom-dropdown" style="float:right;">
    <div class="custom-dropdown-folded">
        <a class="custom-dropdown-btn" tabindex="1">
            <span class="custom-dropdown-btn-label">Sacre bleu!</span>
        </a>
    </div>

    <div class="custom-dropdown-unfolded">
        <div>
            <a class="custom-dropdown-btn-unfolded">
                <span class="custom-dropdown-btn-label">Sacre bleu!</span>
            </a>
            <ul class="custom-dropdown-list">
                <li><a>All News</a></li>
                <li><a>Landing Page</a></li>
                <li><a>News Releases</a></li>
                <li><a>Press Kits</a></li>
                <li><a>Media Contacts</a></li>
                <li><a>Corporate Image & Video</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

CSS

body {
            margin:0;
            padding:0;
            font-family:Arial, Helvetica, sans-serif;
        }

        div.custom-dropdown-folded {
            margin-bottom:40px;
            width:326px;
        }


        div.custom-dropdown-unfolded {
            position:fixed;
            width:326px;
            top:0px;
        }

        .custom-dropdown-btn {
            background-image: url(src/sprites.png);
            background-position: 0px 60px;
            background-color: #F05332;
            display:block;
            text-decoration: none;
            cursor:pointer;
        }

        .custom-dropdown-btn-unfolded {
            background-image: url(src/sprites.png);
            background-position: 0px 120px;
            background-color: #F05332;
            display:block;
            text-decoration: none;
            cursor:pointer;
        }

        .custom-dropdown-btn:hover {
            background-color: #0096D6;
            text-decoration: none;
        }

        .custom-dropdown-btn-unfolded:hover {
            background-color: #0096D6;
            text-decoration: none;
        }

        span.custom-dropdown-btn-label {
            width: 245px;
            height: 45px;
            padding: 15px 0px 0px 20px;
            border-right:1px #FFFFFF solid;
            display:block;
        }

        span.custom-dropdown-btn-label {
            font-size:24px;
            font-weight:bold;
            color:#FFFFFF;
        }

        ul.custom-dropdown-list {
            border-left:2px #5A5A5A solid;
            border-right:2px #5A5A5A solid;
            border-bottom:2px #5A5A5A solid;
            background-color:#FFFFFF;
            text-decoration: none;
            color: #5A5A5A;
        }



        ul.custom-dropdown-list a {
            display:block;
            padding-left:19px;
            padding-top:8px;
            height:24px;
            border-bottom:1px solid #CCCCCC;

        }

        .hovered...

JavaScript

window.onload = function () {

            var aDropDowns = document.getElementsByClassName("custom-dropdown");
            var aDropDownObjects = [];
            for (var i = 0; i < aDropDowns.length; i++) {
                var oDropDown = new DropDown(aDropDowns[i]);
                oDropDown.addClass("hidden",oDropDown.htmlDropDown.children[1]);
                oDropDown.bIsOpen = false;
                aDropDownObjects.push(oDropDown);
            }

            document.onclick = function(){
                for (var i = 0; i < aDropDownObjects.length; i++) {
                    //aDropDownObjects[i].addClass("hidden", aDropDownObjects[i].htmlDropDown.children[1]);
                    //console.log(aDropDownObjects[i].bIsOpen);
                }
            }


        };



        function DropDown(htmlObject) {
            this.bIsOpen = false;
            this.htmlDropDown = htmlObject;
            this.htmlItemContainer = this.htmlDropDown.getElementsByClassName("custom-dropdown-list")[0];
            var self = this;


            for (var i = 0; i < this.htmlItemContainer.children.length; i++){
                var oListItem = this.htmlItemContainer.children[i];
                oListItem.onmouseover = function(){
                    var aHovered = self.htmlDropDown.getElementsByClassName("hovered");
                    if (aHovered.length) {
                        for (var j = 0; j < aHovered.length; j++) {
                            self.removeClass("hovered", aHovered[j]);
                        }
                    }
                    self.addClass("hovered", this);
                };
                oListItem.onclick = function () {
                    self.swapLabels(this.children[0].innerHTML, self.htmlDropDown.getElementsByClassName("custom-dropdown-btn-label"));
                }
            }

            this.htmlDropDown.onclick = function (e) {
                e.stopPropagation();
                var aHovered =...