JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="icons">
    <div class="icon">&#x2600;</div>
    <div class="icon">&#x2600;</div>
    <div class="icon">&#x2600;</div>
    <div class="icon">&#x2600;</div>
    <div class="icon">&#x2600;</div>
    <div class="icon">&#x2600;</div>
    </div>
    <p>Some random paragraph</p>
</div>
<div class="main-2">
    <div class="icons">
    <div class="icon">&#x2600;</div>
    <div class="icon">&#x2600;</div>
    <div class="icon">&#x2600;</div>
    <div class="icon">&#x2600;</div>
    <div class="icon">&#x2600;</div>
    <div class="icon">&#x2600;</div>
    </div>
</div>

CSS

.main, .main-2 {
    display: block;
}
.icon {
    font-size: 50px;
    display: inline-block;
    width: 30px;
    text-align: center;
    float: left;
    margin: 10px;
    color: #000;
}
p {
    display: block;
    clear: both;
    margin: 10px;
}
/* The problem is below (wish to influence all .icon selectors with css) */
 .icons:hover > .icon {
    opacity: 0.3;
}
.icons:hover .icon:hover {
    opacity: 1;
}