JSFiddle - React, Tailwind, and code Playground

by brendanbond

HTML

<link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
<div class="btn-group">
  <button type="button" class="btn btn-primary" onclick="setLanguage('sp')">Español</button>
  <button type="button" class="btn btn-primary" onclick="setLanguage('en')">English</button>
  <button type="button" class="btn btn-primary" onclick="setLanguage('ch')">中文</button>
</div>
<div id="formio"></div>

JavaScript

Formio.createForm(document.getElementById('formio'), {
  components: [
    {
      type: 'textfield',
      key: 'firstName',
      label: 'First Name',
      placeholder: 'Enter your first name',
      input: true
    },
    {
      type: 'textfield',
      key: 'lastName',
      label: 'Last Name',
      placeholder: 'Enter your last name',
      input: true
    },
    {
      type: 'survey',
      key: 'questions',
      label: 'Survey',
      values: [
        {
          label: 'Great',
          value: 'great'
        },
        {
          label: 'Good',
          value: 'good'
        },
        {
          label: 'Poor',
          value: 'poor'
        }
      ],
      questions: [
        {
          label: 'How would you rate the Form.io platform?',
          value: 'howWouldYouRateTheFormIoPlatform'
        },
        {
          label: 'How was Customer Support?',
          value: 'howWasCustomerSupport'
        },
        {
          label: 'Overall Experience?',
          value: 'overallExperience'
        }
      ]
    },
    {
  "label": "Date / Time",
  "tableView": false,
  "datePicker": {
    "disableWeekends": false,
    "disableWeekdays": false
  },
  "enableMinDateInput": false,
  "enableMaxDateInput": false,
  "key": "dateTime1",
  "type": "datetime",
  "input": true,
  "widget": {
    "type": "calendar",
    "displayInTimezone": "viewer",
    "locale": "en",
    "useLocaleSettings": false,
    "allowInput": true,
    "mode": "single",
    "enableTime": true,
    "noCalendar": false,
    "format": "yyyy-MM-dd hh:mm a",
    "hourIncrement": 1,
    "minuteIncrement": 1,
    "time_24hr": false,
    "minDate": null,
    "disableWeekends": false,
    "disableWeekdays": false,
    "maxDate": null
  }
},
    {
      type: 'button',
      action: 'submit',
      label: 'Submit',
      theme: 'primary'
    }
  ]
}, {
  language: 'sp',
  i18n: {
    sp: {
      'First Name': 'Nombre de pila',
      'Last Name': 'Apellido',
      'Enter your first...