JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<div id="people">
	<div class="coming">People are coming</div>
	<div class="going">and going.</div>
</div>

CSS

/* begin fadein animation */
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
/* end fadein animation */

/* begin fadeout animation */

@-moz-keyframes fadeout { /* Firefox */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-webkit-keyframes fadeout { /* Safari and Chrome */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-o-keyframes fadeout { /* Opera */
    from {
        opacity:1;
    }
    to {
        opacity: 0;
    }
}
@keyframes fadeout {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}

/* end fadeout */

.coming{
    width:320px;
	height:auto;
	position:absolute;
	top:0px;
	left:0px;
	margin-left:10px;
	background:#FFF;
	color:#000;
	font-family: Sans-Serif;
	font-size:24px;
	border-radius: 10px 10px 10px 10px;
	-moz-box-shadow: 0px 0px 0px #000;
	-webkit-box-shadow: 0px 0px 0px #000;
	box-shadow: 1px 1px 5px #222;
	padding:2px 20px;

	}

#people .coming{
    -moz-animation: fadein 3s ease-in; /* Firefox */
    -webkit-animation: fadein 3s ease-in; /* Safari and Chrome */
    -o-animation: fadein 3s ease-in; /* Opera */
	animation: fadein 3s ease-in;
}


.going{
    width:320px;
	height:auto;
	position:absolute;
	top:120px;
	left:0px;
	margin-left:10px;
	background:#FFF;
	color:#000;
	font-family: Sans-Serif;
	font-size:24px;
	border-radius: 10px 10px 10px 10px;
	-moz-box-shadow: 0px 0px 0px #000;
	-webkit-box-shadow: 0px 0px 0px #000;
	box-shadow: 1px 1px 5px #222;
	padding:2px 20px;
}
	

#people .going{
    opacity: 0;
    -moz-animation: fadein 3s ease-in 7s forwards; /* Firefox */
   ...