JSFiddle - React, Tailwind, and code Playground

by lforms

HTML

<body>
  <link href="https://lhcforms-static.nlm.nih.gov/lforms-versions/34.0.0/webcomponent/styles.css" media="screen" rel="stylesheet" />
  <div id="formContainer">
  </div>
  <script
   src="https://lhcforms-static.nlm.nih.gov/lforms-versions/34.0.0/webcomponent/assets/lib/zone.min.js"></script>
  <script
   src="https://lhcforms-static.nlm.nih.gov/lforms-versions/34.0.0/webcomponent/lhc-forms.js"></script> 
  <script
   src="https://lhcforms-static.nlm.nih.gov/lforms-versions/34.0.0/fhir/R4/lformsFHIR.min.js"></script>
</body>

CSS

body {
  padding: 0.5em;
}

JavaScript

// This is the form definition
var formDef = {
  "status": "draft",
  "title": "Demo form",
  "resourceType": "Questionnaire",

  "item": [
    {
      "type": "group",
      "linkId": "/X123",
      "text": "Family member",
      "item": [
        {
          "type": "string",
          "linkId": "/X123/X124",
          "text": "Name"
        },
        {
          "type": "group",
          "code": [
            {
              "code": "X125",
              "display": "Surgical History"
            }
          ],
          "extension": [
            {
              "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl",
              "valueCodeableConcept": {
                "coding": [
                  {
                    "system": "http://hl7.org/fhir/questionnaire-item-control",
                    "code": "gtable",
                    "display": "Group Table"
                  }
                ],
                "text": "Group Table"
              }
            }
          ],
          "repeats": true,
          "linkId": "/X123/X125",
          "text": "Surgical History",
          "item": [
            {
              "type": "date",
              "linkId": "/X123/X125/X126",
              "text": "Date"
            },
            {
              "type": "string",
              "linkId": "/X123/X125/X127",
              "text": "Surgery type"
            }
          ]
        }
      ]
    }
  ]
};
LForms.Util.addFormToPage(formDef, 'formContainer');