JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<svg class="svg">
  <clipPath id="clip" clipPathUnits="objectBoundingBox">
    <path d="M0,0 v1 h0.729 c0.012,0,0.024,-0.012,0.028,-0.03 L1,0 H0"></path>
  </clipPath>
  <clipPath id="clipTablet" clipPathUnits="objectBoundingBox">
    <path d="M0,0 v1 h0.536 c0.021,0,0.041,-0.012,0.048,-0.03 L1,0 H0"></path>
  </clipPath>
  <clipPath id="clipMobile" clipPathUnits="objectBoundingBox">
    <path d="M1,0 v0.254 L0.549,0.97 c-0.011,0.018,-0.04,0.03,-0.071,0.03 H0 V0 H1"></path>
  </clipPath>
</svg>


<div class="carousel">
  <div class="blurred-background"></div>
  <div class="outer-clip"></div>
  <div class="inner-clip">

    <div class="carousel-content">
      <h1>Some title here</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit cum nesciunt quae quasi ducimus facere nobis neque similique quam distinctio exercitationem autem, atque iure eius numquam totam. Incidunt ab, sit.</p>
    </div>

  </div>


</div>

SCSS

* {
  box-sizing: border-box;
  font-family: Raleway;
}

svg {
  position: absolute;
  top:0;
  left:0;
  width:0;
  height:0;
}


.carousel {
  width: 100%;
  height: 100vh;
  background: #0e0727;
  color: #fff;
  overflow: hidden;
  
  .outer-clip,
  .inner-clip,
  .blurred-background,
  .carousel-content {
    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    
  }
  .inner-clip,
  .blurred-background {
    background-image: url("https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/v462-n-130-textureidea_1.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=9465282a2b0a375f4f5b120d7bbad882");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;
    background-size: cover;
  }
}

.carousel-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 0 100px;
  max-width: 500px;
}

.blurred-background {
  filter: blur(5px);
  z-index: 0;
  box-shadow: inset 0px -80px 0px 0px #0e0727;
}

.outer-clip, .inner-clip {
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip);
  background: #0e0727; 
  width: calc(100% - 125px)!important;

}

.inner-clip {
  margin-left: -3px;
  margin-top: -3px;
}


@media screen and (max-width: 1199px) {
  .outer-clip, .inner-clip {
    -webkit-clip-path: url(#clipTablet);
    clip-path: url(#clipTablet);
    width: calc(100% - 50px)!important;

  }
}

@media screen and (max-width: 767px) {
  .outer-clip, .inner-clip {
    -webkit-clip-path: url(#clipMobile);
    clip-path: url(#clipMobile);
    width: 100%!important;

  }
}