JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "container">
    <button onclick="fadeIn()">Start Animation</button>
        <div class = "row">
            <div class = "col-md-3">
                <img class = "img-responsive" src="http://www.google.com/think/images/google-trends_tools_sm.jpg">
            </div>

            <div class = "col-md-9 page-header">
                <h1 id="welcomeHeader" style="opacity:0">
                    Welcome to the world!
                </h1>
            </div>
        </div>

    </div>

JavaScript

function fadeIn() {
            var el = document.getElementById("welcomeHeader");
            var op = parseFloat(el.style.opacity);

            var timer = setInterval(function () {
                console.log('here');
                if(op >= 1.0)
                    clearInterval(timer);

                op += 0.1;
                el.style.opacity = op;
            }, 50);
        }