JSFiddle - React, Tailwind, and code Playground
HTML
<div class="card_container">
<div class="card">
<div class="column">
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
</div>
<div class="column">
<div class="cell">2</div>
<div class="cell">2</div>
<div class="cell">2</div>
<div class="cell">2</div>
<div class="cell">2</div>
</div>
<div class="column">
<div class="cell">3</div>
<div class="cell">3</div>
<div class="cell">3</div>
<div class="cell">3</div>
<div class="cell">3</div>
</div>
<div class="column">
<div class="cell">4</div>
<div class="cell">4</div>
<div class="cell">4</div>
<div class="cell">4</div>
<div class="cell">4</div>
</div>
<div class="column">
<div class="cell">5</div>
<div class="cell">5</div>
<div class="cell">5</div>
<div class="cell">5</div>
<div class="cell">5</div>
</div>
</div>
<div class="card">
<div class="column">
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
<div class="cell">1</div>
</div>
<div class="column">
<div class="cell">2</div>
<div class="cell">2</div>
<div class="cell">2</div>
<div class="cell">2</div>
<div class="cell">2</div>
</div>
<div class="column">
<div class="cell">3</div>
<div class="cell">3</div>
<div class="cell">3</div>
<div class="cell">3</div>
<div class="cell">3</div>
</div>
<div class="column">
<div class="cell">4</div>
<div class="cell">4</div>
<div class="cell">4</div>
<div class="cell">4</div>
<div class="cell">4</div>
</div>
<div class="column">
<div class="cell">5</div>
<div class="cell">5</div>
<div class="cell">5</div>
<div class="cell">5</div>
<div...
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.config > div {
margin: 10px 0;
}
.config > button {
width: 50%;
}
.config {
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input {
display: block;
width: 100%;
height: 35px;
outline: none;
border: 1px solid black;
/* padding: 16px; */
text-align: center;
font-size: 15px;
}
.card_container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
margin: 50px 0;
}
.column {
width: 20%;
}
span {
display: block;
}
.card {
display: flex;
flex-wrap: wrap;
width: 30%;
height: inherit;
position: relative;
}
button {
display: block;
margin: 10px auto;
width: 10%;
border: none;
outline: none;
background-color: #6245ff;
padding: 10px 0;
border-radius: 10px;
color: #fff;
cursor: pointer;
}
.cell {
height: 50px;
border: 1px solid #2027f1;
margin: 2px;
display: flex;
align-items: center;
justify-content: center;
background-color: #20eaff;
border-radius: 15px;
}
.ball {
width: 35px;
display: inline-block;
border: 2px solid #2027f1;
text-align: center;
margin: 6px;
border-radius: 10px;
background-color: #20eaff;
}
.flip {
background-color: #00ff7b;
}
.remove,
.start-game,
.stop {
display: none;
}
.game-stats {
width: 100%;
display: none;
justify-content: space-around;
}
.balls-container,
.winners-container {
text-align: center;
width: 30%;
border: 1px solid;
}
JavaScript
var array = [];
var columns = document.querySelectorAll('.column');
columns.forEach(function(column, y){
var cells = column.querySelectorAll('.cell');
cells.forEach(function(cell, x){
array[x] = array[x] || [];
array[x][y] = cell;
});
});
console.log(array);
/*
[
["1", "2", "3", "4", "5", "1", "2", "3", "4", "5"],
["1", "2", "3", "4", "5", "1", "2", "3", "4", "5"],
["1", "2", "3", "4", "5", "1", "2", "3", "4", "5"],
["1", "2", "3", "4", "5", "1", "2", "3", "4", "5"],
["1", "2", "3", "4", "5", "1", "2", "3", "4", "5"],
]
*/