JSFiddle - React, Tailwind, and code Playground

by pphheerroonn

HTML

<div class="card card1"></div>
<div class="card card3"></div>
<div class="card card2"></div>

CSS

.card {
  width: 325px;
  border-radius: 10px;
  padding: 30px 20px 59px 20px;
  border: 0;
}

.card1 {
  background: linear-gradient(to bottom right, #FC56F6, #A356FD);
  box-shadow: 3px 15px 30px rgba(171, 86, 252, 0.75);
}

.card2 {
  background: linear-gradient(to bottom right, #56D0FD, #56FD7D);
  box-shadow: 3px 15px 30px rgba(86, 247, 142, 0.75);
}

.card3 {
  background: linear-gradient(to bottom right, #FDBD56, #FD56B6);
  box-shadow: 3px 15px 30px rgba(253, 99, 169, 0.75);
}