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>BBM Einstellparameter - Digital Form</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="header-content">
                <div class="logo-section">
                    <svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="70" height="70" rx="6" fill="#004080"/>
                        <text x="50%" y="50%" font-family="Open Sans, sans-serif" font-size="32" font-weight="700" fill="#FFFFFF" text-anchor="middle" dominant-baseline="middle">BBM</text>
                    </svg>
                </div>
                <div class="company-info">
                    <h1>BBM Maschinenbau</h1>
                    <div class="company-details">
                        <strong>BBM Maschinenbau und Vertriebs GmbH</strong><br>
                        Dieselstraße 4, 33449 Langenberg<br>
                        Tel: +49 (0) 52 48 82 38 – 0 | Fax: +49 (0) 52 48 82 38 – 295
                    </div>
                </div>
                <div class="form-controls">
                    <div class="form-group">
                        <label for="globalEmployee">Employee:</label>
                        <input type="text" id="globalEmployee" placeholder="Enter employee name" onchange="updateGlobalData()">
                    </div>
                    <div class="form-group">
     ...

CSS

/* Industrial Design Color Palette & Variables */
:root {
    --primary-color: #004080;
    --secondary-color: #4A5568;
    --tertiary-color: #E2E8F0;
    --success-color: #28A745;
    --danger-color: #DC3545;
    --info-color: #17A2B8;
    --background-light: #F7FAFC;
    --background-card: #FFFFFF;
    --background-section: #EDF2F7;
    --border-color: #CBD5E0;
    --text-color-dark: #2D3748;
    --header-text-color: #FFFFFF;
    --font-family: 'Open Sans', 'Roboto', 'Arial', sans-serif;
    --border-radius: 6px;
    --box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    --inset-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
    --transition-speed: 0.2s ease-in-out;
    --focus-glow: 0 0 0 2px rgba(0, 64, 128, 0.15);
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background: var(--background-light);
    margin: 0;
    padding: 10px; /* Reduced body padding */
    min-height: 100vh;
    color: var(--text-color-dark);
    line-height: 1.5; /* Slightly tighter line height */
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    background: var(--background-card);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.header {
    background: var(--primary-color);
    color: var(--header-text-color);
    padding: 12px 20px; /* Reduced header padding */
    border-bottom: 2px solid rgba(0,0,0,0.1); /* Thinner border */
}

.header-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px; /* Reduced gap */
    align-items: center;
}

.logo-section svg { /* Target the SVG directly */
    max-width: 60px; /* Adjusted size for SVG */
    height: 60px; /* Maintain aspect ratio */
    display: block;
    border-radius: var(--border-radius);
    background-color: rgba(255,255,255,0.1);
}

.company-info {
    font-size: 0.9em; /* Smaller font */
    line-height: 1.5;
}

.company-info h1 {
   ...

JavaScript

const LOCAL_STORAGE_KEY = 'bbmEinstellparameterData';
const GLOBAL_DATA_KEY = 'bbmGlobalData';
const COLLAPSE_STATE_KEY_PREFIX = 'bbmCollapseState_';

// Configuration for dynamic form fields
const FORM_CONFIG = {
    general: {
        title: 'General Information',
        subSections: [
            {
                title: 'Customer & Project Details',
                fields: [
                    { label: 'Customer:', id: 'customer', type: 'text', placeholder: 'Enter customer name', path: 'customerProject.customer' },
                    { label: 'Project No.:', id: 'projectNumber', type: 'text', placeholder: 'Enter project number', path: 'customerProject.projectNumber' },
                    { label: 'Order No.:', id: 'orderNumber', type: 'text', placeholder: 'Enter order number', path: 'customerProject.orderNumber' }
                ]
            },
            {
                title: 'Article & Machine Info',
                fields: [
                    { label: 'Article No.:', id: 'articleNumber', type: 'text', placeholder: 'Enter article number', path: 'articleMachine.articleNumber' },
                    { label: 'Drawing No.:', id: 'drawingNumber', type: 'text', placeholder: 'Enter drawing number', path: 'articleMachine.drawingNumber' },
                    { label: 'Machine Type:', id: 'machineType', type: 'text', placeholder: 'e.g., ENGEL, ARBURG', path: 'articleMachine.machineType' }
                ]
            },
            {
                title: 'Mold & Production Data',
                fields: [
                    { 
                        label: 'Mold & Cavities:', 
                        id: 'moldProduction', 
                        type: 'custom',
                        customRender: (entryIndex, data) => `
                            <div class="form-group full-width-group">
                                <label for="mold-${entryIndex}">Mold:</label>
                                <div>
       ...