JSFiddle - React, Tailwind, and code Playground

by Sam Westwood

HTML

<ul class="window">
    <li>
        <figure class="door">
            <img src="https://i.imgur.com/pB2s4fC.png" alt="">
        </figure>
    </li>
</ul>

CSS

* {
    list-style: none;

 
}
.door {
    width: 300px;
    height: 300px;
    margin: 0;
    position: relative;
 
    /* Safari and Chrome */
}
.door img {
    background-color: #E8585A;
    width: 100%;
    display: block;
    position: relative;
    transform-origin: 0 100%;

  
}

.door:hover img {
      transform-origin: 0 100%;
  
    -webkit-transform: rotate(-60deg);
    -webkit-transition: all 1s;
    background-color: #00a99d;

}