JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Durchsatzmessung</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.16/jspdf.plugin.autotable.min.js"></script>
    <style>
        /* Your existing styles here */
        body { font-family: Arial, sans-serif; background-color: #f4f4f9; color: #333; margin: 20px; }
        /* Modal styles */
        .modal {
            display: none; /* Hidden by default */
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 400px;
            border-radius: 8px;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        .btn { padding: 5px 15px; cursor: pointer; border: none; border-radius: 40px; color: white; }
        /* New extruder info styles */
        .extruder-info { font-size: 0.9em; color: #555; margin-top: 5px; }
    </style>
</head>
<body>
    <h1>Durchsatzmessung</h1>

    <div id="controls">
        <button id="generateTables" class="btn" onclick="showModal()">Add Extruder</button>
        <!-- other controls remain unchanged -->
    </div>

    <div id="tablesContainer"></div>

    <!-- Modal for extruder information -->
    <div...