JSFiddle - React, Tailwind, and code Playground

by kuonyuu

HTML

<!-- state : save / normal / readOnly / openMenu -->
	<div class="state-save  page-Form    rainbowMobilePage">
		
		<!-- hasMessage: when msg, show icon -->
			<div class="hasMessage  widget-FormTitle  rainbowMobileWidget  basicItem">
				<div class="pageTitle">Form Page Title</div>
				<div class="pageDescriptionWrap">
					<div class="pageDescription">State: <span class="pageFormStateText">Rejected</span></div>
					<div class="pageDescription">Delegated to <span class="pageFormDelegatedName">David Lee</span></div>
				</div>
			</div>

		<!-- input -->
			<div class="widget- state-  rainbowMobileWidget  basicItem">
				<div class="widgetLabelTitle">Input Label</div>
				<div class="widgetContent"><input type="text" placeholder="hint text"></div>
			</div>

			<div class="widget- state-widgetReadOnly  rainbowMobileWidget  basicItem">
				<div class="widgetLabelTitle">Input Label</div>
				<div class="widgetContent"><input type="text" readonly value="Input Text" disabled></div>
			</div>

			<div class="widget- state-warning  rainbowMobileWidget  basicItem">
				<div class="widgetLabelTitle">Input Label (warning)</div>
				<div class="widgetContent">
					<input type="text" placeholder="hint text">
				</div>
				<div class="extraHint">
					Your annual leaves quota is not enough.
				</div>
			</div>

		<!-- textarea -->
			<div class="widget- rainbowMobileWidget  basicItem">
				<div class="widgetLabelTitle">Textarea Label</div>
				<div class="widgetContent">
					<textarea></textarea>
				</div>
			</div>

			<div class="state-widgetReadOnly  widget- rainbowMobileWidget  basicItem">
				<div class="widgetLabelTitle">Textarea Label</div>
				<div class="widgetContent">
					<textarea readonly disabled>de vfew 
						few fw few
						gegerge</textarea>
				</div>
			</div>

		<!-- auto complete -->
			<div class="widget- state-  rainbowMobileWidget  basicItem">
				<div class="widgetLabelTitle">Auto-complete Label</div>
				<div...

SCSS

* { 
	.bxs();
	vertical-align: top; 
    font-family: "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	.c(@grey);
	font-size: 1rem;
}

html, body, div, span, object, iframe,
p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size: 100%;
    vertical-align:top;
    background:transparent;
    /*font-weight: 300;*/
}

// html, body { height: 100%; width: 100%; }

html, body {
	width: 100%;
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
body { 
	// overflow-y: scroll;
	overflow: auto;
	.pos(2) 
}

.hidden, div.hidden, div .hidden, div div.hidden, div div div.hidden, div div .hidden { display: none; }

h1, h2, h3, h4, h5, h6 { margin: 0; }

ul { list-style-type: none; }

a { text-decoration: none; }


::-webkit-input-placeholder {
   .c(@hintGrey);
}

:-moz-placeholder { /* Firefox 18- */
   .c(@hintGrey);
}

::-moz-placeholder {  /* Firefox 19+ */
   .c(@hintGrey);
}

:-ms-input-placeholder {  
   .c(@hintGrey);
}




/* ------------------------------------------------------------------------------  */



input, textarea, select { outline: none; }

input[type=text], input[type=password], textarea {
	border: 1px solid transparent;
	border-bottom: @widgetBorder;
	color: @grey;
	padding: @z2 0px;
	vertical-align: top;
	// line-height: @z20;
	min-height: @z28;

	&:focus {
		border-bottom-color: @blue;
		border-bottom-width: @z2;
	}
}

input, textarea { .bdr(0); }

textarea {
	resize: none;
	height: @z70;
	padding: @z4 0;
}

select::-ms-expand { /* for IE 11 */
    display: none;
}

select { // style here
	.bdr(3);
	border: @widgetBorder;
	-webkit-appearance:...