JSFiddle - React, Tailwind, and code Playground

by akogch

HTML

<div class="container">
  <div class="card">
    <div class="card__top-side"></div>
    <h4>Lorem ipsum dolor sit amet</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur tempore
      quam ducimus architecto, culpa perferendis, perspiciatis, in nulla ea
      quidem ipsam praesentium, dolores error accusantium dolorem eos dicta enim
      consequuntur.
    </p>
  </div>
</div>

CSS

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

p {
  margin: 0;
}

h4 {
  margin: 2rem 0 1rem;
}

.card {
  position: relative;
  width: 50%;
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
}

.card__top-side {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  clip-path: polygon(-100% 83.333%, -100% -100%, 200% -100%, 200% 83.333%);
}

.card__top-side:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  transform: skewY(-5deg);
  transform-origin: 100% 0 0;
  background-color: rgba(255, 0, 0, 0.5);
  /* background-color: white; */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.card:after {
  content: '';
  position: absolute;
  left: 0;
  z-index: -1;
  width: 100%;
  top: 40%;
  bottom: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background-color: rgba(0, 255, 0, 0.5);
  /* background-color: white; */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  clip-path: polygon(-100% 200%, -100% 16.6666%, 200% 16.6666%, 200% 200%);
}