<div class="bg-gray-100 px-10 max-w-2xl mx-auto h-screen flex flex-col items-start justify-center">
<h1 class="font-black text-6xl block duration-700 relative transform opacity-0 transition-all translate-y-12 ease-out" data-replace='{ "translate-y-12": "translate-y-0", "opacity-0": "opacity-100" }'>
    Hells to the Yeah
</h1>
<p class="text-gray-500 text-lg block duration-700 delay-150 relative transform transition-all opacity-0 translate-y-12 ease-out" data-replace='{ "translate-y-12": "translate-y-0", "opacity-0": "opacity-100" }'>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate voluptas eius explicabo suscipit, nemo sapiente dignissimos, ipsum illum minus ab itaque accusamus reprehenderit. Quis fuga iusto saepe nobis sunt a. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio ut nulla quos nemo nesciunt enim officiis laudantium, neque labore. Officia illo obcaecati, impedit distinctio dicta laudantium mollitia quam nihil quisquam!
</p>

<div class="mt-10 sm:flex sm:justify-center lg:justify-start duration-700 delay-300 relative transform transition-all opacity-0 translate-y-12 ease-out" data-replace='{ "translate-y-12": "translate-y-0", "opacity-0": "opacity-100" }'>
    <div class="rounded-md shadow">
        <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
            Get started
        </a>
    </div>
    <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
        <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-600 bg-white hover:text-indigo-500 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
            Live demo
        </a>
    </div>
</div>
</div>

document.addEventListener("DOMContentLoaded", function(){
    setTimeout(function(){
        var replacers = document.querySelectorAll('[data-replace]');
        for(var i=0; i<replacers.length; i++){
            console.log('hit here2');
            let replaceClasses = JSON.parse(replacers[i].dataset.replace.replace(/'/g, '"'));
            Object.keys(replaceClasses).forEach(function(key) {
                replacers[i].classList.remove(key);
                replacers[i].classList.add(replaceClasses[key]);
            });
        }
    }, 1);
});