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 () {
    if (localStorage.getItem('viewmode') == 'alt') {
    	$('.listings').addClass('alt');
    }

    $('.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);

        });

    });

});