JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div class="site-header-shown">
<div class="dropdown dropdown-lang">
    <button class="dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="flag-icon flag-icon-us"></span>
    </button>
    <div class="dropdown-menu dropdown-menu-right">
        <div class="dropdown-menu-col">
            <a href="javascript:;" id="English" onclick="translateLanguage(this.id);" class="dropdown-item current"><span class="flag-icon flag-icon-us"></span>English</a>
            <a href="javascript:;" id="Italian" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-it"></span>Italiano</a>
            <a href="javascript:;" id="Spanish" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-es"></span>Español</a>
            <a href="javascript:;" id="Belarus" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-by"></span>Беларускi</a>
            <a href="javascript:;" id="Polish" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-pl"></span>Polski</a>
            <a href="javascript:;" id="German" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-li"></span>Lietuviu</a>
            <a href="javascript:;" id="Chinese" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-cn"></span>Chinese</a>
        </div>
        <div class="dropdown-menu-col">
            <a href="javascript:;" id="German" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-de"></span>Deutsch</a>
            <a href="javascript:;" id="French" onclick="translateLanguage(this.id);" class="dropdown-item"><span class="flag-icon flag-icon-fr"></span>Français</a>
            <a href="javascript:;" id="Russian" onclick="translateLanguage(this.id);" class="dropdown-item"><span...

CSS

.site-header .help-dropdown {
    float: left;
    position: relative;
    height: 30px;
    margin: 0 0 0 10px;
}

    .site-header .help-dropdown > button {
        height: 30px;
        line-height: 30px;
        border: none;
        background: 0 0;
        color: #adb7be;
    }

        .site-header .help-dropdown.opened > button, .site-header .help-dropdown > button:hover {
            color: #00a8ff;
        }

    .site-header .help-dropdown .help-dropdown-popup {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -400px;
        margin-top: 7px;
        background: #fff;
        border: solid 1px #d8e2e7;
        -webkit-border-radius: .25rem;
        border-radius: .25rem;
        zoom: 1;
        width: 800px;
    }

        .site-header .help-dropdown .help-dropdown-popup:after, .site-header .help-dropdown .help-dropdown-popup:before {
            content: " ";
            display: table;
        }

        .site-header .help-dropdown .help-dropdown-popup:after {
            clear: both;
        }

        .site-header .help-dropdown .help-dropdown-popup:after, .site-header .help-dropdown .help-dropdown-popup:before {
            content: '';
            display: block;
            position: absolute;
            left: 50%;
            width: 0;
            height: 0;
            border-style: solid;
        }

        .site-header .help-dropdown .help-dropdown-popup:before {
            top: -10px;
            margin-left: -8px;
            border-width: 0 8px 10px 8px;
            border-color: transparent transparent #d8e2e7 transparent;
        }

        .site-header .help-dropdown .help-dropdown-popup:after {
            top: -9px;
            margin-left: -7px;
            border-width: 0 7px 9px 7px;
            border-color: transparent transparent #fff transparent;
        }

    .site-header .help-dropdown .help-dropdown-popup-side {
        display: table-cell;
       ...

JavaScript

$('.dropdown-menu-col a').click(function () {
            $('.current').text($(this).text());
        });