JSFiddle - React, Tailwind, and code Playground

by jackrugile

HTML

<img class="floatleft" src="http://deecies.com/images/phonetest.png">

CSS

.floatleft {
    float:left;
    width: 500px;
    height: 370px;
    -webkit-shape-outside: url(http://deecies.com/images/phonetest.png);
    -o-shape-outside: url(http://deecies.com/images/phonetest.png);
    shape-outside: url(http://deecies.com/images/phonetest.png);
    -webkit-shape-image-threshold: 0.5;
    -o-shape-image-threshold: 0.5;
    shape-image-threshold: 0.5;
    -webkit-shape-margin: 20px;
    -o-shape-margin: 20px;
    shape-margin: 20px;
    margin:20px;
    display:inline-block;
    -webkit-transition: 0.7s ease-in-out;
    -moz-transition: 0.7s ease-in-out;
    -ms-transition: 0.7s ease-in-out;
    -o-transition: 0.7s ease-in-out;
    transition: 0.7s ease-in-out;
    transition-timing-function: linear;
    }

.floatleft:hover, .floatleft:active
{
    -webkit-transform:rotateX(-13deg) rotate(-5deg);
    transform:rotateX(-13deg) rotate(-5deg);
    -o-transform:rotateX(-13deg) rotate(-5deg);
    -moz-transform:rotateX(-13deg) rotate(-5deg);
    -ms-transform:rotateX(-13deg) rotate(-5deg);
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}