JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Example</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<style>
body {-webkit-animation: pulse 200s infinite;animation: pulse 15s infinite;}
@-webkit-keyframes pulse {
0% {background:#FBFFF7}
3% {background:#FBFFF7}
30% {background:#FBFFF7}
60% {background:#FBFFF7}
90% {background:#FBFFF7}
100% {background:#FBFFF7}
}
@keyframes pulse {
0% {background:#FBFFF7}
3% {background:#FBFFF7}
30% {background:#FBFFF7}
60% {background:#FBFFF7}
90% {background:#FBFFF7}
100% {background:#FBFFF7}
}
.container
{
position: relative;
vertical-align:middle;
margin: auto;
}
#random_text
{font-size:3vw;
text-align:center;vertical-align:middle;
text-align:-moz-center;
text-align:-webkit-center;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(window).resize(function() {
var windowHeight = $(window).height();
var containerHeight = $(".container").height();
$(".container").css("top", (windowHeight / 2 - containerHeight * 0.7) + "px");
});
var textarray = [
"\"Example\" <br> Name",
];
var firstTime = true;
function RndText()
{
var rannum = Math.floor(Math.random() * textarray.length);
if(firstTime) {
$('#random_text').fadeIn('fast', function() {
$(this).text(textarray[rannum]).fadeOut('fast');
});
firstTime = false;
}
$('#random_text').fadeOut('fast', function() {
$(this).text(textarray[rannum]).fadeIn('fast');
});
var windowHeight = $(window).height();
var containerHeight = $(".container").height();
$(".container").css("top", (windowHeight / 2 - containerHeight * 0.7) + "px");
}
$(function() {
// Call the random function when the DOM is ready:
RndText();
});
var inter = setInterval(function() {...