JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<div data-role="page" id="page1">
    <div data-role="popup" id="purchase" data-theme="a" data-overlay-theme="b" style="max-width:100%; padding:1px;">
         <h3>Purchase Album?</h3>

        <p>Your download will begin immediately on your mobile device when you purchase.</p> <a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini">Buy: $10.99</a>
 <a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">Cancel</a>

    </div>
    <div data-role="content">
        <div data-role="collapsible-set">
            <div data-role="collapsible" data-theme='b' data-content-theme='b' data-collapsed='true'>
                 <h3>Title - one
	<a class="click_action ui-btn ui-btn-b ui-btn-icon-notext ui-icon-delete" data-enhanced="true"  data-rel="back">New Page HTML</a>
    </h3>

                <ul data-role="listview" data-theme="b">
                    <li>test 1</li>
                    <li>test 2</li>
                </ul>
            </div>
            <div data-role="collapsible" data-theme='a' data-content-theme='a' data-collapsed='true'>
                 <h3>Title - two
	<a class="click_action ui-btn ui-btn-a ui-btn-icon-notext ui-icon-gear" data-enhanced="true"  data-rel="back">New Page HTML</a>
    </h3>

                <ul data-role="listview">
                    <li>test 1</li>
                    <li>test 2</li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

.ui-collapsible-inset .ui-collapsible-heading .ui-btn.click_action {
    position: absolute;
    top: 0;
    right: 1px;
    height: 100%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    border-width: 0px;
    margin-top: -1px;
    margin-bottom: -1px;
}

JavaScript

$(".click_action").on("click", function (e) {
    $('#purchase').popup('open', {
        transition: "pop",
        positionTo: "window",
    });
    return false;
});