JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div class="circle c1">one</div>
<div class="circle c2">two</div>
<div class="circle c3">three</div>
<div class="circle c4">four</div>

CSS

.circle {
    opacity: 1;
    width: 48%;
    margin: 0;
    display: inline-block;
    border: 1px solid #000;
    height: 10em;
}

body:hover .circle {
    opacity: 0.4;
}

body:hover .circle:hover {
    opacity: 1;
}