JSFiddle - React, Tailwind, and code Playground

by ondrejd

HTML

<div class="snackbar">
    <p>Your new snackbar</p>
</div>

CSS

/**
 * Snackbars (there should be just one snackbar at the moment).
 */
div.snackbar {
	background-color: #323232;
	border-radius: 2px 2px 2px 2px;
	color: #FFFFFF;
	height: 48px;
	min-width: 288px;
	max-width: 568px;
	padding: 0 24px 0 24px;
	position: fixed;
	right: 10px;
	vertical-align: middle;
	animation-duration: 0.5s;
	animation-name: snackbarSlideIn;
	bottom: 10px;
}
div.snackbar p {
	font-size: 14pt;
	margin: 2px 0 0 0;
	padding: 14px 0 14px 0;
}
@keyframes snackbarSlideIn {
	from { bottom: -48px; }
	to { bottom: 10px; }
}