vaWJaz

index.html

<div class="fadeIn fixed z-50 pin overflow-auto flex">
  <div class="window fixed max-w-md relative pin-b pin-x align-top m-auto p-0 h-auto flex flex-col">
    <main class="client">
      <header class="font-bold text-white">Building application</header>
      <p class="text-xl leading-normal p-2">
        One moment please...
      </p>
    </main>
  </div>
</div>

style.scss

@font-face {
	font-family: 'FixedsysExcelsior301Regular';
	src: url('//doir.ir/fixedsys/fsex300-webfont.eot');
	src: url('//doir.ir/fixedsys/fsex300-webfont.eot?#iefix') format('embedded-opentype'),
		url('//doir.ir/fixedsys/fsex300-webfont.woff') format('woff'),
		url('//doir.ir/fixedsys/fsex300-webfont.ttf') format('truetype'),
		url('//doir.ir/fixedsys/fsex300-webfont.svg#FixedsysExcelsior301Regular') format('svg');
	font-weight: normal;
	font-style: normal;
	-webkit-font-smoothing:aliased;
	font-smooth:never;
}

* { font-family: "FixedsysExcelsior301Regular", sans-serif; }
body { background: #3a6ea5; }

.window {
	width: 476px;

	background: #c0c0c0;
	border: 1px solid;
	border-left-width: 0;
	border-top-width: 0;
	border-top-color: #dfdfdf;
	border-left-color: #dfdfdf;
	border-right-color: black;
	border-bottom-color: black;
}

.window > main.client {
	border: 2px solid;
	border-top-color: white;
	border-left-color: white;
	border-right-color: #808080;
	border-bottom-color: #808080;
}

.window > main.client > header {
	background-color: #000080;
	padding: 0 5px;

	font-size: 0.7em;
	line-height: 1.7em;
	background: linear-gradient(to right, #000080, #1084d0);
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.6.4/tailwind.css" rel="stylesheet" />

vawjaz.markdown

vaWJaz

A Pen by Robert Butler on CodePen.

License.