JSFiddle - React, Tailwind, and code Playground

HTML

<aside>
    <form>
        <input type="text" name="pseudo" id="reg-pseudo" class="text-left"/><br/>
        <input type="checkbox" name="rememberme" id="rememberme" class="hidden"/>
		<label for="rememberme" class="checkbox float-left"></label>
    </form>
</aside>

CSS

aside input {
	width: 180px;
	padding: 0 5px;
	height: 20px;
}
aside input.wrong {
	border-color: #D85759;
}
aside input:focus {
	border-color: #5FAACF;
}
aside input, aside .checkbox {
	border-color: #a18bb9;
	color: #333;
	font-weight: bolder;
	background-color: white;
	border-width: 4px;
	border-style: solid;
	border-radius: 4px;
	outline: none;
	-o-transition: border-color 0.5s ease-in-out;
	-ms-transition: border-color 0.5s ease-in-out;
	-moz-transition: border-color 0.5s ease-in-out;
	-webkit-transition: border-color 0.5s ease-in-out;
	transition: border-color 0.5s ease-in-out;
}
aside .checkbox {
	width: 14px;
	height: 14px;
	margin: 2px 4px;
	display: inline-block;
}
aside input[type=checkbox]:checked + .checkbox {
	border-color: #cf5f9b;
}
aside input[type=checkbox]:checked + .checkbox:before {
	content: "âś”";
	top: -4px;
	position: relative;
    display: inline;
}
.hidden {
    visibility: none;
    width: 0;
}
}