JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div>
        <div>
        </div>
    </div>
</div>

CSS

html {text-align:center;display:table;width:100%;height:100%;}
body {display:table-cell;vertical-align:middle;}
div {
    min-height:1em;
    min-width:1em;
    margin:0;
    box-shadow:inset 0 0 0 1px;
    border-radius:100%;
    transition:1s;
    display:inline-block;
    vertical-align:top;
    text-align:center;line-height:0.8em;text-shadow:0 0 5px
}
div:hover, div:hover div {
    padding:3em;
    transition:1s;
}
div:before {content:'hover me!'; position:absolute;text-shadow:0 0 6px white,0 0 6px white,0 0 6px white,0 0 6px white,0 0 6px white,0 0 6px white,0 0 6px white,0 0 6px white;margin-top:-1.2em;)