JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<form>
<label>
	<span>Url</span>
	<input name="url" autofocus/>
</label>
<button aria-expanded="false" type="button" disabled><span></span></button>
<fieldset disabled>
<div class="top"></div>
<label>
	<span>Name</span>
	<input name="name"/>
</label>
<label>
	<span>Description</span>
	<textarea name="description"></textarea>
</label>
<div class="bg"></div>
</fieldset>
<output><a href="#">Hello world</a></output>
</form>

SCSS

$ease: cubic-bezier(0.6, -0.28, 0.735, 0.045);

$duration: .5s;

html {
	font: 400 100%/1.25 -apple-system,".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande", sans-serif;
	background-color: #FFF;
}

form {
	max-width: 400px;
	margin: 0 auto;
}

input, textarea {
	font: inherit;
	border: none;
	outline: none;
	padding: 2px 5px;
}

input {
	line-height: 1.5;
}

label {
	display: flex;
	flex-flow: column wrap;
}

label + label {
	margin-top: 20px;
}

label span {
	font-size: 12px;
	text-transform: uppercase;
	margin-bottom: 5px;
}


input[name="url"] {
	text-align: center;
}

fieldset {
	position: relative;
	z-index: 1;
	border: 0;
	display: block;
	padding: 20px;
	position: relative;
	color: #FFF;
	overflow: hidden;
	margin: 5px 0 0;
}

.top, .top:before, .top:after, .bg {
	content: "";
	display: block;
	position: absolute;
	top: 0;
}

.top {
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #ccc;
	transition: background-color .2s ease-in;
	transition-delay: .1s;
}

.valid .top {
	background-color: #55b3ea;
	transition-delay: .1s;
}

.checked .top {
	background-color: #732dd2;
	transition-delay: 0s;
}

.top:after {
	border: 14px solid transparent;
	border-bottom-width: 0;
	border-top-color: #FFF;
	left: 50%;
	transform: translate3d(-14px, 0, 0) rotateX(90deg);
	transform-origin: 50% 0;
	transition: transform .2s ease-in;
	transition-delay: .1s;
}

fieldset:not([disabled]) .top:after {
	transform: translate3d(-14px, 0, 0) scale(0.7142857142857143);
	transition-delay: 0s;
}

.top:before {
	border: 15px solid transparent;
	border-bottom-width: 0;
	border-top-color: #ccc;
	left: 50%;
	top: 2px;
	transform: translate3d(-15px, 0, 0) rotateX(90deg);
	transform-origin: 50% 0;
	transition: transform .2s ease-in, border-color .2s ease-in;
	transition-delay: .1s;
}

.valid .top:before {
	border-top-color: #55b3ea;
	transition-delay: .2s;
}

.checked .top:before {
	border-top-color: #732dd2;
	transition-delay:...

JavaScript

var form = document.querySelector("form");
var fieldset = document.querySelector("fieldset");
var urlInput = document.querySelector("input[name='url']");
var button = document.querySelector("button");

var INVALID = "invalid";
var VALID = "valid";
var CHECKED = "checked";

var state = INVALID;
var open = false;

form.classList.add(state);

urlInput.addEventListener("input", function () {
	var length = urlInput.value.length;
	var _state = length > 3 ? ( length > 6 ? CHECKED : VALID ) : INVALID;
	setState(_state);
});

function setState (_state) {
	if (_state !== state) {
		form.classList.remove(state);
		form.classList.add(_state);
		setButtonState(_state);
		if (_state === INVALID) {
			toggleOpenState(false);
		}
		else if (_state === CHECKED) {
			toggleOpenState(true);
		}
		state = _state;
	}
} 

button.addEventListener("click", function () {
	toggleOpenState(true);
});

function toggleOpenState (_open) {
	open = (typeof _open === "boolean") ? _open : !open;
	if (open) {
		fieldset.removeAttribute("disabled");
	}
	else {
		fieldset.setAttribute("disabled", "true");
	}
}

function setButtonState (_state) {
	if (_state === VALID) {
		button.removeAttribute("disabled");
	}
	else {
		button.setAttribute("disabled", "true");
	}
	button.setAttribute("aria-expanded", (_state === INVALID) ? "false" : "true");
}