JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<main>
	<header>
		<div class="shape"></div>
		<div class="editor">
			<input type="text" value="ROB Dev Banking" spellcheck="false" placeholder="Environment name">
			<input type="submit" value="Save">
		</div>
	</header>
</main>

SCSS

*, *::before, *::after {
	box-sizing: border-box;
}

$bg: #343a47;
$accent: #3778dc;

body {
	background: $bg;
	font-family: Segoe UI;
	color: #f2f7f9;
	margin: 0;
}

main {
	padding: 20px;	
	
	header {
		padding: 1px;
		position: relative;
		overflow: hidden;

		.shape {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 100%;
			background: linear-gradient(-220deg, transparent 50%, $accent 50%);
			transition: left 200ms ease;
		}
		
		.editor {
			position: relative;
			transition: all 150ms ease;
			display: flex;
			overflow: hidden;
			background: $bg;

			input[type=text] {
				all: inherit;
				background: none;
				border: none;
				font-size: 20pt;
				font-weight: 300;
				padding: 5px 10px;
				width: 100%;
			}

			input[type=submit] {
				all: inherit;
				background: $accent;
				padding: 0 25px;
				transform: translateX(101%);
				text-transform: uppercase;
				font-weight: 700;
				font-size: 12pt;
			}
		}
		
		&:focus-within {
			.shape {
				left: -110%;
			}
			
			.editor {
				background: darken($bg, 5%);

				input[type=submit] {
					transform: none;
				}
			}
		}
	}
}