JSFiddle - React, Tailwind, and code Playground

by fergal_doyle

HTML

<div>
    
    <div class="container">        
        <div class="edit">
            <div class="drop-down">    
                <button class='icon'></button>
                <ul class="menu">
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                </ul>
            </div>
            
        </div>
        <p>content</p>
    </div>
    
    <div class="container">        
        <div class="edit">
            <div class="drop-down">    
                <button class='icon'>c</button>
                <ul class="menu">
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                </ul>
            </div>
            
        </div>
        <p>content</p>
    </div>
    
</div>

CSS

.container {
    position: relative;    
    margin-bottom: 1em;
}

.edit {
    position: absolute;
    top: 0;
    right: 0;
}

.drop-down {
    position: relative;
}

.icon {
    width: 20px;
    height: 20px;
    background: red;
    border: 0;
    position: relative;
    z-index: 100;
}

.menu {
    position: absolute;
    z-index: 200;
    background: #fff;
    display: none;
    right: 0;
}

.icon:focus + .menu {
    display: block;
}