JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<form data-placeholder="My placeholder">
    <input type="text" required>
</form>

SCSS

form {
    position: relative;
	
    &::before {
        content: attr(data-placeholder);
        position: absolute;
        top: 2px;
        left: 2px;
        font: 400 13.3px Arial;
        color: rgb(117, 117, 117);
        pointer-events: none;
		transition: all 150ms ease-out;
    }
	
    &:valid {
    	&::before {
	    	transform: translateY(-1.1em);
			font-size: 12px;
		}
		
		> input {
			border-top: none;
		}
    }
	
	> input {
		border: 1px solid #a9a9a9;
		padding: 2px 1px;
		outline: none;
	}
}

body {
	margin: 50px;
}