JSFiddle - React, Tailwind, and code Playground

by jrm2k6

HTML

<body>
    <div id="container">
        <div id="montext">
            <p>Je m'appelle <span id="prenom">Vincent</span>...</p>
        </div>
        
        <ul id="leurtext">
            <li id="A">
                <button id="A1"><span>></span> Ok et après ?</button>
                <button id="A2"><span>></span> Ce prénom est nul.</button>
                <button id="A3"><span>></span> J'en ai assez lu, rencontrons le !</button>
            </li>
            <li id="B">
                <button id="B1"><span>></span> Ça ne m'intéresse plus.</button>
                <button id="B2"><span>></span> Laissons lui une chance.</button>
            </li>
           </ul>
        
    </div>
</body>

CSS

body {
    background:#CCC;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    line-height:14px;
    color:#777;
}

#montext {
    display:block;
    margin-left:40%;
    margin-top:20em;
    width:490px;
    padding:10px;
    padding-left:20px;
    min-height:14px;
    background:#FFF;
    cursor:pointer;
}

#leurtext li {
    width:500px;
    padding:10px;
    margin-left:40%;
    background:#777;
    display:none;
}

ul, li, #leurtext button {
    border:none;
    background:none;
    display:block;
    margin:0;
    padding:0;
}

#leurtext button:hover {
    color:yellow;
    cursor:pointer;
}

#leurtext button:hover span{
    padding-right:10px;
}

#prenom {
    width:200px;
    overflow:hidden;
    height:14px;
}

JavaScript

$(document).ready(function() {
    
    var monPrenom = ''; 
    $.fn.extend({ 
                disableSelection: function() { 
                    this.each(function() { 
                        if (typeof this.onselectstart != 'undefined') {
                            this.onselectstart = function() { return false; };
                        } else if (typeof this.style.MozUserSelect != 'undefined') {
                            this.style.MozUserSelect = 'none';
                        } else {
                            this.onmousedown = function() { return false; };
                        }
                    }); 
                } 
            });
    $('#montext').disableSelection();
    
    var A = 1;
    
        $('#montext').click(function(){
            if (A==1) {
                if($('#A').is(':hidden')) {
                    $('#A').slideDown('slow', function() {
                        $(this).css('display','block');
                    });
                }
                else {
                    $('#A').slideUp('slow', function() {
                        $(this).css('display','none');
                    });
                };
            };
        });
        
    function changeText (text) {
        $('#montext').html($('#montext').html() + '<p id=ok2 style="display:none">'+ text +'</p>');
            $('#ok2').delay(100).slideDown('slow', function() {
                $(this).css('display','block');
            });
    };
    
    function nextOne (next, text) {
        $('#montext').html($('#montext').html() + '<p id=ok style="display:none">'+ text +'</p>');
            $('#ok').delay(100).slideDown('slow', function() {
                $(this).css('display','block');
            });            
            $(next).delay(2000).slideDown('slow', function() {
                $(this).css('display','block');
            });
    };
    
    function slideUp(div){
        $(div).slideUp('slow', function() {
           ...