JSFiddle - React, Tailwind, and code Playground

by IPWright83

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>MooD 16</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
	<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/16.1.7/css/dx.common.css" type="text/css" />
	<link rel="stylesheet" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/16.1.7/css/dx.android5.light.css"
	/>
	<script src="https://cdn3.devexpress.com/jslib/16.1.7/js/dx.all.js"></script>

	<style>
		/* Replicate canvas */
		
		#canvas {
			height: 829px;
			width: 1171px;
			margin: auto;
			border: 1px solid grey;
			-webkit-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.37);
			-moz-box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.37);
			box-shadow: 3px 2px 5px 0px rgba(0, 0, 0, 0.37);
		}
		
		#banner {
			width: 100%;
			height: 200px;
			background-color: #00bcd4;
            top: -27px; 
            position: relative;
		}
		
		#form {
			margin-top: 25px;
			padding: 25px;
		}
		
		h1 {
			color: #fff;
			font-family: arial;
			font-size: 40px;
			font-weight: 400;
            padding-top: 100px;
            padding-left: 100px;
		}
		
		.dx-texteditor {
			width: 300px;
			margin-bottom: 25px;
		}
		
		.dx-validationsummary {
			margin-top: 25px;
			margin-bottom: 25px;
		}
	</style>

	<script type="text/javascript">

        $(document).ready(function() {

            $("#title").dxSelectBox({placeholder: 'Title', items: ['Mr', 'Mrs', 'Miss', 'Dr']}).dxValidator({ validationRules: [{ type: "required", message: "Title is required" }] });
            $("#firstname").dxTextBox({ placeholder: 'First Name', maxLength: 10 }).dxValidator({ validationRules: [{ type: "required", message: "First Name is required" }] });
    ...