JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" cntent="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Sitio de Ema</title>
</head>
<body>
    <script>
        var textsToShow = {
            'en': {
                title: 'This is the Ema\'s Website',
                blogsubtitle: 'This blog is a marvell thinked to fascinate you',
                firstElement: 'This is the first element super important'
            },
            'es': {
                title: 'Este es el sitio web de Ema',
                blogsubtitle: 'Este blog es una maravilla pensada para fascinarte',
                firstElement: 'Este es el primer elemento super importante'
            }
        };
        $(document).ready(function() {
            function changeTo(lang) {
                Object.keys(textsToShow[lang]).forEach(elementId => {
                    $('#' + elementId).text(textsToShow[lang][elementId]);
                });
            }

            var languageButtons = $('#languageButtons');
            Object.keys(textsToShow).forEach(lang => {
                var upperLang = lang.toUpperCase();
                languageButtons.append('<button id="changeTo' + upperLang + '">' + upperLang + '</button>');
                $('#changeTo' + lang.toUpperCase()).click(() => changeTo(lang));
            });
            changeTo('en');
        });
    </script>
    <div id=languageButtons></div>
    <h1 id="title"></h1>
    <h2 id="blogsubtitle"></h2>
    <span id="firstElement"></span>
</body>
</html>