JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <p>Some para</p>
    </li>
    <li>
        <p>Some para</p>
    </li>
    <li>
        <p>Some para</p>
    </li>
</ul>

CSS

ul { list-style: none; }
li { height: 50px; margin-bottom: 4px; background: red; }
li:active { background: blue; }
p:active { background: blue; height: 100%;}