JSFiddle - React, Tailwind, and code Playground

by dima_k

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div data-role="page" id="first-page">
    <div data-role="header" data-position="fixed">
        <h1>Navbars</h1>
    </div>
    <div data-role="content">
        <h3 class="centered-content">Navbar buttons positions</h3>
        <div data-role="navbar">
            <ul>
                <li><a href="#second-page" data-theme="a">Second Page</a></li>
            </ul>
        </div>
        <br />
        <br />
        <h3 class="centered-content">Buttons always divide the width of the screen to equal parts</h3>
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-theme="a">1</a></li>
                <li><a href="#" data-theme="a">2</a></li>
            </ul>
        </div>
        <br />
        <br />
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-theme="a">1</a></li>
                <li><a href="#" data-theme="a">2</a></li>
                <li><a href="#" data-theme="a">3</a></li>
            </ul>
        </div>
        <br />
        <br />
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-theme="a">1</a></li>
                <li><a href="#" data-theme="a">2</a></li>
                <li><a href="#" data-theme="a">3</a></li>
                <li><a href="#" data-theme="a">4</a></li>
            </ul>
        </div>
        <br />
        <br />
        <h3 class="centered-content">Five is a maximal number of buttons that can be placed in line</h3>
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-theme="a">1</a></li>
                <li><a href="#" data-theme="a">2</a></li>
                <li><a href="#" data-theme="a">3</a></li>
                <li><a href="#" data-theme="a">4</a></li>
                <li><a href="#"...