JSFiddle - React, Tailwind, and code Playground

by dannycabrera

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-versvions/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 (as s FHIR Questionnaire)
var formDef = {
  "status": "draft",
  "title": "Demo Form",
  "resourceType": "Questionnaire",
  "item": [
    {
      "type": "string",
      "linkId": "X-002",
      "text": "Eye color"
    }
  ]
}

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