JSFiddle - React, Tailwind, and code Playground

by Yonas Hailu

HTML

<div class="dragable">
  <div class="white"></div>
  <div class="white"></div>
  <div class="arrow">
    <div class="arrow-side"></div>
    <div class="arrow-side"></div>
  </div>
</div>
<div class="controls">
  <div class="arrow arrow-up">
    <div class="arrow-side"></div>
    <div class="arrow-side"></div>
  </div>
  <div class="arrow-tail"></div>
</div>

CSS

.dragable {
  position: absolute;
  width: 80px;
  height: 80px;
  margin-top: -40px;
  margin-left: -40px;
  left: 50%;
  cursor: pointer;
  z-index: 3;
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 244);
}

.dragable .white {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 40px;
  background-color: #FFF;
}

.dragable .white:first-child {
  margin-top: 0px;
  opacity: 0;
  transform: translate3d(0px, 0px, 0px) scale(2, 2);
  
}
.dragable:hover .white:first-child {
	animation: bounce 1s forwards ease;
}
.dragable .white:last-child {
  transform: translate3d(0px, 0px, 0px) scale(0.96, 0.96);
}

.controls {
  position: relative;
  min-height: 80px;
}

.arrow {
  position: relative;
  transform-origin: 0px 0px 0px;
  transform: matrix(0.7071, -0.7071, 0.7071, 0.7071, 38, 45);
}

.arrow .arrow-side {
  position: absolute;
  display: inline-block;
  height: 2px;
  width: 10px;
  background: #000;
  transition: width 600ms ease;
}

.arrow-down {
  top: 30px;
}

.arrow-tail {
  position: absolute;
  width: 2px;
	top: 15px;
  background: #000;
  /* transform-origin: 0px 0px 0px; */
  /* transform: matrix(1, 0, 0, 1, 38, 0); */
}

.controls .arrow-tail {
  transform: matrix(1, 0, 0, 1, 38.5, 30);
	transform-origin: 0px 0px 0px;
  transition: 600ms;	
	height: 0;
 /*  visibility: hidden;
  opacity: 0; */
}

.controls:hover .arrow-tail {	
  transform: matrix(1, 0, 0, 1, 38.5, 0);
	height: 30px;
}

.arrow .arrow-side:last-child {
  transform-origin: 0px 0px 0px;
  transform: matrix(0, -1, 1, 0, 0, 2);
}

@keyframes bounce {
  0% {
    opacity: 0.5;
    transform: translate3d(0px, 0px, 0px) scale(1, 1);
  }
  50% {
    opacity: 0.25;
		transform: matrix(1.5 0 0 1.5 0 0 );
  }
  100% {
    opacity: 0;
		transform: matrix(2 0 0 2 0 0 );
  }
}