JSFiddle - React, Tailwind, and code Playground

by vadimkot

HTML

<!DOCTYPE html>
<html lang="ru">

  <head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="shortcut icon" href="source/img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="source/style.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js "></script>
  </head>

  <body>
    <header>
      <a href="http://test.com">
        <h1>Test</h1>
      </a>
      <div class="menu">
        <a href="#">Главная</a>
        <a href="#">Контакты</a>
        <a href="#">Отзывы</a>
        <a href="#">Обзоры</a>
      </div>
    </header>
    <div class="text1">
      <h2>Наши товары</h2>
    </div>
    <footer>
      <h4>&copy; Copyright 2019</h4>
      <hr />
      <a href="#">Пользовательское соглашение</a>
    </footer>
    <script src="source/script.js"></script>
  </body>

</html>

CSS

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: 'Mukta', sans-serif;
  background-image: url(img/background.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

a {
  text-decoration: none;
}

header {
  background: #333;
  width: 100%;
  text-align: center;
}

h1 {
  color: #fff;
  padding-left: 1%;
  display: inline-block;
}

.menu {
  display: inline-block;
  float: right;
  padding: 1%;
  border: 1%;
}

.menu a {
  margin-left: 10px;
  color: #fff;
}

.menu a:hover {
  color: #ff9913;
  text-decoration: underline;
  cursor: pointer;
}

.text1 {
  color: #fff;
  text-align: center;
  margin-top: 10px;
  cursor: default;
}

.text1 h2 {
  background-color: #333;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.container {
  /* max-width: 960px;*/
  margin: 48px/*auto*/
  ;
  text-align: center;
}

.choice {
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.choice-item {
  padding: .64px 16px;
  border: 1px solid black;
  margin-right: 1%;
  cursor: pointer;
}

.choice-item:last-of-type {
  margin-right: 0;
}

.choice-active {
  background-color: #333;
  color: #fff;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.product {
  padding: 1rem;
}

.product-img {
  display: block;
  height: 225px;
  width: 400px;
}

.product-img:hover {
  width: 410px;
  transition: 0.4s;
}

.product-name {
  text-align: center;
  background: #333;
  text-decoration: none;
}

.product-name a {
  color: #fff;
}

a.button {
  display: inline-block;
  color: white;
  font-weight: 700;
  text-decoration: none;
  user-select: none;
  padding: .5em 2em;
  outline: none;
  border: 2px solid;
  border-radius: 1px;
  transition: 0.2s;
}

a.button:hover {
  background: rgba(255, 255, 255, .2);
}

a.button:active {
 ...

JavaScript

var product = $('.product');

$('#choice > .choice-item').click(
  function() {
    productChoice($(this));
  });

function productChoice(self) {
  self.siblings().removeClass('choice-active');
  self.addClass('choice-active');
  var productCategory = self.attr('data-choice');
  if (productCategory != 'all') {
    product.map(
      function() {
        if ($(this).attr('data-category') === productCategory) {
          $(this).css('display', 'block');
        } else {
          $(this).css('display', 'none');
        }
      }
    );
  } else {
    product.css('display', 'block');
  }
}