JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<div id="tabcontainer">
    <ul>
        <li><a href="#tab1">NC</a>
        </li>
        <li><a href="#tab2">Add NC Info</a>
        </li>
        <li><a href="#tab3">RA</a>
        </li>
        <li><a href="#tab4">NC</a>
        </li>
        <li><a href="#tab5">ReOpen NC</a>
        </li>
    </ul>
    <div id="tab1">
        <p>
            <table>
                <tr>
                    <td>Signature:</td>
                    <td>
                        <input name="signatureText" type="text" />
                    </td>
                </tr>
                <tr>
                    <td>Bio:</td>
                    <td>
                        <input name="bioText" type="text" />
                    </td>
                </tr>
            </table>
            <input type="submit" name="Button3" value="Save" />
            <br />
            <br />Hit Save to cause a postback from an update panel inside the tab panel.
            <br />
        </p>
    </div>
    <div id="tab2">
        <p>Email:
            <input name="emailText" type="text" />
            <br />
            <br />
            <input type="submit" name="Button1" value="Save" />
            <br />
            <br />Hit Save to cause a full postback.</p>
    </div>
    <div id="tab3">
        <p>
            <div>Controls authored by Toolkit User (read-only - demo purposes):</div>
            <ul>
                <li>Calendar</li>
                <li>MaskedEdit</li>
                <li>Accordion</li>
                <li>Calendar</li>
                <li>Calendar</li>
            </ul>
        </p>
    </div>
    <div id="tab4">
        <p></p>
    </div>
    <div id="tab5">
        <p></p>
    </div>
</div>

JavaScript

$(function () {
    $("#tabcontainer").tabs();
});