JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <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>
    <p>Some random paragraph</p>
    <div class="main-2">
        <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) */
.icon:hover ~ .icon {
    opacity: 0.3;
}