JSFiddle - React, Tailwind, and code Playground

by mizobata

HTML

<div id="wrapper">

  <div class="gray-back flex flex-wrap">
    <div class="category">aaaa</div>
    <div class="category">aaaa</div>
    <div class="category">aaaabbbb</div>
    <div class="category">aaaafsfds</div>
    <div class="category">aaaafsfds</div>
    <div class="category">aaaafsfds</div>
    <div class="category">aaaafsfdasdadasdsadads</div>
  </div>
  
  <div class="item-list flex flex-wrap justify-content">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

<div>

CSS

#wrapper {
  width: 100vw;
  height: 100vh;
}

.flex {
  display: flex;
}
.flex.flex-wrap {
  flex-wrap: wrap;
}
.flex.justify-content {
  justify-content: center;
}

.gray-back {
  background: #eee;
  display: flex;
  width: 100%;
  height: auto;
  min-height: 50px;
}

.category {
  border-radius: 10px;
  border: 1px solid #eee;
  margin: 5px;
  padding: 3px;
  text-align: center;
  line-height: 23px;
  width: auto;
  height: 25px;
  cursor: pointer;
}

.category.selected {
  border-radius: 10px;
  border: 1px solid #ee8989;
  background: #ee8989;
}

.category:hover {
  border-radius: 10px;
  border: 1px solid #eeaaaa;
  background: #eeaaaa;
}

.item-list {
  margin: 10px;
  height: 400px;
  overflow-y: scroll;
  border: 1px solid #ccc;
}

.item-list .item {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  margin: 10px;
  background: #aaa;
}
.item-list .item:hover {
  border: 1px solid #eeaaaa;
}

JavaScript

const categories = document.querySelectorAll('.category')

categories.forEach(category => {
  category.addEventListener('click', e => {
    if (e.target.classList.contains('selected')) {
    	e.target.classList.remove('selected')
    } else {
    	e.target.classList.add('selected')
    }
  })
})