JSFiddle - React, Tailwind, and code Playground

by id0

HTML

<div class="wrap">
    <nav class="nav">
        <span class="nav__item">top</span>
        <span class="nav__item">right</span>
        <span class="nav__item">bottom</span>
        <span class="nav__item">left</span>
    </nav>
    <nav class="nav" data-this>
        <span class="nav__item">top</span>
        <span class="nav__item">right</span>
        <span class="nav__item">bottom</span>
        <span class="nav__item">left</span>
    </nav>
</div>

SCSS

.wrap {
    .nav:not([data-this]) {
        background: #eee;
        display: inline-block;
        padding: 10px;
    }
    .nav__item {
        padding: 5px;
        &:hover {
            background: black;
            color: #aaa;
            cursor: pointer;
        }
    }
    [data-this] {
        background: #333;
        color: white;
    }
    [data-this] .nav__item {
        font-weight: bold;
    }
}