JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    <div class="buttons">
        <button class="grid">Grid</button>
        <button class="list">List</button>
    </div>
    
    <ul class="list">
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
        <li>List 5</li>
        <li>List 6</li>
        <li>List 7</li>
    </ul>
</div>

CSS

#box ul { list-style: none; }
#box .buttons { margin-bottom: 20px; }
#box .list li { width: 100%; border-bottom: 1px dotted #CCC; margin-bottom: 10px; padding-bottom: 10px; }
#box .grid li { float: left; width: 20%; height: 50px; border-right: 1px dotted #CCC; border-bottom: 1px dotted #CCC; padding: 20px; }

JavaScript

$('button').on('click',function(e) {
    if ($(this).hasClass('grid')) {
        $('#box ul').removeClass('list').addClass('grid');
    }
    else if($(this).hasClass('list')) {
        $('#box ul').removeClass('grid').addClass('list');
    }
});