JSFiddle - React, Tailwind, and code Playground

by Brian Dukes

HTML

<body id="Body">
    <form id="Form">
        <div class="dnnForm">
            <fieldset>
                <div class="dnnFormItem">
                    <label for="single">Single</label>
                    <input type="text" id="single" value="Lorem ipsum"></div>
                <div class="dnnFormItem">
                    <label for="multi">Multi</label>
                    <textarea id="multi">Lorem ipsum sit dolor amet</textarea>
                </div>
            </fieldset>
        </div>
    </form>
</body>

CSS

/* 
 * Deprecated DNN CSS class names will remain available for some time
 * before being  permanently removed. Removal will occur according to
 * the  following process:
 *
 * 1. Removal will only occur with a major (x.y) release, never
 *    with a maintenance (x.y.z) release.
 * 2. Removal will not occur less than six months after the release
 *    when it was deprecated.
 * 3. Removal will not occur until after deprecation has been noted 
 *    in at least two major releases.
 *
 *                                              |        |Planned |
 *  Name                                        |Release |Removal |
 *----------------------------------------------+--------+--------+
 * Mod{NAME}C                                     5.6.2    6.2
 *   {NAME} = sanitized version of the DesktopModule Name 
 *   Used on <div> tag surrounding Module Content, inside container
 *----------------------------------------------+--------+--------+
 */
 
/* background color for the content part of the pages */
body{background-color:white;margin:0;font-family:Helvetica, Arial, sans-serif;font-size:12px;}
.ControlPanel, .PagingTable{width:100%;background-color:#fff;border:#036 1px solid;}
.SkinObject{font-weight:bold;font-size:8.5pt;text-decoration:none;}
a.SkinObject:link, a.SkinObject:visited, a.SkinObject:hover, a.SkinObject:active{text-decoration:none;}

/* styles for LANGUAGE skinobject */
.language-object {white-space:nowrap;overflow:visible;vertical-align:middle;margin:0;line-height:0.5;}
.language-object .Language {display:inline;float:left;margin:0 2px;text-align:center;vertical-align:middle;}
.language-object .Language img {border:2px solid transparent;}
.language-object .Language.selected img {border-color: #333;}

/* style for module titles */
.Head{font-size:20px;font-weight:normal;color:#333;}
/* style of item titles on edit and admin pages */
.SubHead{font-size:11px;font-weight:bold;}
/* module title style used instead of Head for compact rendering by QuickLinks...