JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<pre></pre>

JavaScript

const structure = [
  {
    Parameter: "amount",
    Type: "Number",
    Value: 0,
    Default: 0,
    Repeatable: false,
    Conditions: null,
    Name: "Auflage",
    Help: "Bitte geben Sie die Auflage für das Projekt an. ",
  },
  {
    Parameter: "parts",
    Type: "Dictionary",
    Value: null,
    Default: null,
    Repeatable: true,
    Conditions: null,
    Name: "Bestandteile",
  },
  {
    Parameter: "parts.name",
    Type: "Text",
    Value: "Umschlag",
    Default: "Teil 1",
    Repeatable: false,
    Conditions: null,
    Name: "Name",
    Help: "Bitte geben Sie an, welche Teil zu bewerten wollen. z.B. Umschlag",
  },
  {
    Parameter: "parts.height",
    Type: "Number",
    Value: 0,
    Default: 0,
    Repeatable: false,
    Conditions: null,
    Name: "Höhe [mm]",
    Help: "Bitte geben Sie die Höhe  in [mm] an.",
  },
  {
    Parameter: "parts.width",
    Type: "Number",
    Value: 0,
    Default: 0,
    Repeatable: false,
    Conditions: null,
    Name: "Breite [mm]",
    Help: "Bitte geben Sie die Breite  in [mm] an.",
  },
  {
    Parameter: "parts.pages",
    Type: "Number",
    Value: 0,
    Default: 0,
    Repeatable: false,
    Conditions: null,
    Name: "Anzahl Seiten",
    Help: "Bitte geben Sie die Seitenzahl an, bitte beachten Sie, dass ein Blatt 2 Seiten hat.",
  },
  {
    Parameter: "parts.material",
    Type: "Database",
    Value: 0,
    Default: 0,
    Repeatable: false,
    Conditions: null,
    Name: "Material",
    Help: "Bitte wählen Sie den Bedruckstoff.",
  },
  {
    Parameter: "parts.grammage",
    Type: "Number",
    Value: 0,
    Default: 0,
    Repeatable: false,
    Conditions: null,
    Name: "Grammatur [g/m2]",
    Help: "Bitte geben Sie die Grammatur  in [g/m2] an.",
  },
  {
    Parameter: "parts.printing_process",
    Type: "Database",
    Value: 0,
    Default: 0,
    Repeatable: false,
    Conditions: null,
    Name: "Druckverfahren",
    Help: "Bitte wählen Sie das Druckverfahren.",
  },
  {
    Parameter:...