JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

    <div class="order">
    
    <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% }

JavaScript

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');
		localStorage.setItem("viewmode", "alt");
      } 
	  
	  else {
        $(this).removeClass('alt');
		localStorage.setItem("viewmode", "default");
      }
	 

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

});