JSFiddle - React, Tailwind, and code Playground

by nimeshrmr

HTML

<div style="width:550px; padding:40px 0 0;margin:0 auto; position:relative;">    
            
            <div class="button">Button
                <div class="slide">
                <a href="#">contente</a>
                <a href="#">content</a>
                <a href="#">content</a>
                <a href="#">content</a>
                <a href="#">content</a>
                </div>
            </div>
    
            <div class="button">Button
                <div class="slide">
                <a href="#">contente</a>
                <a href="#">content</a>
                <a href="#">content</a>
                <a href="#">content</a>
                <a href="#">content</a>
                </div>
            </div>
    
</div>

CSS

.slide { 
    border:1px solid #de9a44;
    width:80px; 
    height:auto; 
    display:none; 
    position:absolute;
    left: 0;
    bottom: 15px;
}

.button {
    background:none repeat scroll 0 0 transparent;
    border:1px solid #CC0001;
    cursor:pointer;
    height:15px;
    position:relative;
    right:10px;
    top:100px;
    width:80px;
    display: inline-block;
}

JavaScript

$(".button").hover(function () {
    $(this).children('.slide').slideToggle("fast");
  });