JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="de">

    <head>
        <meta charset="utf-8">
        <title>Das Merkspiel</title>
        <link rel="stylesheet" type="text/css" href="scr\style.css">
    </head>

    <body>

        <div class="obereDivs" id="ueberschrift">
            <h1>Das Merkspiel</h1>
        </div>

        <div id="flex-container">
            <div class="obereDivs" id="einstellungen">
                <h2>Einstellungen</h2> 
                <fieldset>
                    <p>Mit wie vielen Flächen soll gespielt werden: </p>
                    <input type="radio" id="Anzahl_03" name="anzahlDerKreise" value="3" checked>
                    <label for="Anzahl_03"> 3</label> 
                    <input type="radio" id="Anzahl_04" name="anzahlDerKreise" value="4">
                    <label for="Anzahl_04"> 4</label>
                    <input type="radio" id="Anzahl_05" name="anzahlDerKreise" value="5">
                    <label for="Anzahl_05"> 5</label> 
                    <input type="radio" id="Anzahl_06" name="anzahlDerKreise" value="6">
                    <label for="Anzahl_06"> 6</label> 
                    <input type="radio" id="Anzahl_07" name="anzahlDerKreise" value="7">
                    <label for="Anzahl_07"> 7</label>
                    <input type="radio" id="Anzahl_08" name="anzahlDerKreise" value="8">
                    <label for="Anzahl_08"> 8</label> 
                    <input type="radio" id="Anzahl_09" name="anzahlDerKreise" value="9">
                    <label for="Anzahl_09"> 9</label> 
                    <input type="radio" id="Anzahl_10" name="anzahlDerKreise" value="10">
                    <label for="Anzahl_10"> 10</label>
                    <input type="radio" id="Anzahl_11" name="anzahlDerKreise" value="11">
                    <label for="Anzahl_11"> 11</label> 
                    <input type="radio" id="Anzahl_12" name="anzahlDerKreise" value="12">
                    <label for="Anzahl_12"> 12</label> 
         ...

CSS

h1 {
    text-align: center;
    font-size: 2rem;
}

h2 {
    text-align: center;
    margin: 0.5rem;
    font-size: 1.5rem;
}

#einstellungen {
    width: 45%;
    height: 200px;
    background-color:antiquewhite;
}

#punkte {
    width: 45%;
    height: 200px;
    background-color:  green;
    align-self: center;
}

#spielbereich {
    position: absolute;
    display: 80%;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    background-color:lightgoldenrodyellow;
}

#kreis_zum_anordnen {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: aliceblue;

}

#flex-container {
    display: flex;
    flex-direction: row;
    justify-content:space-between;
}

JavaScript

"use strict";

const spiel = {

    // Array für die Speicherung der Reihenfolge der Schaltflächen
    reihenfolge: [],

    position_vom_kleinen_Kreis: {x_position:0, y_position:0},      /* Kreiseposition */
    vorgemachte_objekte: [],                                       /* Vorgemachte Objekte */
    nachgemachte_objekte: [],                                      /* Nachgemachte Objekte */
    vormachen_oder_nachmachen: true,                               /* ob vormachen oder nachmachen */
    neues_objekt: false,
    spiel_ende: false,



    // Spielfläche aufbauen
    // ####################
    spiel_aufbauen()
    {
        this.kleine_flaechen_erzeugen_positionieren();

    },




    // Anzahl der Flächen ermitteln
    // ####################
    anzahl_der_flaechen(){

        // Ermitteln, mit wie vielen Flächen gespielt werdden soll
        let rdBtn = document.querySelectorAll("input[name='anzahlDerKreise']");
        for(var i=0; i < rdBtn.length; i++)
        {     
            if(rdBtn[i].checked == true)
            {
                return(rdBtn[i].value);
            }
        }
    },

    /* Funktion, um von Grad in Bogenmaß umrechnen
    #############################################*/
    degreeToRadians(degree){
        
        return degree * Math.PI / 180;  
    },

    // Position x,y vom kleinen Kreis berechnen
    // ########################################
    posCalculate(degree) {
        let smallDivRadius = 25;
        let circleToArrangeRadius = 200;
        var el = document.getElementById('spielbereich');
        var circleToArrangePos = el.getBoundingClientRect();

        /* Wenn der Winkel zwischen 0 und 90 Grad im Kreis liegen */
        if (degree>=0 && degree<=90) {
            
            /* Winkel für alpha berechnen */
            degree = 90 - degree;
            this.position_vom_kleinen_Kreis.x_position = (circleToArrangePos.left + circleToArrangeRadius - smallDivRadius) + Math.round(200 *...