JSFiddle - React, Tailwind, and code Playground

by Fadly Setiawan

HTML

<input type="text" class="input-style target" style="display: none;" name="input-title" placeholder="TITLE">
	<div class="form-group">
	  <input type="text" id="inputNote" class="input-style" name="input-note" placeholder="note">
	</div>
	<div class="btn-action">
	  <button class="btn-style target" style="display: none;">CREATE</button>
	</div>

CSS

body {
	font-family: lato;
	background-color: #EEE;
	padding: 30px;
}

.container {
	width: 768px;
	margin: 0 auto;
	padding: 30px;
}
.note-wrapper {
	box-shadow: 0px 1px 1px #AAA; 
	background-color: #FFF;
	padding: 10px 30px;
	border-radius: 3px;
}

.input-style {
	border: none;
	height: 40px;
	padding: 10px;
	margin-bottom: 10px;
	width: 100%;
}
.input-style:focus {
	border-bottom : 2px solid #45D545;

}

.btn-action {
	text-align: right;
}

.btn-style {
	font-weight: bold;
	background-color: #29C029;
	border: none;
	color: #FFF;
	padding: 5px 30px;
	border-radius: 3px;
	box-shadow: 0px 3px 3px #AAA;
}

.btn-style:active {
	color: #EEE;
	background-color: #25AD25;
	box-shadow: 0px 1px 1px #AAA; 
}

JavaScript

var inputNote = document.getElementById("inputNote");
var target = document.querySelectorAll(".target");

function showContent() {
	for(var i = 0; i < target.length; i++) {
		target[i].removeAttribute("style");
	}
};

inputNote.onclick = showContent;