JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <button type="button" name="all">Show all</button>
  <input type="checkbox" name="red" value="red">red
  <input type="checkbox" name="blue" value="blue">green
  <input type="checkbox" name="green" value="green">blue



  <hr />
  <div class="filterelements">
    <div class="red" rel="color:red"></div>
    <div class="green" rel="color:green"></div>
    <div class="blue" rel="color:blue"></div>
    <div class="redgreen" rel="color:red|color:green"></div>
    <div class="green" rel="color:green"></div>
    <div class="red" rel="color:red"></div>
    <div class="redblue" rel="color:red|color:blue"></div>
  </div>
</body>

</html>

CSS

.filterelements {
      display: block;
      width: 210px;
    }

    .red,
    .green,
    .blue,
    .redgreen,
    .redblue {
      width: 50px;
      height: 50px;
      float: left;
      margin: 10px;
    }

    .red {
      background: #ff2600;
    }

    .green {
      background: #a5de00;
    }

    .blue {
      background: #0087ff;
    }

    .redgreen {
      background: rgb(255, 38, 0);
      background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(165, 222, 0, 1) 100%);
    }

    .redblue {
      background: rgb(255, 38, 0);
      background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(0, 135, 255, 1) 100%);
    }