JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap" rel="stylesheet"> 

<div class="pola_contain">
<div class="pola_img">
<div class="pola_square">

</div>
</div>
<div class="pola_txt">Morgana</div>
</div>

CSS

* {box-sizing: border-box;}
body {margin:50px;font-family: 'Amatic SC', cursive;font-size:40px;}

.pola_contain {padding:5% 5% 0 5%;background-color:#ffffff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
border-radius:3px;
-ms-transform: rotate(0deg);
transform: rotate(0deg);transition: all 0.5s;}

.pola_img {width:100%;height:0;padding-bottom:100%;position:relative;background-color:#dddddd;}

.pola_square {position:absolute;top:0;left:0;bottom:0;right:0;}

.pola_txt {text-align:center;padding:4% 0;}

.pola_contain:hover {-ms-transform: rotate(-3deg);
  transform: rotate(-3deg);transition: all 0.5s;}