JSFiddle - React, Tailwind, and code Playground

by Chris

HTML

<div class="container">
  <div class="cell cell-1">1.</div>
  <div class="cell cell-2">2.</div>
  <div class="cell cell-3">3.</div>
  <div class="cell cell-4">4.</div>
</div>

CSS

/* .court-side: {
  width: 500px;
  background: #3c5;
}; */.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two columns */
  gap: 10px; /* Gap between cells */
}

.cell {
  /* Add any styling you want for the cells */
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
}

.court-cell: {
  width: 200px;
}