JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list-unstyled">
            <li>
                Lorem ipsum dolor sit amet
            </li>
            <li>
                Consectetur adipiscing elit
            </li>
            <li>
                Integer molestie lorem at massa
            </li>
            <li>
                Facilisis in pretium nisl aliquet
            </li>
            <li>
                Nulla volutpat aliquam velit
            </li>
            <li>
                Faucibus porta lacus fringilla vel
            </li>
            <li>
                Aenean sit amet erat nunc
            </li>
            <li>
                Eget porttitor lorem
            </li>
        </ul>

CSS

.list-unstyled li:first-of-type {
  opacity:1;
}
.list-unstyled:hover li:first-of-type {
  opacity:.35;
}
.list-unstyled li:nth-of-type(2){
  opacity:0.60;
}
.list-unstyled li:nth-of-type(3){
 opacity:0.35;
}
.list-unstyled li {
  opacity:0.35;
}
.list-unstyled li:hover {
  opacity:1 !important;
}
.list-unstyled li:hover ~ li {
 opacity:0.65 !important;
}
.list-unstyled li:hover ~ li ~li {
 opacity:0.35 !important;
}