JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    	<h3>Validasi Form - <a href="http://www.dumetschool.com" target="_blank"> www.dumetschool.com</a></h3>
        
        <form class="contact_form" action="" method="">
        	<ul>
            	<li>
                	<label for="name">Name :</label>
                	<input type="text" name="name" placeholder="DUMET School" required>
                </li>
                <li>
                	<label for="email">Email :</label>
                    <input type="email" type="text" placeholder="dumet.school@example.com" required>
                    <span class="form_hint">example "name@email.com"</span>
                </li>
                <li>
                	<label for="website">Website :</label>
                    <input name="website" type="text" placeholder="http://dumetschool.com" required pattern="(http|https)://.+">
                    <span class="form_hint">example "http://someaddress.com"</span>
                </li>
                <li>
    				<label for="message">Message:</label>
    				<textarea name="message" cols="40" rows="6" required></textarea>
				</li>
                <li>
   					<button class="submit" type="submit">Submit Form</button>
				</li>
            </ul>
        </form>
    </div>

CSS

/* Selamat Datang di Blog DUMET School */
* {margin: 0; padding: 0;}

.form_hint, .required_notification {font-size: 11px;}

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}

#main {
	width: 680px;
	margin: auto;
	margin-top: 100px;	
}

#main h3 {
	border-bottom: 1px solid #999;
	color: #333;
	padding-bottom: 20px;
	margin-bottom: 20px;	
}

#main a {
	color: #333;
	text-decoration: none;
}	

#main a:hover {
	color: #03F;	
}

/* === Form Elements === */
.contact_form ul {
	list-style: none;	
}

.contact_form li{
	padding:12px; 
	border-bottom:1px solid #eee;
	position:relative;
}

.contact_form label {
	width:150px;
	margin-top: 3px;
	display:inline-block;
	float:left;
	padding:3px;
}
.contact_form input {
	height:20px; 
	width:220px; 
	padding:5px 8px;
}

.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:156px;}

	/* form element visual styles */
	.contact_form input, .contact_form textarea { 
		border:1px solid #aaa;
		box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
		border-radius:2px;
		padding-right:30px;
		-moz-transition: padding .25s; 
		-webkit-transition: padding .25s; 
		-o-transition: padding .25s;
		transition: padding .25s;
	}
	.contact_form input:focus, .contact_form textarea:focus {
		background: #fff; 
		border:1px solid #F00; 
		box-shadow: 0 0 3px #900; 
		padding-right:70px;
	}

/* === HTML5 validation styles === */	
.contact_form input:required, .contact_form textarea:required {
	background: #fff url(images/red_asterisk.png) no-repeat 98% center;
}
.contact_form input:required:valid, .contact_form textarea:required:valid {
	background: #fff url(images/valid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #5cd053;
	border-color: #28921f;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
	background: #fff url(images/invalid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #d45252;
	border-color: #b03535
}

/* === Form hints === */
.form_hint {
	background:...