CSS mock of cards https://jsfiddle.net/b7e5cjxL/

card.css

body {
  background-color:#423b41;
}

.wrap {
  display: flex;
}

.solo {
    border: solid 4px #ebfff9;
    background-color: #e6a8dc;
}

.solo-shadow {
    border: solid 4px #bd93b7;
    background-color: #bd93b7;
}

.duo {
    border: solid 4px #fff9e3;
    background-color: #7dffd4;
}

.duo-shadow {
    border: solid 4px #5ebf9f;
    background-color: #5ebf9f;
}

.squad {
    border: solid 4px #ebfff9;
    background-color: #f2a01b;
}

.squad-shadow {
    border: solid 4px #bf7e15;
    background-color: #bf7e15;
}

.card {
  position: relative;
   width: 150px;
   height: 250px;
   margin: 20px;
}

.card-content {
  position: absolute;

  width: 150px;
  height: 250px;
  border-radius: 12px;
  z-index: 2;
  
  /* just text related */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;  
}

.card-shadow {
  position: absolute;
  top: 12px;

  width: 150px;
  height: 250px;
  border-radius: 12px;
  z-index: 1;
}

card.html

<div class='wrap'>
	<div class='card'>
		<div class='solo card-content'>
			SOLO
		</div>
		<div class='solo-shadow card-shadow'></div>
	</div>

	<br />

	<div class='card'>
		<div class='duo card-content'>
			DUO
		</div>
		<div class='duo-shadow card-shadow'></div>
	</div>

	<div class='card'>
		<div class='squad card-content'>
			SQUAD
		</div>
		<div class='squad-shadow card-shadow'></div>
	</div>
</div>