JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

    <div class="order">
    <a class="sortbyprice">Sort by Price</a>
    <a class="sortbypax">Sort by Pax</a>
    
    <a class="layout normal active">Default View</a>
    <a id="thumbnails-list" class="layout alternative">Alt View</a>
        
    </div>


    <div class="results">
    
        <div class="listings">
        <span>$ 300</span>
        <div class="pax tooltip" title="Pax (number of ppl)">10</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie consequat erat, sit amet blandit nulla placerat vel</p>
        </div>

        <div class="listings">
        <span>$ 900</span>
        <div class="pax tooltip" title="Pax (number of ppl)">20</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie consequat erat, sit amet blandit nulla placerat vel</p>
        </div>

        <div class="listings">
        <span>$ 100</span>
        <div class="pax tooltip" title="Pax (number of ppl)">30</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie consequat erat, sit amet blandit nulla placerat vel</p>
        </div>
   
    </div>
    
    
    
</div>

CSS

.order { display:block; padding:30px; background:#333; margin-bottom:30px; }
.order a { width:25%; float:left; text-align:center; color:#fff; cursor:pointer }
.order:after { clear:both; content:""; display:block; width:100% }

.listings { float:left; width:31.3333%; background:#eee; margin:1%; padding:2%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.listings span { font-size:30px; text-align:center; display:block; margin-bottom:10px }
.listings .pax { font-size:16px; text-align:center; display:block; }
.listings .pax:before { content:"Pax: " }

.listings.alt { width:98% }

/* TOOLTIP CSS BELOW */


.tooltipster-default { border-radius: 5px;background-color:rgba(51,51,51,0.9);color: #fff;}
.tooltipster-default .tooltipster-content { font-size: 10px; padding: 15px 10px; overflow: hidden; text-transform:uppercase;}
.tooltipster-base { padding: 0; font-size: 0; line-height: 0; position: absolute; left: 0; top: 0; z-index: 9999999; pointer-events: none; width: auto; overflow: visible;}
.tooltipster-base .tooltipster-content { overflow: hidden;}

.tooltipster-fade { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity;-ms-transition-property: opacity; 
transition-property: opacity; }
.tooltipster-fade-show { opacity: 1;}

JavaScript

// this part deals with the VIEW MODE option


jQuery(document).ready(function() {

  $('.order a.layout').on('click', function(e){
  e.preventDefault();

  if($(this).hasClass('active')) {
  // do nothing if the clicked link is already active
  return;
  }

  $('.order a.layout').removeClass('active');
  $(this).addClass('active');


  var clickid = $(this).attr('id');
  $('.listings').fadeOut(240, function(){
  if(clickid == 'thumbnails-list') {
    $(this).addClass('alt');
  } else {
    $(this).removeClass('alt');
  }

  $('.listings').fadeIn(200);
});

});

});


// this part deals with SORT BY options

var priceAscending = false;
var ratingAscending = true;

$('.container').on('click','.sortbyprice',function(){
    ratingAscending = true;
    var sorted = $('.listings').sort(function(a,b) {
        return (priceAscending ==
               (convertToNumber($(a).find('span').html()) < 
                convertToNumber($(b).find('span').html()))) ? 1 : -1;
    });
    priceAscending = !priceAscending;
    $('.results').append(sorted);
})
$('.container').on('click','.sortbypax',function(){ 
    priceAscending = true;
    var sorted = $('.listings').sort(function(a,b){
        return (ratingAscending ==
               (parseFloat($(a).find('.pax').html()) < 
                parseFloat($(b).find('.pax').html()))) ? 1 : -1;
    });
    ratingAscending = !ratingAscending;

    $('.results').append(sorted);
});

var convertToNumber = function(value){
     return parseFloat(value.replace('$',''));
}