JSFiddle - React, Tailwind, and code Playground

by Sunny Jain

HTML

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

CSS

body {
	padding: 0;
	margin: 0;
}


.user-container {
	position: relative;
	padding: 2px;
	border: 2px solid lightgray;
	margin-right: -17px;
	
}

.user-img {
	border-radius: 50%;
	margin-left: 2px;
}


.user-lastname, .modal-lastname {
	text-transform: uppercase;
	margin-left: 7px;
	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;
}


.unsort, .sortasc, .sortdesc {
	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;
}

.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;
}


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


.user-badge {
	position: absolute;
	left: -20px;
	top: 25px;
	height: 45%;
	width: 50px;
	border: 1px solid lightgray;
	border-radius: 2px;
	background: linear-gradient(180deg, coral, 50%, orangered);
	box-shadow: 2px 2px 3px lightgray;
}

.badge-name {
	transform: rotate(90deg);
	position: relative;
	top: 70px;
	left: 20px;
	font-weight: bold;
	text-shadow: 1px 1px lightgray;
}

.badge-name-value {
	transform: rotate(90deg);
	position: absolute;
	top: 65px;
	left: -20px;
	color: #F2F2F2;
	text-shadow: 1px 1px lightgray;
}

.close-btn {
	position: absolute;
	right: 25px;
	top: 5px;
	color: gray;
	text-decoration:...

JavaScript

$(document).ready(function(){
	$.getJSON("https://api.randomuser.me/?results=2", 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 unsort = $("<a href='#' class='unsort'>&#8597;</a>").appendTo(sortlabel);
		var sortasc = $("<a href='#' class='sortasc'>&uarr;</a>").appendTo(sortlabel);
		var sortdesc = $("<a href='#' class='sortdesc'>&darr;</a>").appendTo(sortlabel);
		
		var dataLength = data.results.length;	
		
		var wrapper = $("<div class='wrapper'></div>").appendTo("main");
		//css({"column-count": "3", "column-fill":"balance"}); 
		
		
		for(var i=0; i<dataLength; i++)
		{
			/*User data/div container */
			
			user = $("<div class='user-container'/>").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'); 
			closeBtn = $("<a href='#' class='close-btn'>&times;</a>").appendTo(user);
			
			
			
			/*User Modal or Pop-up starts here*/			
			
			userModal = $("<div class='user-modal' />").appendTo(wrapper).addClass('user-modal');
			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); 
			modalName = $("<div/>").appendTo(userModal).addClass('modal-name');
			modalLastName = $("<strong>"...