JSFiddle - React, Tailwind, and code Playground

by Sunny Jain

HTML

<body>
        <section>
            <header></header>
            <main></main>
        </section>
    </body>

CSS

body {
	padding: 0;
	margin: 0;
}

html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

main .wrapper {
	padding-left:3px;
	display: flex;
    flex-wrap:wrap;
    flex-direction:row;
}

.user-container {
	position: relative;
	padding: 5px 8px;
	border: 1px solid lightgray;
	float: left;
	width: 33.33%;
	margin-left: -1px;
    margin-top: -1px;
}


.user-img {
	border-radius: 50%;
	margin-left: 2px;
	vertical-align: middle;
	margin-right: 7px; 	
}

.user-name{
	display:inline-block; 
	vertical-align: middle;
}

.user-lastname, .modal-lastname {
	text-transform: uppercase;
	color: gray;
	font-family: "Times New Roman", Courier, sans-serif;
		
}

.user-firstname, .modal-firstname {
	text-transform: capitalize;
	color: gray;
	font-family: "Times New Roman", Courier, sans-serif;
	
}

.modal-name {
	text-align: center;
	padding: 10px;
	display: block;
}

.sort-label {
	color: gray;
	font-size: 1.2em;
	position: absolute;
	right: 50px;
	top: 30px;
}


.sortasc, .sortdes {
	text-decoration: none;
	height: 30px;
	margin-left: 10px;
	color: gray;
}

.user-modal {
	position: relative;
	left: 30px;
	height: 20%;
	width: 30%;
	border: 2px solid lightgray;
	border-radius: 7px;
	margin-top: 0;
	background: linear-gradient(180deg, white, 90%, lightgray);
	box-shadow: 2px -5px 5px lightgray;
	z-index: 1;
}

.modal-img {
	border: 2px solid lightgray;
	border-radius: 50%;
	display: block;
	margin: auto;
	margin-top: 10px;
}

	
.model-label {
	display: inline-block;
	color: gray;
	margin-left: 20%;
	font-family: Calibri, "Times New Roman", sans-serif;
	font-weight: bold;
	text-shadow: 1px 1px lightgray;
	min-width: 50px;
}


.user-info {
	line-height: 1.5em;
	text-align: left;
}


.user-badge {
	position: absolute;
	left: -80px; 
	top: 100px; 
	height: 60px; 
	width: 190px; 
	border: 1px solid lightgray;
	border-radius: 3px; 
	background: linear-gradient(180deg, coral, 50%, orangered);
	box-shadow: 2px 2px 3px lightgray;
	padding: 7px 12px;
	transform:...

JavaScript

$(document).ready(function(){
    $.getJSON("https://api.randomuser.me/?results=25", function(data){

        var heading = $("header").append("<h1>Contact List</h1>").css({"text-align":"center", "color":"gray", "text-shadow":"1px 1px lightgray"});

        var sortlabel = $("<label class='sort-label'>sort</label>").appendTo(heading).addClass("sort-label");
        var sortasc = $("<a href='#' class='sortasc' id='btn-asc'>&uarr;</a>").appendTo(sortlabel);
        var sortdes = $("<a href='#' class='sortdes' id='btn-des'>&darr;</a>").appendTo(sortlabel);

        var dataLength = data.results.length;   

        var wrapper = $("<div class='wrapper'></div>").appendTo("main");
		



        for(var i=0; i<dataLength; i++)
        {
            /*User data/div container */
            var modalId = "mod-"+i;
            user = $("<div class='user-container' data-mod-id='"+modalId+"'/>").appendTo(wrapper);          
            img = $("<img class='user-img' src='" + data.results[i].picture.thumbnail + "'/>").appendTo(user);
            userName = $("<span />").appendTo(user).addClass('user-name');
            lastName = $("<strong>" + data.results[i].name.last + ", " + "</strong>").appendTo(userName).addClass('user-lastname'); 
            firstName = $("<strong>" + data.results[i].name.first + "</strong>").appendTo(userName).addClass('user-firstname'); 




            /*User Modal or Pop-up starts here*/            

            userModal = $("<div id='"+modalId+"' class='user-modal' />").appendTo(wrapper);
			closeBtn = $("<a href='#' class='close-btn'>&times;</a>").appendTo(userModal);
            modalImg = $("<img class='modal-img' src='" + data.results[i].picture.large + "'/>").appendTo(userModal).addClass('modal-img');
            userBadge = $("<div class='user-badge' />").appendTo(userModal);
			badgeName = $("<p class='badge-name'>username</p><p class='badge-name-value'>" + data.results[i].login.username + "</p>").appendTo(userBadge); 
           ...