JSFiddle - React, Tailwind, and code Playground

by Shawn Allen

HTML

<ul id="project-types">
    <li><a class="ux">UX</a></li>
    <li><a class="js">JavaScript</a></li>
</ul>

<section id="projects">
    <article class="js">
        <h2>Project 1 (JS)</h2>
    </article>
    <article class="ux">
        <h2>Project 2 (UX)</h2>
    </article>
</section>

CSS

.highlight {
    background: #ffc;
}

JavaScript

d3.selectAll("#project-types a")
    .on("click", function() {
        var type = this.className;
        console.log("type:", type);
        d3.selectAll("#projects article")
            .classed("highlight", function() {
                return this.className === type;
            });
    });