JSFiddle - React, Tailwind, and code Playground

by Denis Ineshin

HTML

<div class="switch">
    <button class="js-table">Таблицей</button>
    <button class="js-grid">Сеткой</button>
</div>
<div class="list js-list">
    <div class="user">
        <div class="user-avatar animated"></div>
        <div class="user-name animated">Вася</div>
    </div>
    <div class="user">
        <div class="user-avatar animated"></div>
        <div class="user-name animated">Гена</div>
    </div>
    <div class="user">
        <div class="user-avatar animated"></div>
        <div class="user-name animated">Клава</div>
    </div>
    <div class="user">
        <div class="user-avatar animated"></div>
        <div class="user-name animated">Маша</div>
    </div>
    <div class="user">
        <div class="user-avatar animated"></div>
        <div class="user-name animated">Ксюша</div>
    </div>
    <div class="user">
        <div class="user-avatar animated"></div>
        <div class="user-name animated">Виталик</div>
    </div>
    <div class="user">
        <div class="user-avatar animated"></div>
        <div class="user-name animated">Олежег</div>
    </div>
    <div class="user">
        <div class="user-avatar animated"></div>
        <div class="user-name animated">Тупень</div>
    </div>
    <div class="user">
        <div class="user-avatar animated"></div>
        <div class="user-name animated">Сэм</div>
    </div>
    <div class="user">
        <div class="user-avatar animated"></div>
        <div class="user-name animated">Геннадий</div>
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 20px;
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.switch {
    margin: 0 0 20px;
}

.list {
    position: relative;
    border: 1px solid #ccc;
    padding: 10px;
    overflow: hidden;
}

.user {
    position: relative;
}
.user + .user {
    border-top: 1px solid #ccc;
}
.user-avatar {
    width: 0;
    height: 0;
    margin-bottom: 0;
}

.type_grid .user {
    float: left;
    width: 25%;
}
.type_grid .user + .user {
    border-top: 0;
}
.type_grid .user-avatar {
    width: 70px;
    height: 70px;
    margin: 0 auto 5px;
    border-radius: 50%;
    background: #ccc;
}
.type_grid .user-name {
    text-align: center;
    margin-bottom: 15px;
}

.animated {
    -webkit-transition: all 250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -moz-transition: all 250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -o-transition: all 250ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    transition: all 250ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    
    -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

JavaScript

var $list = $(".js-list"),
    $btn_table = $(".js-table"),
    $btn_grid = $(".js-grid");

var setTable = function () {
    $list.removeClass("type_grid");
};

var setGrid = function () {
    $list.addClass("type_grid");
};

$btn_table.on("click", setTable);
$btn_grid.on("click", setGrid);