JSFiddle - React, Tailwind, and code Playground

by dotnetCarpenter

HTML

<h3>Hover here</h3>
<ul>
    <li>This</li>
    <li>list</li>
    <li>is</li>
    <li>clipped.</li>
    <li>A clip</li>
    <li>transition</li>
    <li>will</li>
    <li>show it</li>
</ul>

CSS

ul {
    clip: rect(auto, auto, 0, auto);
    position: absolute;
    -webkit-transition-delay: 0.29s;
    -moz-transition-delay: 0.29s;
    -ms-transition-delay: 0.29s;
    -o-transition-delay: 0.29s;
    transition-delay: 0.29s;
    -webkit-transition-property: clip;
    -moz-transition-property: clip;
    -ms-transition-property: clip;
    -o-transition-property: clip;
    transition-property: clip;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
h3:hover ~ ul, h3:active ~ ul {
    clip:rect(auto, auto, 10rem, auto);
}