JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<div class="board">
  <div class="column">
    <div class="list">
      <div class="item invisible">
        a
      </div>
      <div class="item translate none">
        b
      </div>
      <div class="item translate none">
        c
      </div>
      <div class="item translate">
        d
      </div>
      <div class="item translate">
        e
      </div>
      <div class="item translate">
        f
      </div>
    </div>
  </div>
  <div class="column">
    <div class="list">
       <div class="item">
        asdf
        </div>
    </div>
  </div>
</div>

CSS

body, html {
    height: 100%;
    width: 100%;
}

html, body, p, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, img, pre, form, fieldset {
    margin: 0;
    padding: 0;
}
.board {
      background-color: rgb(76, 154, 255);
    min-height: 100vh;
    min-width: 100vw;
    display: inline-flex;
}
.column {
  margin: 8px;
    display: flex;
    flex-direction: column;
}
.list {
      background-color: rgb(235, 236, 240);
    display: flex;
    flex-direction: column;
    opacity: inherit;
    padding: 8px 8px 0px;
    border: 8px;
    transition: background-color 0.2s ease 0s, opacity 0.1s ease 0s;
    user-select: none;
    width: 250px;
    min-height: 250px;
}

.item {
  border-radius: 2px;
    border: 2px solid transparent;
    background-color: rgb(255, 255, 255);
    box-shadow: none;
    box-sizing: border-box;
    padding: 8px;
    min-height: 40px;
    margin-bottom: 8px;
    user-select: none;
    color: rgb(9, 30, 66);
    display: flex;
}

.item {
  position: relative;
}

.invisible {
  opacity: 0;
}

.translate {
  transform: translate(0px, 48px);
  top: -48px;
}

.none {
  /*transform: translate(0px, 0px);*/
}