JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Izračun povračila članarine</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 8px;
            text-align: center;
        }
        th, td {
            width: 100px;
        }
    </style>
</head>
<body>
    <h1>Izračun povračila članarine</h1>
    <form id="calcForm">
        <label for="principal">Znesek glavnice (EUR):</label>
        <input type="number" id="principal" name="principal" value="1000" step="0.01" required><br><br>
        <label for="membershipFee">Znesek članarine (EUR):</label>
        <input type="number" id="membershipFee" name="membershipFee" value="150" step="0.01" required><br><br>
        <label for="doy">Število obračunavanih dni:</label>
        <input type="number" id="doy" name="doy" value="365" step="0.25" required><br><br>
        <button type="button" onclick="calculateReturn()">Izračunaj</button>
    </form>

    <h2>Rezultati</h2>
    <table id="resultTable">
        <thead>
            <tr>
                <th>% Obrestna mera</th>
                <th>5%</th>
                <th>4%</th>
                <th>3%</th>
                <th>2%</th>
                <th>1%</th>
                <th>0%</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Čas povračila (leta)</th>
                <td id="rate5"></td>
                <td id="rate4"></td>
                <td id="rate3"></td>
                <td id="rate2"></td>
                <td id="rate1"></td>
                <td id="rate0"></td>
            </tr>
        </tbody>
    </table>

    <script>
        function calculateReturn() {
            let principal =...