JSFiddle - React, Tailwind, and code Playground

by Anil D

HTML

<img src="http://www.zeekoo.dk/idea/fbapi/idea.png"
		style="display: none" />
	<div class="huge backbg" id="desktop">
		<div class="left">
			<div class="info">
				Do you have a good <span class="blue wideshadow"
					onclick="Scroll('lionbg')">idea</span> for a website?<br />
				<br />Are you not capable of bringing it to <span class="blue">life</span>?<br />
				<br />Send your good idea to Zeekoo.dk and recieve 30% of the <span
					class="blue">income</span>.
			</div>
		</div>
		<div class="right">
			<div class="formular">
				<input name="name" type="text" value="what people call you"
					id="what people call you" title="please write your name here"
					class="inputfield" /><br />
				<input name="contact" type="text" value="how we can reach you"
					id="how we can reach you"
					title="please write your phone number or email adress, then we can contact you later on"
					class="inputfield" /><br />
				<input name="title" type="text" value="what you call your idea"
					id="what you call your idea"
					title="write the title of your idea here" class="inputfield" /><br />
				<textarea name="idea" title="write down your idea here"
					id="write your revolutionary idea here">write your revolutionary idea here</textarea>
				<br />
				<a href="javascript:void(0)" class="clickblue">Submit your idea</a>
			</div>
			<div class="thanks">
				your revolutionary idea has been <span class="blue">sent</span>.<br />
				<br />we'll get in <span class="blue">touch</span> after the total
				amazement.<br />
				<br />
				<div class="remember" style="display: none">
					- remember… always to bring a <span class="blue wideshadow">towel</span>
				</div>
			</div>
		</div>
	</div>
	<div class="huge lionbg" id="lion">
		<div class="left">
			<div class="teaser">
				<span class="blue">What</span> is this project about?<br />
				<br />
				<span class="blue">Why</span> did we make it?
			</div>
		</div>
		<div class="right">
			<div...

CSS

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,200italic,400italic|Lato:100,300,400,400italic|Stoke:400,300&subset=latin,latin-ext);html{width:100%;height:100%}body{width:100%;height:100%;margin:0px;font-family:Helvetica,sans-serif;font-weight:100;color:#fff;font-size:40px}div.huge{width:100%;min-height:100%;max-height:100%;background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;background-attachment:fixed}.backbg{background-image:url("gfx/back.png");border-bottom:1px solid #fff}.lionbg{background-image:url("gfx/lion.png");border-bottom:1px solid #000}.blueback{background-image:url("gfx/blueback.png")}div.left{padding:0px;min-height:100%;width:33%;float:left}div.idea{font-family:'Lato',Arial,sans-serif;font-weight:100;font-size:100px;width:220px;height:160px;position:fixed;top:0px;left:0px;background-color:rgba(0,0,0,0.4);border-bottom-right-radius:5px}div.idea div.byzeekoo{font-size:15px;padding-left:8px}div.info{padding-left:5px;font-size:40px;font-family:'Lato',Arial,sans-serif;font-weight:100;padding-top:160px}div.right{float:right;width:62%;min-height:100%}div.formular{padding-top:4%;width:70%;font-family:'Lato',Helvetica,sans-serif;font-weight:100;font-size:40px}div.formular input,textarea{width:100%;background-color:rgba(0,0,0,0.4);border:0px;font-size:40px;border-radius:4px;color:rgba(255,255,255,0.5);font-family:'Lato',Arial,sans-serif;font-weight:100;-webkit-appearance:caret;padding:2px;-webkit-transition:background-color 0.25s ease-out,color 0.25s ease-out,opacity 0.25s ease-out;-moz-transition:background-color 0.25s ease-out,color 0.25s ease-out,opacity 0.25s ease-out;transition:background-color 0.25s ease-out,color 0.25s ease-out,opacity 0.25s ease-out}div.formular textarea{min-height:300px;max-height:300px}div.right a{color:#fff;text-shadow:0px 0px 10px...

JavaScript

$(".clickblue").mousedown(function() {
				$(this).css("text-shadow", "0px 0px 10px rgba(0,0,0,1)")
			}).mouseup(function() {
				$(this).css("text-shadow", "0px 0px 10px rgba(0,0,0,0.5)")
			}).mouseout(function() {
				$(this).css("text-shadow", "0px 0px 10px rgba(0,0,0,0.5)")
			});
			$("div.right div.formular input, textarea").focus(function() {
				if (this.value == $(this).attr("id")) {
					this.value = "";
					$(this).css("color", "#fff")
				}
			}).focusout(function() {
				if (this.value == "") {
					this.value = $(this).attr("id");
					$(this).css("color", "rgba(255,255,255,0.5)")
				}
			});
			function Check() {
				warning = 0;
				if ($("input[name=contact]").val() == "how we can reach you") {
					$("input[name=contact]").css("color", "#f12020");
					warning = warning + 1
				}
				if ($("input[name=name]").val() == "what people call you") {
					$("input[name=name]").css("color", "#f12020");
					warning = warning + 1
				}
				if ($("input[name=title]").val() == "what you call your idea") {
					$("input[name=title]").css("color", "#f12020");
					warning = warning + 1
				}
				if ($("textarea[name=idea]").val() == "write your revolutionary idea here") {
					$("textarea[name=idea]").css("color", "#f12020");
					warning = warning + 1
				}
			}
			$("div.right div.formular a")
					.click(
							function() {
								Check();
								if (warning == 0) {
									$.get("addidea.php?idea="
											+ $("textarea[name=idea]").val()
											+ "&name="
											+ $("input[name=name]").val()
											+ "&contact="
											+ $("input[name=contact]").val()
											+ "&title="
											+ $("input[name=title]").val(), a);
									function a(b) {
										if (b == "suceed") {
											$(".formular")
													.fadeOut(
															1200,
															function() {
																$(".thanks")
																		.fadeIn(
																				800,
																				function()...