JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<link href='http://fonts.googleapis.com/css?family=Montserrat+Alternates' rel='stylesheet' type='text/css'>

<div>
    <p class="prediction">I predict <input placeholder="xxx" id="predictionbox" type="text" /></p>
</div>

CSS

.prediction {
    margin-top: 200px;
    text-align: center;
}

.prediction, #predictionbox {
    font-size: 32px;
    font-family: 'Montserrat Alternates', sans-serif;
    
}

#predictionbox {
    border: 0;
    width: 740px;
}

JavaScript

var input = document.getElementById('predictionbox'),
    suggestions = [
    "my team will win Startup Weekend",
    "the Ducks will win their next game",
    "dinner will be burritos",
    "we'll get more than an inch of rain today",
    "Apple will release a mini iPad this month",
    "SNL won't be very funny"
    ],
    i = 0;

var suggest = function () {
    input.placeholder = suggestions[i];
    i = (i + 1) % suggestions.length;
};

setInterval(suggest, 4000);
suggest();