JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<div class="popup" id="">Ajai</div>

CSS

.popup
{
border-radius:10px;
border:1px solid skyblue;
position:absolute;
bottom:10px;
right:10px;
padding:10px 20px;
animation:slide 0.75s ease;
    background:skyblue;
    font-family:arial;
    font-size:12px;
    color:#333;
 }
.popup:after
{
    content:"";
    width:0;
    height:0;
    border:5px solid transparent;
    border-top-color:skyblue;
    position:absolute;
    bottom:-10px;
    left:47%;
}

@keyframes slide{
    0%{
        padding:0;
        opacity:0;
        }
    100%{
        overflow:visible;
        opacity:100;
        } 
}