JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="sq-box"><span class="top"></span><span class="main">clock</span><span class="side"></span></div>
    
<div class="sq-box"><span class="top"></span><span class="main">clock2</span><span class="side"></span></div>
    
<div class="sq-box"><span class="top"></span><span class="main">clock3</span><span class="side"></span></div>

CSS

.sq-box { width:auto; height:auto; margin:2px; float:left; background-color:#fff; -webkit-transition: 0.3s ease-in-out; }

.sq-box .main{width:96px;height:96px;line-height:96px;display:block;text-align:center;background-color:#DDDDDD;float:left;-webkit-transition: 0.3s ease-in-out;}

.sq-box .top { width:96px;height:15px;background-color:#acacac;-webkit-transform: skewX(-45deg);display:block;margin-left:7px;-webkit-transition: 0.3s ease-in-out;}

.sq-box .side{width:15px;height:80px;display:block;background-color:#959595;float:right;-webkit-transform: scale(1, 1.22) skewy(-40deg); -webkit-transition: 0.3s ease-in-out;}

.sq-box .main:hover, .sq-box .top:hover,.sq-box .side:hover { background-color:#ffa;}