JSFiddle - React, Tailwind, and code Playground

by Rafa410

HTML

<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<body class="notranslate">
    <h1>Welcome to the webpage!</h1>
    <hr/>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>In sollicitudin nulla urna, a feugiat purus volutpat eu.</p>
    <p>Phasellus ut scelerisque nisi, id elementum eros.</p>
    <p>Etiam eu lectus pharetra, rhoncus quam ultricies, semper ligula.</p>
    <p>Curabitur aliquet arcu non elementum pellentesque.</p>
    <p>Nam suscipit sit amet diam a dictum.</p>
    <br>
    <div id="google_translate_element"></div>
    <div id="parts" class="translate" style="padding-top: 8px;">
        <button id="text_1">Hello</button>
        <button id="text_2">How</button>
        <button id="text_3">Are</button>
        <button id="text_4">You</button>
    </div>
</body>

CSS

.skiptranslate > iframe {
  border: 2px solid red;
}

JavaScript

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}