JSFiddle - React, Tailwind, and code Playground

by PhilQ

HTML

<div id="main">
				<h1 class="title">Module 1</h1><div class="content100 shadowbox"><p><div id="moduleLogin"><form name="Frm" id="Frm" class="course" action="mijn-profiel/cursussen/6/2/28/" method="post" enctype="multipart/form-data">
												<input type="hidden" name="process" value="true" />
													
												<div class="modulecontentbox">
													<div class="modulecontentbox-title ico-write">Invulopdracht - Positieve gebeurtenissen</div>
													<div class="modulecontentbox-content"><div class="modulecontentbox-contentwrapper"><div class="html"><p>In deze eerste module wil ik je vragen om dingen te noteren die je dagelijks tegenkomt op je werk, thuis of in andere situaties. De training heet niet voor niets: &lsquo;Uit je hoofd, in je lijf&rsquo; en dat betekent dat je je eerst bewust zal moeten worden van hoe je lichamelijk en geestelijk op gebeurtenissen reageert. <strong><em>Bewustwording is de eerste stap op weg naar verandering! &nbsp;<br /></em></strong>Als je leeft zonder kennis te hebben van je eigen automatische gedachten en je lichamelijke reactie daarop, houden zij gewoon hun invloed op jou. Daarentegen zal het cre&euml;ren van bewustzijn (hoe je denkt en reageert) je aanmoedigen om te oefenen met nieuw gedrag.</p>
<p>&nbsp;</p>
<p>Met behulp van dit schema, kun je dagelijks je gedachten en je gevoelens over een situatie noteren. Tijdens deze eerste module richten we ons op <strong><em>positieve gebeurtenissen</em></strong> die je dagelijks meemaakt. Het hoeven niet alleen grote gebeurtenissen te zijn, juist de kleine situaties kunnen verschil maken op een dag. Mocht je het lastig vinden om gevoelens te benoemen, dan kun je heel eenvoudig het emotie-overzicht raadplegen door op het hartje te klikken, onderaan deze pagina.</p>
<p>&nbsp;</p>
<p><img src="bestanden/Schermafbeelding_2014-09-09_om_21.09.50.png" alt="" width="822" height="124" /></p>
<p>&nbsp;</p>
<p><span style="color: #666699;"><strong>Tip bij het...

CSS

*, *:before, *:after {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.mbutton, .mbutton * {
    box-sizing: content-box;
    -o-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

/* ===== website template ===== */
@import url("http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|PT+Sans:400,700,400italic,700italic|Roboto+Slab:700,400&subset=latin,latin-ext");

@font-face{
	font-family:'Glyphicons Regular';
	src: url('../fonts/glyphicons-regular.eot');
	src: url('../fonts/glyphicons-regular.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/glyphicons-regular.woff') format('woff'),
		 url('../fonts/glyphicons-regular.ttf') format('truetype'),
		 url('../fonts/glyphicons-regular.svg#glyphiconsregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'MyriadProWeb';
	font-weight: normal;
	font-style: normal;
	src: url('../fonts/myriadpro-regular.eot');
	src: url('../fonts/myriadpro-regular.eot') format('embedded-opentype'),
		 url('../fonts/myriadpro-regular.woff') format('woff'),
		 url('../fonts/myriadpro-regular.ttf') format('truetype'),
		 url('../fonts/myriadpro-regular.svg#MyriadProRegular') format('svg');
}

@font-face {
	font-family: 'MyriadProWeb';
	font-weight: bold;
	font-style: normal;
	src: url('../fonts/myriadpro-bold.eot');
	src: url('../fonts/myriadpro-bold.eot') format('embedded-opentype'),
		 url('../fonts/myriadpro-bold.woff') format('woff'),
		 url('../fonts/myriadpro-bold.ttf') format('truetype'),
		 url('../fonts/myriadpro-bold.svg#MyriadProBold') format('svg');
}


html {
	height: 100%;
	overflow: auto;
}

body {
	height: 100%;
	color: #424242;
	font-family: 'MyriadProWeb', Arial, Verdana, Tahoma, Sans-serif;
	font-weight: normal;
	font-size: 16px;
	background-color: #9d9d9d;
	background-color:...