JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
        <div class="link">
            <a href="#">Link 1</a>
            <div class="dropdown">
                Content for dropdown 1
            </div>
        </div>
        <div class="link">
            <a href="#">Link 2</a>
            <div class="dropdown">
                Content for dropdown 2
            </div>
        </div>
    </div>

CSS

.link {
        display: inline-block;
        position: relative;
        float: right;
    }

    .link a {
        padding: 10px;
    }

    .link .dropdown {
        display: none;
        position: absolute;
        top: 20px;
        right: 0px;
        color: white;
        background: #999;
        height: 200px;
        width: 200px;
        padding: 20px;
        border: 1px solid red;
    }

JavaScript

$('.link a').on("click", function(e){
        e.preventDefault();
        $(this).parent('.link').siblings().children('.dropdown').fadeOut();
        $(this).siblings('.dropdown').fadeToggle();
    });