JSFiddle - React, Tailwind, and code Playground

by Dano007

HTML

<script src="http://www.parsecdn.com/js/parse-1.2.17.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <div class="go" id="container"></div>

<div class="content">
    <!---Pop up box with info about the badge and options for user to complete-->
    <div id="modal">
        <div id="heading">You are about to share some kudosoo!</div>
        <div>
            <div id="badgeselect"></div>
            <br>
              
            <br> <a id="send" class="button green close">
                                    <img src="images/tick.png">Confirm</a>
 <a href="http://kudosoo.com/selectbadge.html" class="button red close">
                                    <img src="images/cross.png">Cancel</a>

            <br>
            <br>
        </div>
    </div>
    <!---Pop up box stuff ends-->

CSS

.button {
	width:138px;
	height:45px;

	font-size:13px;
	font-weight:bold;
	line-height:33px;

	color:#fff;
	text-shadow:0px 1px 0px rgba(0,0,0,.2);

	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;

	-webkit-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.5),
		0px 1px 2px rgba(0,0,0,.3);
	-moz-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.5),
		0px 1px 2px rgba(0,0,0,.3);
	box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.5),
		0px 1px 2px rgba(0,0,0,.3);

	float:left;
}
.button img { 
	float:left;
	width:33px;
	height:33px;
}

.button.green {
	background: -webkit-linear-gradient(top,  rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
	background: -moz-linear-gradient(top,  rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
	background: -o-linear-gradient(top,  rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
	background: -ms-linear-gradient(top,  rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
	background: linear-gradient(top,  rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aad44f', endColorstr='#609d29',GradientType=0 );

	border:1px solid #5b8821;

	margin:0 5px 0 35px;
}

JavaScript

Parse.initialize("79tphN5KrDXdjJnAmehgBHgOjgE2dLGTvEPR9pEJ", "9lblofQNZlypAtveU4i4IzEpaOqtBgMcmuU1AE6Y");


                        var GlobalBadges = Parse.Object.extend("Global_Badges");
                        var query = new Parse.Query(GlobalBadges);
                        query.exists("Global_Badges_img");
                        query.find({
                            success: function (results) {
                                var friends = [];
                                for (var i = 0; i < results.length; i++) {
                                    friends.push({
                                        imageURL: results[i].get('Global_Badges_img'),
                                        friendRequestId: results[i].id,
                                        username: results[i].get('BadgeName')
                                    });
                                }

                                // TW: replaced dynamic HTML generation with wrapper DIV that contains IMG and name DIV
                                _.each(friends, function (item) {
                                    // using a wrapper so the user can click the pic or the name
                                    var wrapper = $('<div class="wrapper" data-friend-request-id="' + item.friendRequestId + '"></div>');
                                    wrapper.append('<img class="images" src="' + item.imageURL + '" />');
                                    wrapper.append('<div>' + item.username + '</div>');
                                    $('#container').append(wrapper);
                                });


                            },
                            error: function (error) {
                                alert("Error: " + error.code + " " + error.message);
                            }
                        });

                        ///SECTION 2 -Click/Select friend image to be captured and used with section 3//////////

                        // set up...