JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<div class="flyout-action">
    <button>Open menu</button>
    <div class="flyout">
        <div class="triangle-up"></div>
        <div class="content"></div>
    </div>
</div>
<div>
    <p>ajsdflasj dflkasj dflksjf lksj flksjf lskjf lskjf lskjf lskjf klsjf</p>
    <p>ajsdflasj dflkasj dflksjf lksj flksjf lskjf lskjf lskjf lskjf klsjf</p>
    <p>ajsdflasj dflkasj dflksjf lksj flksjf lskjf lskjf lskjf lskjf klsjf</p>
    <p>ajsdflasj dflkasj dflksjf lksj flksjf lskjf lskjf lskjf lskjf klsjf</p>
    <p>ajsdflasj dflkasj dflksjf lksj flksjf lskjf lskjf lskjf lskjf klsjf</p>
    <p>ajsdflasj dflkasj dflksjf lksj flksjf lskjf lskjf lskjf lskjf klsjf</p>
</div>

CSS

.flyout-action {
    position: relative;
    display: inline-block;
    -webkit-transform: translate(200px, 0px);
}
.flyout {
    display: none;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 10px);    
}
.triangle-up {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, -12px); 
    width: 0px;
    height: 0px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 12px solid black;
    opacity: 1;
}
.triangle-up:after {
    content:"";
    position: absolute;
    width: 0px;
    height: 0px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 12px solid rgb(255, 255, 225);
    -webkit-transform: translate(-50%, 1px); 
}
.content {
    width: 400px;
    height: 400px;
    border: 1px solid rgba(0, 0, 0, .9);
    background-color: rgba(255, 255, 225, .9);
    border-radius: 5px;
}

JavaScript

/**
    Flyout with CSS triangle
*/

$(".flyout-action > button").click(function () {
    $(this).siblings(".flyout").stop(true,true).fadeToggle(250);
});

$(".flyout-action").click(function () {
    return false;
});

$(document).click(function () {
    $(".flyout").stop(true,true).fadeOut(250);
});