JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Checkers with Special Abilities</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            text-align: center;
            margin: 20px;
        }
        #abilitiesTable { 
            border-collapse: collapse; 
            margin: 0 auto 20px; 
        }
        #abilitiesTable th, 
        #abilitiesTable td { 
            border: 1px solid #ccc; 
            padding: 8px; 
        }
        #controls p { 
            margin: 5px 0; 
        }
        #undoButton {
            margin-bottom: 10px;
            padding: 8px 16px;
            font-size: 16px;
            cursor: pointer;
        }
        #checkersCanvas { 
            border: 1px solid #000; 
            cursor: pointer; 
            display: block; 
            margin: 0 auto; 
        }
        #errorLog { 
            color: red; 
            margin-top: 10px; 
            min-height: 1.2em;
        }
    </style>
</head>
<body>
    <h1>Checkers with Special Abilities</h1>
    <table id="abilitiesTable">
        <tr><th>Color</th><th>Ability</th></tr>
        <tr><td>Red</td><td>Teleport</td></tr>
        <tr><td>Blue</td><td>Double Jump</td></tr>
        <tr><td>Green</td><td>Shield</td></tr>
        <tr><td>Yellow</td><td>Regeneration (stub)</td></tr>
        <tr><td>Purple</td><td>Mirror Move (stub)</td></tr>
        <tr><td>Orange</td><td>Freeze (stub)</td></tr>
        <tr><td>Cyan</td><td>Bomb (stub)</td></tr>
        <tr><td>Magenta</td><td>Clone (stub)</td></tr>
        <tr><td>Lime</td><td>Speed Boost (stub)</td></tr>
        <tr><td>Teal</td><td>Swap (stub)</td></tr>
    </table>

    <div id="controls">
        <p id="currentTurn">Current Turn: </p>
        <p id="timer">Elapsed Time: 0s</p>
        <p id="piecesCount">Player1: 12 | Player2: 12</p>
        <p id="scores">Player1 Score: 0 | Player2 Score: 0</p>
    </div>

    <button id="undoButton">Undo Move</button>
  ...