JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="cardbox type01">type01</div>
<div class="cardbox type02">type02</div>

SCSS

.cardbox {
  min-height: 400px;
  margin: 30px;
  border-radius: 20px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='xMidYMin slice' viewBox='0 0 280 674' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 2C0 0.895431 0.895426 0 2 0H278C279.105 0 280 0.895431 280 2V85.4735C280 86.4504 279.287 87.2669 278.356 87.5633C273.51 89.1059 270 93.643 270 99C270 104.357 273.51 108.894 278.356 110.437C279.287 110.733 280 111.55 280 112.527V672C280 673.105 279.105 674 278 674H2C0.895431 674 0 673.105 0 672V112.526C0 111.55 0.713136 110.733 1.64397 110.437C6.48978 108.894 10 104.357 10 99C10 93.643 6.48978 89.1059 1.64398 87.5633C0.713136 87.2669 0 86.4504 0 85.4735V2Z' fill='%23D9D9D9'/%3E%3C/svg%3E");
  -webkit-mask-size: 100%;
  background-color: #8cffa0;
  &.type01 {
    background-image: linear-gradient(307.13deg, #7A2ECD 3.56%, #A42ECD 98.86%);
  }
  &.type02 {
    background-image: linear-gradient(126.45deg, #FE6503 0%, #FE8B03 98.25%);
  }
}