JSFiddle - React, Tailwind, and code Playground

by gsv60

HTML

<div id="sorting">
            <a href="#" id="price">
              <span class="content__main-filter">Цене</span>
              <span class="content__main-button">
              </span>
            </a>
            <a href="#" id="name">
              <span class="content__main-filter">Комнатам</span>
              <span class="content__main-buttonUp">
              </span>
            </a>
          </div>
          
         <div class="content__cards" id="conteiner">
          <div class="content__cards-card reserved" reserved data-price="1900000" data-name="a">
            <div class="card__center">
              <div class="card__img-block">
                <img class="card__img" src="https://www.istroit.ru/upload/iblock/13d/13d0038c3468df1adca783bebed4a335.jpg">
              </div>
              <h2 class="card__title">Студия №44</h2>
              <div class="card__details">
                <div class="card__details-finishing">
                  без<span>отделки</span>
                </div>
                <div class="card__details-area">
                  <span>28 m&sup2;</span> площадь
                </div>
                <div class="card__details-floor">
                  <span>12/14</span> этаж
                </div>
              </div>
              <div class="card__price">
                1 900 000 руб.
              </div>
            </div>
            <div class="card__status-booked">
              Забронировано
            </div>
          </div>
          <div class="content__cards-card free" reserved data-price="1666666" data-name="b">
            <div class="card__center">
              <div class="card__img-block">
                <img class="card__img" src="https://www.istroit.ru/upload/iblock/13d/13d0038c3468df1adca783bebed4a335.jpg">
              </div>
              <h2 class="card__title">Однокомнатная<br> №666</h2>
              <div class="card__details">
                <div class="card__details-finishing">
                 ...

CSS

.content__main-filter {
    color: #002f2f;
    font: 14px/normal 'Open Sans', sans-serif;
    cursor: pointer;
    margin-right: 9px;
    margin-left: 14px;
    transition-duration: .2s;
    border-bottom: 2px dotted transparent;
}

.content__main-filter:hover {
    border-color: #002f2f;
}
.content__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.reserved {
    border: 2px solid #a7a37e;
    border-radius: 3px;
}

.free {
    border: 2px solid #002f2f;
    border-radius: 3px;
}

.sold {
    border: 2px solid #a1a1a1;
    border-radius: 3px;
}

.content__cards-card {
    display: flex;
    flex-direction: column;
    width: 320px;
    margin-top: 52px;
}

.card__img-block {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 212px;
    width: 100%;
}

.card__title {
    font: 24px/30px 'Open Sans', sans-serif;
    color: #002f2f;
    font-weight: 700;
    display: flex;
    margin: 52px 0 28px 0;
    height: 60px;
    width: 200px;
}

.card__details {
    display: flex;
    justify-content: space-between;
    width: 214px;
    margin-bottom: 44px;
}

.card__details-finishing {
    display: flex;
    flex-direction: column;
    color: #046380;
    border-left: 3px solid #046380;
    font: 16px/normal 'Open Sans', sans-serif;
    padding-left: 8px;
}

.card__details-area {
    display: flex;
    color: #313639;
    font: 13px/normal 'Open Sans', sans-serif;
    flex-direction: column;
}

.card__details-area span {
    font: 18px/normal 'Open Sans', sans-serif;
}

.card__details-floor {
    font: 13px/normal 'Open Sans', sans-serif;
    display: flex;
    color: #313639;
    flex-direction: column;
}

.card__details-floor span {
    font: 18px/normal 'Open Sans', sans-serif;
}

.card__price {
    font: 24px/normal 'Open Sans', sans-serif;
    font-weight: 600;
    margin-bottom: 32px;
    color: #313639;
}

.card__status-booked {
    height: 36px;
    background-color: #a7a37e;
    width:...

JavaScript

$(function () {
      var a_sort = $('#sorting span');
      var div_conteiner = jQuery.makeArray($('#conteiner div'));
      a_sort.each(function (index, self) {
        var id = $(self).parent().attr("id");
        $(self).click(function (e) {
          e.preventDefault();
          div_conteiner.sort(function f(a, b) {
            a = $(a).data(id);
            b = $(b).data(id);
            if (a > b) c = 1;
            if (a < b) c = -1;
            return c
          });
          if (index % 2) div_conteiner.reverse()
          $.map(div_conteiner, function (div) {
            $(div).appendTo($('#conteiner'))
          });
        });
      });
    });