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",
  "meta": {
    "profile": [
      "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire|2.7"
    ],
    "tag": [
      {
        "code": "lformsVersion: 29.2.1"
      }
    ]
  },
  "item": [
    {
      "type": "string",
      "code": [
        {
          "code": "X-002",
          "display": "Eye color"
        }
      ],
      "required": false,
      "linkId": "/X-002",
      "text": "Eye color",
      "item": [
        {
          "text": "Enter the closest match:  Blue, Green, or Brown",
          "type": "display",
          "linkId": "/X-002-help",
          "extension": [
            {
              "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl",
              "valueCodeableConcept": {
                "text": "Help-Button",
                "coding": [
                  {
                    "code": "help",
                    "display": "Help-Button",
                    "system": "http://hl7.org/fhir/questionnaire-item-control"
                  }
                ]
              }
            }
          ]
        }
      ]
    }
  ]
};

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