JSFiddle - React, Tailwind, and code Playground

by himodoricode

HTML

<div class="wrapper">
  <button type="button" class="btn">Горизонтально</button>
  <button type="button" class="btn">Вертикально</button>
  <div class="horizontal-view current">
    <div class="icon-wrapper">
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
    </div>
 </div>
 <div vertical-view current>
  <div class="card-wrapper">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
 </div> 
</div>

CSS

.icon-wrapper {
  display: flex;
  width: 600px;
}
.icon {
  background: red;
  width: 150px;
  height: 150px;
  margin: 10px;
}
.icon:last-child{
  margin-right: 0;
}

.card-wrapper {
  display: flex;
  flex-direction: column;
  width: 600px;
  display: none;
}
.card {
  background: green;
  width: 100%;
  height: 150px;
  margin: 10px;
}
.current {
 display: block;
}