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" data-add-back-btn="true">
    <div data-role="header" data-position="fixed">
        <h1>Buttons</h1>
        <a href="#dynamic-buttons" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">To Dynamic Buttons Page</a>
    </div>
    <div data-role="content">
        <h3 class="centered-content">Anchor button</h3>
        <a href="#" data-role="button">Anchor</a>

        <h3 class="centered-content">Form buttons</h3>
        <!-- data-inline="true" -->
        <button>Button</button>
        <input type="button" value="Input Button" />
        <input type="submit" value="Submit" />
        <input type="reset" value="Reset" />

        <h3 class="centered-content">Image buttons</h3>
        <div class="centered-content">
            <input type="image" src="http://png-3.findicons.com/files/icons/75/i_like_buttons_3a/512/perspective_button_logoff.png" style="width:20%"/><br />
            <a href="#">
                <img src="http://openclipart.org/people/inky2010/Shutdown_button.svg" style="width:20%" />
            </a>
        </div>

        <h3 class="centered-content">Buttons with icons</h3>
        <div class="centered-content no-padding no-margin">
            <p>
                <button data-icon="arrow-u" data-inline="true" data-iconpos="top" data-theme="a">top</button>
            </p>
            <p>
                <button data-icon="arrow-l" data-inline="true" data-iconpos="left" data-theme="b">left</button>
                <button data-icon="delete" data-inline="true" data-iconpos="notext" data-theme="a">notext</button>
                <button data-icon="arrow-r" data-inline="true" data-iconpos="right" data-theme="c">right</button>
            </p>
            <p>
                <button data-icon="arrow-d" data-inline="true"...

CSS

.centered-content {
    text-align: center;
}

.no-padding, .no-padding p {
    padding: 0;
}

.no-margin, .no-margin p {
    margin: 0;
}