JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
  <div class="down"></div>
  <div class="left"></div>
</div>

<button>play</button>

CSS

div.box {
  width: 240px;
  height: 200px;
  margin: 50px;
  position: relative;
  background: #006DA5;
  transition: 1s;
}
div.down {
  width: 222px;
  height: 18px;
  background: #00A8E7;
  position: absolute;
  top: 100%;
  left: -2px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 10%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 10%);
  backface-visibility: hidden;
}
div.left {
  width: 22px;
  height: calc(100% - 50px);
  background: #00A8E7;
  top: 50px;
  right: 100%;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 90% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 90% 100%);
  position: absolute;
}


div.box.active{
  height: 300px;
  
}

JavaScript

$('button').click(function(){
$('.box').toggleClass('active')
})