JSFiddle - React, Tailwind, and code Playground

by Pritam Bohra

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="icon" href="favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="style.css" />
		<title>Game</title>
	</head>
	<body>
		<div class="container">
			<div class="board"></div>

			<section class="side-bar">
				<div class="opponents">
					<div class="player">Player 1</div>
					<div class="player">Player 2</div>
					<div class="player">You</div>
				</div>

				<div class="card__dump"></div>
				<div class="coins"></div>

				<div class="player__cards">
					<img class="player__card" src="./png/1x/back-0062ff.png" alt="" />
					<img class="player__card" src="./png/1x/back-0062ff.png" alt="" />
					<img class="player__card" src="./png/1x/back-0062ff.png" alt="" />
					<img class="player__card" src="./png/1x/back-0062ff.png" alt="" />
					<img class="player__card" src="./png/1x/back-0062ff.png" alt="" />
					<img class="player__card" src="./png/1x/back-0062ff.png" alt="" />
				</div>
			</section>
		</div>

		<script src="script.js"></script>
	</body>
</html>

CSS

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

html {
  font-size: 62.5%;
  height: 100vh;
  width: 100vw;
}

body {
  height: 100%;
  width: 100%;
}

.container {
  display: grid;
  grid-template-columns: 75% calc(25% - 2rem);
  grid-gap: 2rem;
  height: 100%;
  width: 100%;
}

.board {
  grid-row: 1 / -1;
  grid-column: 1 / 2;
  padding: 2rem 6rem;

  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: auto;
  background-color: #eee;
}

.side-bar {
  grid-row: 1 / -1;
  grid-column: 2 / -1;

  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-gap: 1rem;
}

.opponents {
  grid-row: 1 / 2;
  background-color: #888;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card__dump {
  grid-row: 2 / 3;
  background-color: #ddd;
}

.coins {
  grid-row: 5 / -1;
  background-color: goldenrod;
}

.player__cards {
  grid-row: 3 / 5;

  padding: 2rem 4rem;
  border: 1px solid red;
  background-color: #444;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}

.player__card {
  width: 80px;
  height: 125px;
  border: 1px solid red;
}

.board__card {
  border: 1px solid #000;
  /* max-height: 100%; */
  max-width: 100%;
  object-fit: contain;
  /* width: 100%;
  height: 70px;
  width: 100%;
  height: 100%; */
  /* object-fit: cover; */
  /* overflow: none; */
}

JavaScript

const board = document.querySelector('.board');

for (let i = 0; i <= 99; i++) {
	const fig = document.createElement('figure');
	const card = document.createElement('img');
	card.className = 'board__card';
	// card.src = './png/2_of_clubs.png';
	fig.appendChild(card);
	board.appendChild(fig);
}