JSFiddle - React, Tailwind, and code Playground

by lforms

HTML

<body>
  <link href="https://clinicaltables.nlm.nih.gov/lforms-versions/13.2.0/styles/lforms.min.css" media="screen" rel="stylesheet" />
  <div id="formContainer">
  </div>
  <script src="https://clinicaltables.nlm.nih.gov/lforms-versions/13.2.0/lforms.min.js"></script>
</body>

JavaScript

// This is the form definition
var formDef = {
  code: "X-001",
  name: "Demo form",
  templateOptions: {
    viewMode: 'lg',
  	formHeaderItems: [{
      question: "First name",
      displayControl:  {
        "colCSS":   [ // colCSS is buggy in 11.2.0; fix planned
           {"name":"width","value":"24%"},
           {"name":"min-width","value":"2em"}
         ]
      }
    },
    {
      question: "Last name",
      displayControl:  {
        "colCSS":   [
           {"name":"width","value":"76%"},
           {"name":"min-width","value":"6em"}
         ]
      }
    }],
    hideFormControls: true
  },
  items: [{
    "questionCode": "X-002",
    "question": "Eye color"
  }]
};

LForms.Util.addFormToPage(formDef, 'formContainer');