JSFiddle - React, Tailwind, and code Playground

by AaronLayton

HTML

<h1>Translation tests </h1>
<p>This page is intended to showcase the 2 different translation methods we can use. Below is a list of the headings you have sent.</p>
<h2>Translation options</h2>
<table width="450" border="0">
    <tr>
        <td class="thead">TranslateThis</td>
        <td class="thead">Google Translate</td>
    </tr>
    <tr>
        <td>
            <div id="translate-this"><a style="width:180px;height:18px;display:block;" class="translate-this-button" href="http://www.translatecompany.com/website-translations/">Website Translation</a></div>

            <script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
            <script type="text/javascript">
            TranslateThis({
                onComplete : function(lang) {
                    // whatever you want to run on complete
                    if (lang != undefined){
                        $('#translateDisclaimer').fadeIn('slow');
                        
                        // Attach an event listener to the undo button to hide the disclaimer
                        $('#ttb-paneltop a').live('click', function(){
                            $('#translateDisclaimer').fadeOut('slow');
                        });
                    }
                }
            });
            </script>
        </td>
        <td>
            <div id="google_translate_element"></div>
            <script>
                function googleTranslateElementInit() {
                    new google.translate.TranslateElement({
                        pageLanguage: 'en',
                        gaTrack: true,
                        layout: google.translate.TranslateElement.InlineLayout.SIMPLE
                    }, 'google_translate_element');
                }
            </script>
            <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
        </td>
    </tr>
</table>
<p>&nbsp;</p>
<h2>Headings</h2>
<ul>
   ...

CSS

table { border:1px solid #ccc;border-collapse:collapse;}
td {border:1px solid #ccc;text-align:center;}
td.thead { background:#eee; }
#translate-this {text-align: center;}
#translate-this .translate-this-button {float: none !important;margin: 0 auto;}

#translateDisclaimer {
    background: #0B2D77;
    bottom:10px;
    color: white;
    display:none;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10px;
    padding: 5px 10px 4px;
    position:fixed;
    right:10px;
    width:300px;
    
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}