JSFiddle - React, Tailwind, and code Playground

by Steven Atkinson

HTML

<div class="cards">
  <div class="card diamond">
   5 of Diamonds  
  </div>
    <div class="card club">
   5 of Clubs  
  </div>
</div>

SCSS

/* Colors */
$text-color: white;
$border-color: black;
$border-size: 3px;

$card-color-1: red;
$card-color-2: black;

.cards {
  
   color: $text-color;

  .card {
     width: 200px;
     height: 200px;
     margin: 5px;
     border: $border-size solid $border-color;    
  }
  
  .diamond, .heart {
     background-color: $card-color-1;
  }

  .club, .spade {
   width: 200px;
     background-color: $card-color-2;
  }

  &:hover {
    color: darken($text-color, 20%);
  }
}