JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sorting">
  <a href="#" id="price" data-direction="desc">
              <span class="content__main-filter">Цене</span>
              <span class="content__main-button">
              </span>
            </a>
  <a href="#" id="name" data-direction="desc">
              <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">
          базовая<span>отделка</span>
        </div>
        <div class="card__details-area">
          <span>66 m&sup2;</span> площадь
        </div>
        <div class="card__details-floor">
          <span>6/6</span> этаж
        </div>
      </div>
      <div class="card__price">
  ...

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: 100%;
  text-transform: uppercase;
  font: 12px/normal 'Open Sans', sans-serif;
  color: white;
  display: flex;
 ...

JavaScript

$(function() {
  var a_sort = $('#sorting a');
  var div_conteiner = jQuery.makeArray($('#conteiner > div'));

  a_sort.each(function(index, self) {
    $(self).click(function(e) {
      e.preventDefault();
      var id = $(this).attr('id');
      var direction = $(this).data('direction');
      
      if (direction === 'desc') {
      	$(this).data('direction', 'asc');
      }
      else {
      	$(this).data('direction', 'desc');
      }

      div_conteiner.sort(function f(a, b) {
        var c = 0;
        a = $(a).data(id);
        b = $(b).data(id);
        if (a > b) c = 1;
        else if (a < b) c = -1;
        return c
      });

      if (direction === 'asc') {
        div_conteiner.reverse();
      }

      $.map(div_conteiner, function(div) {
        $(div).appendTo($('#conteiner'));
      });
    });
  });
});