JSFiddle - React, Tailwind, and code Playground

by Anahit Ghazaryan

HTML

<div class="peel-banner-wrap"><div class="peel-banner-wrapper"> <a href="https://www.platinumcryptoacademy.com/cryptonaire-weekly/?utm_source=MBCS&amp;utm_medium=CW&amp;utm_campaign=Social" target="_blank"> <img src="https://maltablockchainsummit.com/wp-content/themes/maltablockchain/images/cryptonaire-peel-thumb.jpg"> </a> <a href="https://www.platinumcryptoacademy.com/cryptonaire-weekly/?utm_source=MBCS&amp;utm_medium=CW&amp;utm_campaign=Social" target="_blank"> <img src="https://maltablockchainsummit.com/wp-content/themes/maltablockchain/images/peel-bg-new.png"> </a></div></div>

CSS

.peel-banner-wrap{
    position: absolute;
    top:0;
    right:0;
    width:400px;
    height:340px;
    z-index: 14;
    transition: .5s;
}
.peel-banner-wrapper{
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}
.page-id-80436 .peel-banner-wrap{
    display:block;
}
.peel-banner-wrapper a{
    overflow: hidden;
    position: absolute;
    transform: skewX(55.98deg);
}
.peel-banner-wrapper a:first-child {
    left: -.25em;
    transform-origin: 100% 0;
}
.peel-banner-wrapper a {
    transition: .5s;
}
.peel-banner-wrapper a img {
    transform: skewX(-55.98deg);
    transform-origin: inherit;
}
.peel-banner-wrapper a:first-child:after {
    top: 0;
    left: 0;
}
.peel-banner-wrapper a:last-child {
    right: 0;
    top: -127px;
    transform: rotate(-12deg);
}
.peel-banner-wrapper a:last-child img{
    transform: none;
    margin-top: 15px;
}