JSFiddle - React, Tailwind, and code Playground

HTML

<div class="para">
    <p> SOME SAMPLE TEXT </p>
</div>

CSS

.para{
    width: 1000px;
    border: 1px solid #000;
}
.para p{
    font-family: Arial, sans-serif;
    font-size: 80px;
    opacity: 0;
}
.para:hover p{
    opacity: 0.99;
    
    transition:         all 400ms ease;
			    -moz-transition:    all 400ms ease;
			    -webkit-transition: all 400ms ease;
			    -o-transition:      all 400ms ease;
			    -ms-transition:     all 400ms ease;
}