JSFiddle - React, Tailwind, and code Playground

by lforms

HTML

<html>
<head>
  <link
    href="https://lhcforms-static.nlm.nih.gov/lforms-versions/36.8.0/webcomponent/styles.css"
    media="screen" rel="stylesheet" />
</head>
<body>
  <div id=formContainer></div>
  <script
   src="https://lhcforms-static.nlm.nih.gov/lforms-versions/36.8.0/webcomponent/assets/lib/zone.min.js"></script>
  <script
   src="https://lhcforms-static.nlm.nih.gov/lforms-versions/36.8.0/webcomponent/lhc-forms.js"></script> 
  <script
   src="https://lhcforms-static.nlm.nih.gov/lforms-versions/36.8.0/fhir/R4/lformsFHIR.min.js"></script>
  <script>
     // Define a FHIR Questionnaire
     var fhirQ = {
      "resourceType": "Questionnaire",
      "title": "Patient Information",
      "name": "Patient Information",
      "item": [
        {
          "type": "string",
          "required": false,
          "linkId": "name",
          "text": "Name"
        }
      ]
    };
    
    // Sample QuestionnaireResponse
    var qr = {
      "resourceType": "QuestionnaireResponse",
      "status": "completed",
      "authored": "2019-12-19T19:47:54.655Z",
      "item": [
        {
          "linkId": "name",
          "text": "Name",
          "answer": [
            {
              "valueString": "Abe"
            }
          ]
        }
      ]
    };
    
    
    // Add the form to the page with
    // the QuestionnaireResponse data loaded.
    LForms.Util.addFormToPage(fhirQ, formContainer,
      {questionnaireResponse: qr});

  </script>
</body>
</html>

CSS

body {
  padding: 0.5em;
}