JSFiddle - React, Tailwind, and code Playground

by João Vitor Scheuermann

HTML

<section class="teste">

  <div class="smartphone-carrousel">
    <div class="smartphone">
      <div class="image"></div>
    </div>
  </div>
 
</section>

CSS

*, *:before, *:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.teste {
  background: #cecece;
}

.smartphone-carrousel {
  margin: 0 auto;
  padding: 50px 0 0 0;
  background: #ffb5b5;
  width: 250px;
  height: 300px;
  overflow: hidden;
}

.smartphone-carrousel .smartphone {
  padding: 25px 0 70px 0;
  margin: 0 auto;
  background: blue;
  width: 170px;
  height: 300px;
  transform: rotate(15deg);
}

.smartphone-carrousel .smartphone .image {
  background: red;
  height: 100%;
  width: 100%;
}