JSFiddle - React, Tailwind, and code Playground

by Dano007

HTML

<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.17.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js" charset="utf-8"></script>
<!--Displays a blank no user image on the page if no matches are found in the parse database or displays an image of the user if a match is found-->

                <div id="container">

                    <img style="display:none" src="/img/no-user.png" id="no_user" alt="No user found" class="BadgeImgOutline responsive-image">

                    <div id="userimgs" class="responsive-image"></div> 
    
                </div>

                <div id="container"  class="container no-bottom">
                <!---List of connected friends is generated from script  below, the different divs split the results depending which button is clicked-->
        <div id="containerFriends"></div>
        <div id="containerFriendsPending"></div>
        <div id="containerFriendsConnected"></div>
        <div id="containerFriendsProfile"></div>


          
          
                </div>      
                            
        
  <!--Displays friends uploaded badges after the user clicks on their profile picture-->

                <div id="container">
                <div id="badgeimgs"  ></div>  
                 </div>



<script type="text/javascript">
    //////////////////////Logs user in//////////////////

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

    Parse.User.logIn("dave", "delvedia", {
        success: function(user) {
            console.log("Logged in!");
        }
    });

    //////////////////////Filter option 1//////////////////

    var currentUser = Parse.User.current();
    var FriendRequest = Parse.Object.extend("FriendRequest");

    var query = new Parse.Query(FriendRequest);
    query.include('toUser');
    query.include('SentTo');
    query.include("myBadge");
   ...