JSFiddle - React, Tailwind, and code Playground
by brendanbond
HTML
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
</head>
<body>
<div id='formio'></div>
<script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
<script type='text/javascript'>
window.onload = function() {
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
},
{
"html": "<figure class=\"media\"><div data-oembed-url=\"https://www.youtube.com/watch?v=GORDdHGlb-M\"><div style=\"position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;\"><iframe src=\"https://www.youtube.com/embed/GORDdHGlb-M\" style=\"position: absolute; width: 100%; height: 100%; top: 0; left: 0;\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen=\"\"></iframe></div></div></figure>",
"label": "Content",
"refreshOnChange": false,
"key": "content",
"type": "content",
"dataGridLabel": false,
"input": false
},
{
type: 'button',
action: 'submit',
label: 'Submit',
theme: 'primary'
}
]
}, {
sanitizeConfig: {
allowedAttrs: ['ref', 'src', 'url', 'data-oembed-url'],
allowedTags: ['iframe',...