JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Example of block, inline, none, inline-block</h2>
<p class="info">This is a paragraph. By default it is a <q>block</q> element.Following elements move on a new line.
<span>
    Out of sight,
    Out of mind
</span>
</p>
<p class="info">This is another paragraph. An input element, 
    <input type="text"> is instead an example of an <q>inline</q>element. Buttons are <q>inline</q> elements too.</p>

CSS

p {
    padding: 10px 5px 15px 10px;
    border: 1px solid gray;
}

q {
    font-weight: bold;
}

p:hover{
    background-color: yellow;
    border: 4px dashed blue;
}

span{
    display: none;
}

p:hover span {
    display: block;
}