JSFiddle - React, Tailwind, and code Playground

by Nonamenonamevi4

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Карты</title>
</head>
<body>
  <p class="firstcard">8, 9</p>
  <p class="secondcard">8, 9</p>
  <p class="thirdcard">7, 10, B</p>
  <p class="fourthcard">7, 8, 9</p>
</body>
</html>

CSS

body {
  margin: 5px;
}

.firstcard:before {
  content: "\2660";
  margin-right: 10px;
}

.secondcard:before {
  content: "\2663";
  margin-right: 10px;
}

.thirdcard:before {
  content: "\2666";
  margin-right: 10px;
  color: red;
}

.fourthcard:before {
  content: "\2665";
  margin-right: 10px;
  color: red;
}