JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<!-- Filters -->
<input type="radio" name="categories" id="all" value="all" checked>
<input type="radio" name="categories" id="branding" value="branding">
<input type="radio" name="categories" id="graphical" value="graphical">
<input type="radio" name="categories" id="interior" value="interior">
<input type="radio" name="categories" id="illustrations" value="illustrations">
<input type="radio" name="categories" id="arts" value="arts">

<ol class="filter-items">
  <li class="filter-item"><label for="all">All</label></li>
  <li class="filter-item"><label for="branding">Branding</label></li>
  <li class="filter-item"><label for="graphical">Graphical Design</label></li>
  <li class="filter-item"><label for="interior">Interior Design</label></li>
  <li class="filter-item"><label for="illustrations">Illustrations</label></li>
  <li class="filter-item"><label for="arts">Arts</label></li>
</ol>

<!-- Gallery -->
<div class="grid-gallery">

  <div class="photo" data-category="branding">
    <img src="https://i.picsum.photos/id/529/200/200.jpg?hmac=LiB-rmOEJ-iPyye6kU2u9mmHGs_o7w5wrCHbzlNX5b0" alt="">
  </div>

  <div class="photo" data-category="branding">
    <img src="https://i.picsum.photos/id/861/200/200.jpg?hmac=UJSK-tjn1gjzSmwHWZhjpaGahNSBDQWpMoNvg8Bxy8k" alt="">
  </div>

  <div class="photo" data-category="graphical">
    <img src="https://i.picsum.photos/id/529/200/200.jpg?hmac=LiB-rmOEJ-iPyye6kU2u9mmHGs_o7w5wrCHbzlNX5b0" alt="">
  </div>

  <div class="photo" data-category="arts">
    <img src="https://i.picsum.photos/id/861/200/200.jpg?hmac=UJSK-tjn1gjzSmwHWZhjpaGahNSBDQWpMoNvg8Bxy8k" alt="">
  </div>

  <div class="photo" data-category="arts">
    <img src="https://i.picsum.photos/id/529/200/200.jpg?hmac=LiB-rmOEJ-iPyye6kU2u9mmHGs_o7w5wrCHbzlNX5b0" alt="">
  </div>

  <div class="photo" data-category="interior">
    <img src="https://i.picsum.photos/id/861/200/200.jpg?hmac=UJSK-tjn1gjzSmwHWZhjpaGahNSBDQWpMoNvg8Bxy8k" alt="">
  </div>

  <div class="photo"...

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 :root {
  --turquoise: rgb(56, 184, 201);
  --white: rgb(255, 255, 255);
  --poppyred: rgb(199, 74, 82);
}

ol,
li {
  list-style-type: none;
}


/* 5. FILTERS */

input[type="radio"] {
  display: none;
}

.filter-items {
  margin: 2rem 1rem;
  border: 1px solid red;
}

.filter-item {
  text-align: center;
  margin-bottom: .3rem;
  color: var(--white);
}

.filter-item:last-child {
  margin-bottom: 0;
}

.filter-item label {
  display: inline-block;
  text-align: center;
  background: var(--turquoise);
  cursor: pointer;
}

.filter-item:first-child label {
  display: block;
}

.filter-item label:hover {
  background: var(--poppyred);
}

[value="all"]:checked~.grid-gallery [data-category] {
  display: block;
}

[value="branding"]:checked~.grid-gallery .photo:not([data-category~="branding"]),
[value="graphical"]:checked~.grid-gallery .photo:not([data-category~="graphical"]),
[value="interior"]:checked~.grid-gallery .photo:not([data-category~="interior"]),
[value="illustrations"]:checked~.grid-gallery .photo:not([data-category~="illustrations"]),
[value="arts"]:checked~.grid-gallery .photo:not([data-category~="arts"]) {
  display: none;
}


/* Change color on click */

[value="all"]:checked~.filter-items [for="all"],
[value="branding"]:checked~.filter-items [for="branding"],
[value="graphical"]:checked~.filter-items [for="graphical"],
[value="interior"]:checked~.filter-items [for="interior"],
[value="illustrations"]:checked~.filter-items [for="illustrations"],
[value="arts"]:checked~.filter-items [for="arts"] {
  background: var(--poppyred);
}


/* 6. GALLERY */

.grid-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1rem;
}

.photo img {
  height: 100%;
  width: 100%;
}


/*LABEL PADDING

.filter-items .filter-item:nth-child(1) label {
  padding: 0 57.8em;
}
*/