JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<div id="log-popover">
    <div id="log-popover-cont">
    
    </div>
</div>

SCSS

body {
    background: #ccc;
}

* {
    box-sizing: border-box;
}

#log-popover {
    z-index: 100001;
    position: relative;
    transition: all 80ms ease-out;
    
    top: 30px;
    left: 40px;
    
    &:before {
        content: " ";
        display: block;
        position: absolulte;
        top: -20px;
        left: 50%;
        width: 0;
        border: 9px solid transparent;
        border-bottom: 11px solid #fff;
        z-index: 101;
    }
}

#log-popover-cont {
    width: 325px;
    height: 325px;
    border-radius: 5px;
    background: #fff;
    box-shadow: rgba(#000, 0.3) 0 -10px 60px, rgba(#000, 0.1) 0 0 20px;
    transition: background 200ms;
}

#log-popover-iframe-container {
    height: 100%;
}
}