JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<div class="unselected-check w-100 mt-2">
<a href="javascript:void(0);" data-category="day" data-input="gece_sayisi" data-value="3" class="unselected float-left mr-2 mb-2 pl-2 pt-1 pr-2 pb-1 border rounded shadow-sm display-block"><i class="fa fa-close"></i> <span>3 Gece / 4 Gün </span></a>
	<a href="javascript:void(0);" data-category="price" data-input="fiyat_araligi" data-value="519-559" class="unselected float-left mr-2 mb-2 pl-2 pt-1 pr-2 pb-1 border rounded shadow-sm display-block"><i class="fa fa-close"></i> <span>519 - 559</span></a>
	<a href="javascript:void(0);" data-category="departure" data-input="kalkis_yeri" data-value="1656" class="unselected float-left mr-2 mb-2 pl-2 pt-1 pr-2 pb-1 border rounded shadow-sm display-block"><i class="fa fa-close"></i> <span>İstanbul</span></a>
	<a href="javascript:void(0);" data-category="day" data-input="gece_sayisi" data-value="7" class="unselected float-left mr-2 mb-2 pl-2 pt-1 pr-2 pb-1 border rounded shadow-sm display-block"><i class="fa fa-close"></i> <span>7 Gece / 8 Gün </span></a>
	<a href="javascript:void(0);" data-category="price" data-input="fiyat_araligi" data-value="519-559" class="unselected float-left mr-2 mb-2 pl-2 pt-1 pr-2 pb-1 border rounded shadow-sm display-block"><i class="fa fa-close"></i> <span>100 - 200</span></a>
</div>

CSS

.pl-2, .px-2 {
    padding-left: 0.5rem!important;
}

.pr-2, .px-2 {
    padding-right: 0.5rem!important;
}
.pb-1, .py-1 {
    padding-bottom: 0.25rem!important;
}
.pt-1, .py-1 {
    padding-top: 0.25rem!important;
}
.mb-2, .my-2 {
    margin-bottom: 0.5rem!important;
}
.mr-2, .mx-2 {
    margin-right: 0.5rem!important;
}
.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075)!important;
}
.float-left {
    float: left!important;
}
.rounded {
    border-radius: 0.25rem!important;
}
.border {
    border: 1px solid #dee2e6!important;
}
a {
    color: #30394F;
}

JavaScript

var check = $('.unselected-check'),
	cont = check.children('a');

cont.detach().sort(function(a, b) {
	var astts = $(a).data('category');
	var bstts = $(b).data('category')
	//return astts - bstts;
	return (astts > bstts) ? (astts > bstts) ? 1 : 0 : -1;
});
check.append(cont);