JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Hover</h1>
<ul class="Reactions Hover">
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>Four</li>
	<li>Five</li>
	<li>Six</li>
	<li>Seven</li>
	<li>Eight</li>
	<li>Nine</li>
	<li>Ten</li>
</ul>

<h1>Button Down</h1>
<ul class="Reactions BtnDown">
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>Four</li>
	<li>Five</li>
	<li>Six</li>
	<li>Seven</li>
	<li>Eight</li>
	<li>Nine</li>
	<li>Ten</li>
</ul>

CSS

/* hide everything after the first 4 */
.Reactions > li:nth-of-type(n + 5) {
    display: none;
}

/* add a show more label */
.Reactions.Hover > li:nth-child(4)::after {
    background: red;
    content: " show more on hover"
}

.Reactions.Hover > li:nth-child(4):hover ~ li {
    display: block
}

/* add a show more label */
.Reactions.BtnDown > li:nth-child(4)::after {
    background: yellow;
    content: " show more on button down"
}

.Reactions.BtnDown > li:nth-child(4):active ~ li {
    display: block
}