JSFiddle - React, Tailwind, and code Playground

by Mukul kant

HTML

<div class="content content1">

    <div class="table"><div class="row-group"><div class="row header">
	                        	<div class="cell"><p>
									18:00:00</p>
								</div>
								<div class="cell"></div>
								<div class="cell right"><p>
									A</p>
								</div>
							</div><div class="row">
								<div class="cell team"><p>
									Team 1</p>
								</div>
								<div class="cell center"><p>
									:</p>
								</div>
								<div class="cell right team"><p>
									Team 2</p>
									</div>
								</div>
							</div><div class="row-group"><div class="row header">
								<div class="cell"><p>
									18:00:00</p>
								</div>
								<div class="cell"></div>
								<div class="cell right"><p>
									C</p>
								</div>
							</div><div class="row">
								<div class="cell team"><p>
									Team 3</p>
								</div>
								<div class="cell center"><p>
									:</p>
								</div>
								<div class="cell right team"><p>
									Team 4</p>
									</div>
								</div>
							</div><div class="row-group"><div class="row header">
								<div class="cell"><p>
									18:14:00</p>
								</div>
								<div class="cell"></div>
								<div class="cell right"><p>
									A</p>
								</div>
							</div><div class="row">
								<div class="cell team"><p>
									Team 5</p>
								</div>
								<div class="cell center"><p>
									:</p>
								</div>
								<div class="cell right team"><p>
									Team 6</p>
									</div>
								</div>
							</div>
		</div>
</div>

CSS

*{margin:0;padding:0}
.table {
	font-size: 18px;
	border-spacing: 0 10px;
	display: table;
	width: 100%;
    border-collapse:collapse;
}

.row-group {
	display: table;
	width: 100%;
	/*border: 10px solid black;*/
	margin: 10px 0
}

.row {
	display: table-row;
}

.cell {
	display: table-cell;
	width: 35%;
}

.right {
	text-align: right;
}

.center {
	text-align: center;
}

div.header {
	background-color: rgba(200,255,100,.9);
	background-color: yellow;
	font-weight: bold;
}

.team {
	background-color: gray;
}

.cell>p{
	margin: 10px;
}