JSFiddle - React, Tailwind, and code Playground

by dtkav

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rocket League Match Data</title>
</head>
<body>

<h2>Match Details</h2>

<table border="1" style="width:100%; border-collapse:collapse; text-align:center;">
    <thead>
        <tr>
            <th colspan="3" style="background-color:#add8e6;">TEAM ENVY (Blue)</th>
            <th>Score</th>
            <th colspan="3" style="background-color:#ffa07a;">SSG (Orange)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name</td>
            <td>Rank</td>
            <td>Goals</td>
            <td rowspan="4" style="font-size:24px; vertical-align:middle;">1 - 2</td>
            <td>Name</td>
            <td>Rank</td>
            <td>Goals</td>
        </tr>
        <tr>
            <td>mist</td>
            <td>526</td>
            <td>?</td>
            <td>Sypical</td>
            <td>708</td>
            <td>?</td>
        </tr>
        <tr>
            <td>Atomic</td>
            <td>238</td>
            <td>?</td>
            <td>Arsenal</td>
            <td>395</td>
            <td>?</td>
        </tr>
        <tr>
            <td>TURBOPOLSA</td>
            <td>226</td>
            <td>?</td>
            <td>retals</td>
            <td>301</td>
            <td>?</td>
        </tr>
    </tbody>
</table>

<p><strong>Note:</strong> The '?' under 'Goals' is because the data provided doesn't specify individual goals scored by each player. Replace it with the actual data if available.</p>

</body>
</html>