JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <button data-type="list">Список</button>
    <button data-type="box">Ячейки</button>
</header>
<section class="list">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

CSS

div{
    background: green;
    transition: all 1.5s;
}
.list > div{
    height: 40px;
    margin-bottom: 10px;
    width: 100%;
}

.box > div{
    display: inline-block;
    width: 20vw;
    height: 20vw;
}

section{
    margin-top: 20px;
}

JavaScript

document.querySelector("header").onclick = function(e){
   var thisType = e.target.dataset.type;
   if(thisType) document.querySelector("section").className = thisType;
}