JSFiddle - React, Tailwind, and code Playground

by VadimMalkov

HTML

<div class='z-board'>
  <div class='z-board-column'>
    <div class='z-board-column-content'>
      <div class='z-task-item'>
        <div class='z-task-item-content'>
          1
        </div>  
      </div>
    </div>
  </div>
  <div class='z-board-column'>
    <div class='z-board-column-content'>
      <div class='z-task-item'>
        <div class='z-task-item-content'>
          2
        </div>  
      </div>
    </div>
  </div>
  <div class='z-board-column'>
    <div class='z-board-column-content'>
      <div class='z-task-item'>
        <div class='z-task-item-content'>
          3
        </div>  
      </div>
    </div>
  </div>
  <div class='z-board-column'>
    <div class='z-board-column-content' style="margin-right:5px;">
      <div class='z-task-item'>
        <div class='z-task-item-content'>
          4
        </div>  
      </div>
    </div>
  </div>
</div>

CSS

body{
  margin:0px;
  padding:0px;
}

.z-board{
  width:100%;
}

.z-board-column{
  width:25%;
  display: block;
  float:left;
}

.z-board-column-content{
  min-height: 300px;
  margin-left:5px;
  margin-top: 5px;
  border-color: #ddd;
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
}