JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<link rel="stylesheet" href="https://raw.github.com/necolas/normalize.css/master/normalize.css">
<!-- パターンマッチ -->
<form class="group" action="#">
	<ol>
		<li class="group">
			<label for="patternfield">パターンマッチ</label>
			<input type="text" name="text" id="patternfield" />

		</li>
	</ol>
<button type="submit">送信</button>
</form>

CSS

form * {
	background: none;
}

.group:after {
	content: " ";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

input,input[type=file],input[type=date],input[type=text],input[type=password],input[type=submit],input[type=email],input[type=url],input[type=number],input[type=datetime],textarea,button {
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	background: transparent;

	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	padding: 5px;
	margin: 0;
	margin-bottom: 10px;
	color: #555;
}

body {
	background: #42826C;
	background-image: -webkit-gradient(linear, left top, left bottom, );
	background: #42826C -webkit-linear-gradient(#002F32,#42826C) no-repeat;
	background: #42826C -moz-linear-gradient(#002F32,#42826C) no-repeat;
	background: #42826C -o-linear-gradient(#002F32,#42826C) no-repeat;
	background: #42826C -ms-linear-gradient(#002F32,#42826C) no-repeat;
	background: #42826C linear-gradient(#002F32,#42826C) no-repeat;
	height: 500px;
}

form {
	width: 80%;
    min-width: 300px;
	margin: 0 auto;
	position: relative;
	top: 50px;

	background: rgb(165, 199, 127);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(5%, linear-gradient(rgb(249, 195, 95)), to(rgb(165, 199, 127) ) no-repeat));
	background: url(checkeredpattern.png) repeat-x, -webkit-linear-gradient(rgb(249, 195, 95) 5%, rgb(165, 199, 127) ) no-repeat;
	background: url(checkeredpattern.png) repeat-x, -moz-linear-gradient(rgb(249, 195, 95) 5%, rgb(165, 199, 127) ) no-repeat;
	background: url(checkeredpattern.png) repeat-x, -o-linear-gradient(rgb(249, 195, 95) 5%, rgb(165, 199, 127) ) no-repeat;
	background: url(checkeredpattern.png) repeat-x, -ms-linear-gradient(rgb(249, 195, 95) 5%, rgb(165, 199, 127) ) no-repeat;
	background: url(checkeredpattern.png) repeat-x, linear-gradient(rgb(249, 195, 95) 5%, rgb(165, 199, 127) ) no-repeat;
	border: 5px solid rgba(2, 46, 50,1);
	padding: 35px 30px 5px 30px;

	-webkit-border-radius:...

JavaScript

/* 

ツール
◆チートシート日本語版
http://www.textdrop.net/wp-content/uploads/regular-expressions-cheat-sheet-v2-ja.pdf


◆使えるプリフォーマット
http://html5pattern.com/

*/