JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style/style.css">
  <title>Base for Hangman, using SVG and JavaScript</title>
</head>
<body>

<table>
    <tbody>
        <tr id="letters">
            <td class="selectableButton">A</td>
            <td class="selectableButton">B</td>
            <td class="selectableButton">C</td>
            <td class="selectableButton">D</td>
            <td class="selectableButton">E</td>
            <td class="selectableButton">F</td>
            <td class="selectableButton">G</td>
            <td class="selectableButton">H</td>
            <td class="selectableButton">I</td>
            <td class="selectableButton">J</td>
            <td class="selectableButton">K</td>
            <td class="selectableButton">L</td>
            <td class="selectableButton">M</td>
            <td class="selectableButton">N</td>
            <td class="selectableButton">O</td>
            <td class="selectableButton">P</td>
            <td class="selectableButton">Q</td>
            <td class="selectableButton">R</td>
            <td class="selectableButton">S</td>
            <td class="selectableButton">T</td>
            <td class="selectableButton">U</td>
            <td class="selectableButton">V</td>
            <td class="selectableButton">W</td>
            <td class="selectableButton">X</td>
            <td class="selectableButton">Y</td>
            <td class="selectableButton">Z</td>
        </tr>
    </tbody>
  </table>

  <div id="guessedLetters">
  </div>
  <h1 id="status"> </h1>
  <h2 id="word">word</h2>

<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns="http://www.w3.org/2000/svg"
   width="400"
   height="500"
   id="hangman_svg">
  <defs
     id="defs4">
    <filter
       id="filter12239">
      <fegaussianblur
         id="feGaussianBlur12241"
         stddeviation="0.84166667" />
    </filter>
    <filter
       height="1.2177229"
      ...

CSS

body {
	
}

h1 {
	text-align: center;
	color: red;
}
h2 {
    text-align: center;
    color: blue;
}
.text {
	font-weight: bold;
}

.selectableButton {
    border-style: solid;
    text-align: center;
    width: 40px;
}

.selectableButton:hover {
    background-color: #acf;
    cursor: pointer;
}

#letters {
    background-color: #ccccac;
    font-family: Garamond;
    font-size: 20px;
    letter-spacing: 5px;
}

#guessedLetters {
	background-color: red;
	width: 350px;
	height: 30px;
	margin-left: 800px;
	margin-top: 100px;
	
}

.clicked {
	background-color: purple;
}

#hangman_svg {
	margin-left: 30px;
	margin-top: -200px;

}

JavaScript

window.Hangman = (function() {
    "use strict";

    var hangman = {


        "selectedWord": "",
        "hiddenWord": "",
        "guessedLetters": [],
        "wrongCount": 0,
        "character": "",
        "guessedLettersElement": document.getElementById("guessedLetters"),
        



        // Get all elements as their id
        "partAsElement": {
            "hill":     document.getElementById('hang_hill'),
            "gallow":   document.getElementById('hang_construction'),
            "body":     document.getElementById('hang_body'),
            "rightarm": document.getElementById('hang_rightarm'),
            "leftarm":  document.getElementById('hang_leftarm'),
            "rightleg": document.getElementById('hang_rightleg'),
            "leftleg":  document.getElementById('hang_leftleg'),
            "rope":     document.getElementById('hang_rope'),
            "head":     document.getElementById('hang_head')
        },

        // Create an array with all valid parts
        "validParts": [
            "hill",
            "gallow",
            "body",
            "rightarm",
            "leftarm",
            "rightleg",
            "leftleg",
            "rope",
            "head"
        ],

        //Lista med alla mina ord
        "words": [
        'bjorn', 
        'mathematics', 
        'equation', 
        'caterpillar', 
        'tv', 
        'tricks'
        ],

        //Funktion som gör att vi kan printa ut i konsollen vilka ord som är möjliga
        "wordList": function() {
            for(var i=0; i<this.words.length; i++) {
                console.log(this.words[i]);
        }
    },
        //Funktion som gör att vi kan tjuvkika i konsollen på vilket ord som är gömt
        "peek": function() {
            console.log(this.selectedWord);
        },
        /**
         * Check if part a valid part, writes error message to console if the part is invalid.
         *
         * @param string part Name of the part to check.
      ...