JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="element" style="position: absolute; right: 200px; top:50px; color: white; cursor: pointer;">
            <div class="my-dropdown" href="#" id="user-name">
                john doe <span style="font-size:smaller;">&#9660;</span>
                <div>
            <ul class="my-dropdown-menu" data-for="user-name">
                <li><a href="#">Logout</a></li>
                <li><a href="#">Change Password</a></li>
                <li><a href="#">Profile</a></li>
            </ul>
        </div>
    
</body>

CSS

body{
    background-color:black;
}

.my-dropdown-menu a, .link {
  color: black;
}

.my-dropdown-menu a:visited, .visited {
   color: black;
}

.my-dropdown-menu a:active, .active {
   color: black;
}

.my-dropdown {
    color: white;
    font-size: larger;
    position: relative;
    width: 300px;
}

.my-dropdown-menu {
    display: none;
    color: black;
    font-size: large;
    text-align: left;
    padding-left: 20px;
    padding-bottom: 5px;
    padding-top: 5px;
    position: relative;
    left: -30px;
    z-index: 50;
    background-color: white;
    width: 200px;
    border-radius: 5px;
}

.my-dropdown-menu li{
    margin-top: 20px;
    margin-bottom: 20px;
}

JavaScript

$(document).ready(function () {
    
    //DROPDOWN
    $('.my-dropdown').on("click", function () {
        var id = $(this).prop('id');
        console.log(id);
        var dropDown = $("ul[data-for='" + id + "']");
        dropDown.toggle();
    });


});