JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="favi.png">
    <link rel="stylesheet" href="index.css">
    <title>POLL</title>
</head>
<body>
    <p class="messi-text">IS THIS A GREAT WEBSITE?</p> <br>
    <input type="radio" name="option" id="option1" value="1">
    <label for="option1">YES</label><br>

    <input type="radio" name="option" id="option2" value="0">
    <label for="option2">NO</label><br>

    <p class="messi-text">WHAT IS YOUR NAME?</p> <br>
    <input type="text" name="namePerson" id="namePerson" placeholder="Your Name"><br>

    <button class="bttn" id="butonSubmit" onclick="addVote()">SUBMIT VOTE</button>
    
    <div class="divRestartButton">
        <button class="bttn" id="butonRestart" onclick="resetVotes()"><img class="refresh" src="refresh.png"></button>
        <p class="labelRestart">RESTART VOTE</p>
    </div>
    
    <div id="container"></div>
    
    <input type="checkbox" id="checkboxToggle" onchange="checkboxToggleVoters()"><label for="checkboxToggle">SHOW VOTERS</label>
    <table style="margin-top: 10px;" id="cornel"></table>
    <script src="index.js"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
	box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}
p{
    display: inline-block;
    margin: 0px;
}
.bttn{
    display: inline-block;
    margin-top: 10px;
    border: none;
    background-color: black;
    font-weight: 600;
    color: white;
    border-width: 2px;
    border-radius: 3px;
    padding: 5px 10px;
}
.bttn:hover{
    cursor: pointer;
}
.divRestartButton{
    display: inline-block;
}
.labelRestart{
    display: inline-block;
    opacity: 0%;
    transition: 100ms;
    user-select: none;
    color: white;
    background-color: lightgrey;
    padding: 2px 5px;
    border-radius: 2px;
}
#butonRestart:hover ~ .labelRestart{
    opacity: 100%;
}
#option2{
    margin-bottom: 13px;
}
input[type=radio] {
    accent-color: black;
}
input[type=text] {
    padding: 5px 10px;
    border: solid;
    border-width: 2px;
    border-radius: 5px;
}

input[type=text]:focus {
    outline: none;
}
.messi-text{
    font-weight: 600;
    margin-bottom: 10px;
}
.container{
    width: 500px;
}
.poll-attr{
    color: white;
    height: 25px;
    margin-top: 10px;
    background-color: black;
    vertical-align: bottom;
    padding-top: 3px;
    padding-left: 5px;
    border-radius: 4px;
    transition:300ms linear;
}
.refresh{
    height: 12px;
    padding-top: 2px;
    filter:invert();
}
#checkboxToggle{
    margin-top: 15px;
    accent-color: black;
    margin-right: 7px;
}

JavaScript

let allVotes;
let id = 0;
const savedVotes = JSON.parse(localStorage.getItem('allVotes'));
if (Array.isArray(savedVotes)){
    allVotes = savedVotes;
}
else{
    allVotes = [];
}

let container = document.getElementById('container');
container.classList.add('container'); 

let table = document.getElementById('cornel');
container.classList.add('cornel'); 

//habar n-am daca merge
renderPoll();
function saveVotes(){
    localStorage.setItem('allVotes', JSON.stringify(allVotes));
}
function resetVotes(){
    localStorage.clear();
    location.reload();
}

function addVote(){
    const rezult1 = document.getElementById('option1');
    const rezult2 = document.getElementById('option2');
    const namePerson = document.getElementById('namePerson');
    if (rezult1.checked){
        allVotes.push({
            option: rezult1.value,
            name: namePerson.value,
            id: id
        })
    } else if(rezult2.checked){
        allVotes.push({
            option: rezult2.value,
            name: namePerson.value,
            id: id
        })
    }
    id++;
    saveVotes();
    renderPoll();
    renderVoters();
}
function checkboxToggleVoters(){
    let checkbox = document.getElementById('checkboxToggle');
    if (checkbox.checked){
        table.style.display = 'block';
    }
    else{
        table.style.display = 'none';
    }
    renderVoters();
}
//calc procent pt voturi de YES, daca vreau sa aflu procentul de voturi pt NO fac 100-calcPerc(vote)
function calcPerc(){
    let counter = 0;
    let percentage = 0;
    allVotes.forEach(function (vote)
    {
        if(vote.option == 1){
            counter++;
        }
    });
    if (allVotes.length != 0)
    {
        percentage = (100*counter)/allVotes.length;
    }
    else {
        percentage = 50; //DE REFACUT???
    }
    return percentage;
}
function renderVoters(){
    table.innerHTML = ''
    let j = 1;
    allVotes.forEach(function(vote){
        let tableRow = document.createElement('tr');
       ...