JSFiddle - React, Tailwind, and code Playground

by vovkasolovev

HTML

<div class="billboard-container">
<img class="billboard transform" src="http://podhod.ru/images/chgsport-2020-10/chgsport-2020-10-banner.png">
<img class="billboard" src="http://podhod.ru/images/chgsport-2020-10/chgsport-2020-10-banner.png">
</div>

CSS

.billboard-container{  height: 1000px; perspective: 1000px; perspective-origin: 50% 0%;}
.billboard {position:relative; display: block; z-index:0; margin-left: auto;  margin-right: auto; margin-top: 5%;  width: 80%;
  max-width: 750px;
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 3px 1px 4px rgb(0 0 0 / 30%);
  transform-origin: bottom center;
transform-style: preserve-3d; 
transform: perspective(1000px) rotateY(-20deg) translate3d(-5%,0,0);
 transform-perspective:(1000px) rotateY(-20deg) translate3d(-10%,0,0);
/*  transform:  scale(.5) translate(0px,20px) rotateX(1deg) rotateY(-3deg) skewY(-1.75deg); */
/* transform: translate(-7%,15%) perspective(1000px) rotateY(-20deg);*/

/*transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(-20deg) rotateZ(0deg) skew(0deg, 0deg) perspective(1000px);*/
}

.billboard::before{
  position:absolute;
  display: block
  opacity: 0.3;
  content:"123";
  z-index:1;
  width:100%;
  height:100%;
  background:rgb(0 0 0 / 100%);
  box-shadow: 0px 0px 5px 5px rgb(0 0 0 / 100%);
  transform:  translate(0,100%) perspective(1000px) rotateX(80deg);
  perspective-origin: 00% 100%;
   }
 .billboard::after{  
     content: "\2191";
    position: absolute;
    top:50%;
    right:-8px;
    background-color: #ea1f41;
    width:35px;
    height: 35px;
    border:2px solid #ffffff;
    border-radius: 5px;
    color: #ffffff;
    z-index: 10000;
    transform: rotate(50deg) translateY(-50%);
    }