JSFiddle - React, Tailwind, and code Playground

by iBertel

HTML

<div class="digital-card">
  <div class="block-wrap">
    <div class="card-block item1">
      <div class="table">
        <div class="table-cell">
          <div class="content">
            <p>
            Content
            </p>
            <div class="show-on-big">
              <h2>
              Hidden content
              </h2>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card-block item2">
      <div class="table">
        <div class="table-cell">
          <div class="content">
            content 2
          </div>
        </div>
      </div>
    </div>

    <div class="card-block item3">
      <div class="table">
        <div class="table-cell">
          <div class="content">
            content 3
          </div>
        </div>
      </div>
    </div>

    <div class="card-block item4">
      <div class="table">
        <div class="table-cell">
          <div class="content">
            content 4
          </div>
        </div>
      </div>
    </div>

    <div class="card-block item5">
      <div class="table">
        <div class="table-cell">
          <div class="content">
            content 5
          </div>
        </div>
      </div>
    </div>
    <div class="card-block item6">
      <div class="table">
        <div class="table-cell">
          <div class="content">
            content 6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

* {
  box-sizing: border-box;
}
.digital-card {
  background-color: #567;
  width: 70%;
  padding:5px;
  .block-wrap {
    position: relative;
    height: 300px;
    .card-block {
      position: absolute;
      transition:all 0.3s ease-in-out;      
      padding:5px;
      z-index:1;
      &.item1 {        
        right:50%;
        top: 0;
        left: 0;
        bottom:50%;
      }
      &.item2 {        
        right:25%;
        top: 0;
        left: 50%;
        bottom:50%;
      }
      &.item3 {        
        right:0;
        top: 0;
        left: 75%;
        bottom:50%;
      }
      &.item4 {        
        right:75%;
        top: 50%;
        left: 0;
        bottom:0;
      }
      &.item5 {        
        right:50%;
        top: 50%;
        left: 25%;
        bottom:0;
      }
      &.item6 {        
        left:50%;
        top: 50%;
        right: 0;
        bottom:0;
      }
      &.current {
        z-index:9999;
        left:0;
        right:0;
        top:0;
        bottom:0;
      }
    }
  }
}
.content {
  background-color:#fff;
  text-align:center;
}
.table {
  background-color:#000;
  display:table;
  width:100%;
  height:100%;
  .table-cell {
    display:table-cell;
    vertical-align:middle;
  }
}

.show-on-big {
  opacity:0;
  height:0;
  transition-delay:0.3s;
  .current & {
    opacity:1;
    height:300px;
  }
}

JavaScript

var blockItem = $('.card-block');
blockItem.on('click', function() {
  $(this).toggleClass('current');
});