JSFiddle - React, Tailwind, and code Playground

by appleboy

HTML

<form>
    <p>name: <input id="name" value="test" /></p>
    <p>email: <input id="email" value="test@testcom" /></p>
    <p>first name: <input id="first_name" value="test@testcom" /></p>
    <p>last name: <input id="last_name" value="test@testcom" /></p>
    <p>get second input element: <span id="output"></span></p>
</form>

<table border="1">
    <tr>
        <td colspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

CSS

table {
    width: 500px;
}

td {
    height: 20px;
}

JavaScript

// get second input element.
$(function(){
    $('#output').text($('input:eq(1)').val()).css('color', 'blue');
    $('p:nth-child(even)').css('background-color', 'yellow');
    document.getElementById('output').style.fontSize = '2em';
});