<h1 
    class="font-black text-6xl block duration-500 relative transform transition-all translate-y-12 ease-out" 
    data-replace='{ "translate-y-12": "translate-y-0" }'
    >
    Hells to the Yeah
</h1>
document.addEventListener("DOMContentLoaded", 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]);
        });
    }
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.7.6/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.