JSFiddle - React, Tailwind, and code Playground

by kuiche

CSS

body {
    width: 100%;
    height: 100%;
}

.complete {
	position: absolute;
	z-index: 150;
	display: table;
	height: 100%;
	width: 100%;
	background: #F1F1F1;
}

.complete .wrap {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.complete h1 {
	text-align: center;
	border: none;
	font-size: 40px;
}

.complete .button {
	clear: both;
	display: block;
	margin-bottom: 10px;
	max-width: 200px;
	margin: 0 auto 10px;
}

JavaScript

var stuff = '<div class="complete-modal"><div class="complete">	<div class="wrap">		<h1><span class="tick animated"></span>Product created</h1>		<a href="http://tonic/admin/product/edit/212" class="small button continue-edit">			Continue editing product		</a>		<span href="/admin/product/create" class="small button create-similar" data-modal-close="">			Create similar product		</span>		<a href="/admin/product/create" class="small button create-new">			Create new product		</a>	</div></div></div>'

$(stuff).hide().appendTo("body").fadeIn(100);