JSFiddle - React, Tailwind, and code Playground

by James Butler

HTML

<div class="roundHex"></div>

CSS

.roundHex {
    position:relative;
    margin:0 auto;
    background:rgba(0, 0, 0, 0.2);
    border-radius:10px;
    height:300px;
    width:180px;
    transition:all 1s;
}
.roundHex:before, .roundHex:after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    background:inherit;
    border-radius:inherit;
    height:100%;
    width:100%;
    top:0;
    left:0;
}
.roundHex:before {
    -webkit-transform:rotate(60deg);
    -moz-transform:rotate(60deg);
    transform:rotate(60deg);
    transition:all 1s 0.5s;
}
.roundHex:after {
    -webkit-transform:rotate(-60deg);
    -moz-transform:rotate(-60deg);
    transform:rotate(-60deg);
    transition:all 1s 1s;
}
.roundHex:hover {
    background:tomato;
    
}