JSFiddle - React, Tailwind, and code Playground

by adjit

HTML

<div id="people">
    <div class="person">Shakespear
        <ul class="quotes">
            <li>"We know what we are, but know not what we may be."</li>
            <li>"It is not in the stars to hold our destiny but in ourselves."</li>
            <li>"This life, which had been the tomb of his virtue and of his honour, is but a walking shadow; a poor player, that struts and frets his hour upon the stage, and then is heard no more: it is a tale told by an idiot, full of sound and fury, signifying nothing."</li>
        </ul>
    </div>
    <div class="person">Galileo
        <ul class="quotes">
            <li>"I have never met a man so ignorant that I couldn't learn something from him."</li>
            <li>"I do not feel obliged to believe that the same God who has endowed us with sense, reason, and intellect has intended us to forgo their use."</li>
            <li>“You cannot teach a man anything, you can only help him find it within himself.”</li>
        </ul>
    </div>
</div>

CSS

#people {
    position: relative;
}

.person {
    border: 1px solid red;
    width: 100px;
}

.quotes {
    display: none;
}

.person:hover .quotes {
    display: block;
    position: absolute;
    margin-left: 100px;
    top: -10px;
}