JSFiddle - React, Tailwind, and code Playground

by winnythepooh1

HTML

<html>
<body>
<div tabindex="0" class="link">link</div>
<div class="popup">popup text</div>
</body>
</html>

CSS

.popup{
    border: 1px solid black;
    background: white;
    width: 100px;
    height: 50px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility:hidden;
    opacity:0;
    transition:visibility 0s linear 0.2s,opacity 0.2s linear;
}
.link:focus ~ .popup{
    visibility:visible;
    opacity:1;
    transition-delay:0.1s;
}