JSFiddle - React, Tailwind, and code Playground

by Konstantin Heinrich

HTML

<div>
    <table>
         <tr>
             <td>
                 <input type="text" class="myInput" id="InputName"/>            
             </td>
             <td>
                  <div class="myButton" id="Button">
                      <span>Print Name</span>
                  </div>
             </td>
        </tr>
        <tr>
            <td>
                <p id="Output"></p>
            </td>      
        </tr>
    </table>
</div>

CSS

.myButton{
    background-color:skyblue;
    width:120px;
    height:40px;
    font-family:'Seqoe UI light'
}
.myInput{
    width:200px;
    height:80;
    border:2px solid skyblue;
    background-color:white;
    font-size:20pt;
}
span{
    text-align:center;
    font-family:'Helvetica';
    font-size:14pt;
    margin-left:10px;    
    
}

JavaScript

$("#Button").click(function(){
    var name = $('#InputName').val();
    $('#Output').html(name);
});