JSFiddle - React, Tailwind, and code Playground

by sikni8

HTML

<div style="width: 350px; position: absolute; right: 25%; top: 5%; -webkit-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);">
	<section class="notif notif-warn">
		<h6 class="notif-title">Warning!</h6>
		<p>This task was forced checked out by another user. Your changes will not be saved Site.Master.</p>
		<div class="notif-controls">
			<a href="#" class="notif-close" id="cBtn">Close</a>
		</div>
	</section>
</div>

CSS

/*
 * Copyright (c) 2012-2013 Thibaut Courouble
 * http://www.cssflow.com
 *
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 *
 * View the Sass/SCSS source at:
 * http://www.cssflow.com/snippets/notification-windows/demo/scss
 *
 * Original PSD by Cosmin Negoita: http://goo.gl/3oYe1
 */

.notif {
	width: 100%;
	position: relative;
	padding: 25px 30px 25px 100px;
	min-height: 50px;
	line-height: 22px;
	background: white;
	border-radius: 2px;
}

.notif:before {
	content: '';
	position: absolute;
	top: 25px;
	left: 30px;
	width: 40px;
	height: 40px;
	border: 5px solid;
	border-radius: 25px;
}

.notif p {
	font-size: 11px;
	color: #666;
}

.notif-title {
	margin: 0 0 5px;
	font-size: 14px;
	font-weight: bold;
	color: #333;
}

.notif-title:before, .notif-title:after {
	content: '';
	position: absolute;
	background: white;
	border-radius: 2px;
}

.notif-notice .notif-title:after {
	top: 50px;
	left: 48px;
	width: 8px;
	height: 4px;
}

.notif-alert:before {
	background: #e34f4f;
	border-color: #c14343;
}

.notif-warn:before {
	background: #f1e472;
	border-color: #cec260;
}

.notif-warn .notif-title:before, .notif-warn .notif-title:after {
	top: 42px;
	left: 53px;
	width: 4px;
	height: 11px;
	background: #5c562b;
}

.notif-warn .notif-title:after {
	top: 54px;
	height: 4px;
}

.notif-controls {
	position: absolute;
	top: 0;
	right: 0;
	height: 16px;
	padding: 4px 3px 5px;
	background: #f0f0f0;
	border: solid #dcdcdc;
	border-width: 0 0 1px 1px;
	border-radius: 0 2px;
}

.notif-controls > a {
	position: relative;
	float: left;
	margin: 0 1px;
	width: 16px;
	height: 16px;
	font: 0/0 serif;
	text-shadow: none;
	color: transparent;
}

.notif-close:before, .notif-close:after {
	content: '';
	position: absolute;
	top: 4px;
	left: 7px;
	width: 2px;
	height: 10px;
	background: #bbb;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform:...