JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cbp-vm-options">
        <a href="#" class="cbp-vm-grid" data-state="grid"></a>
        <a href="#" class="cbp-vm-list" data-state="list"></a>
    </div>
    
    <div id="content">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        </div>

CSS

.cbp-vm-options a {
        opacity: 0.50;
        transition-duration: 800ms;    
        display: inline-block;
        width: 1em;
        height: 1em;
        background: black;
    }
    
    .cbp-vm-options a.cbp-vm-selected {
        opacity: 1;
    }
        
    .cbp-vm-grid {
    }
    
    .cbp-vm-list {
        
    }
    
    #content {
        display: flex;
        flex-flow: row wrap;
    }
    
    #content .item {
        border: 10px solid white;
        box-sizing: border-box;
        background: red;
        height: 40px;
        width: 100%;
    }
    
    #content.grid .item {
        width: 25%;
    }

JavaScript

(function() {
        
        var cbp_vm_options, content;
    

        // This function set the localStorage variable
        function setState(event) {
            event.preventDefault();
            console.log(event);
    
            var new_state = event.target.dataset.state;
            
            if(document.querySelector('.cbp-vm-selected'))
                document.querySelector('.cbp-vm-selected').classList.remove('cbp-vm-selected');
            event.target.classList.add('cbp-vm-selected')
    
            console.log(new_state);
            localStorage.clear();
            localStorage.setItem('view_state', new_state);
            updateUi();
        }
            
        // This function updates the ui for the user depending on the value
        // of 'vew_state'. The function is called whenever the value changes.
        function updateUi(event) {
            content.classList.toggle('grid');
            
            var state = localStorage.getItem('view_state');
            
            if(state === 'grid') {
                content.classList.add('grid');
                cbp_vm_options.querySelector('.cbp-vm-grid').classList.add('cbp-vm-selected');
            } else {
                content.classList.remove('grid');            
                cbp_vm_options.querySelector('.cbp-vm-list').classList.add('cbp-vm-selected');
            }
            
        }
    
        
        
        function init() {
    
            cbp_vm_options = document.querySelector('.cbp-vm-options'),
            content = document.querySelector('#content');
    

            updateUi();

            cbp_vm_options.addEventListener('click', setState);
        
        }
                
        document.addEventListener('DOMContentLoaded', init);
        
            
        
    })();