JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div>
    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>

    <li>
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...</p>
    </li>
</div>

CSS

li {

    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}


div li:hover {

    opacity: 1;
 
}
div:hover li:not(:hover) {
    opacity: .3;
    -webkit-transform: scale(.9);
    -moz-transform: scale(.9);
    -ms-transform: scale(.9);
    -o-transform: scale(.9);
    transform: scale(.9);
}