JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
    <ul>
        <li>...</li>
        <li class="current">...</li>
        <li class="center active">...</li>
        <li >...</li>
        <li>...</li>
    </ul>
</div>

CSS

.slider li {opacity: 0.3;}
.slider li.center.active {opacity: 1;}
.slider li.current {opacity: 1;}  // this here doesn't work.