JSFiddle - React, Tailwind, and code Playground

by Ali Uygur

HTML

<div class="skew">
    <p>KUTU 1</p>
</div>
<div class="skew1">
    <p>KUTU 2</p>
</div>

CSS

p {
    text-align:center;
    margin-top:90px;
}
.skew {
    width:200px;
    height:200px;
    border:1px solid #000;
    background-color:grey;
    float: left;
    display:block;
    margin:30px;
}
.skew1 {
    width:200px;
    height:200px;
    border:1px solid #000;
    background-color:grey;
    float: left;
    display:block;
    margin:30px;
}
.skew:hover {
    -webkit-transform: skew(-20deg, 20deg);
    -ms-transform: skew(-20deg, 20deg);
    transform: skew(-20deg, 20deg);
}
.skew1:hover {
    -webkit-transform: skew(40deg, -40deg);
    -ms-transform: skew(40deg, -40deg);
    transform: skew(40deg, -40deg);
}