JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<ul id="userListContainer" class="photo-block"></ul>

<div class="popup-overlay">
  <div class="popup">
    <div class="big-photo"></div>
    <div class="user-info">
      <div class="user-name"></div>
      <div class="user-age"></div>
      <div class="user-gender"></div>
      <div class="user-location"></div>
    </div>
    <div class="title">Similar profiles</div>
    <ul id="userSimilarListContainer" class="photo-block">
      <li class="photo-item"></li>
    </ul>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}

ul {
  list-style: none;
}

.photo-block {
  position: relative;
}

.photo-item {
  display: inline-block;
  width: 72px;
  min-height: 72px;
  margin: 0 10px 10px 0;
  vertical-align: top;
  text-transform: capitalize;
}


/* popup */
.popup-overlay {
    display: none;
    background: rgba(0,0,0,0.7);
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}
.popup {
    padding: 20px;
    background: #fff;
    /*width: 300px;*/
    width: 90%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.big-photo {
  float: left;
  margin: 0 30px 30px 0;
}
.user-info {
  
}
.user-name,
.user-location {
  text-transform: capitalize;
}
.title {
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  margin: 0 0 15px;
  clear: both;
}

.popup .photo-item img {
  border-radius: 50%;
}
.popup .photo-item {
  font-size: 12px;
}

JavaScript

var usersCollection = [];

function getAge(dateString) {
  var day = parseInt(dateString.substring(8, 10));
  var month = parseInt(dateString.substring(5, 7));
  var year = parseInt(dateString.substring(0, 4));

  var today = new Date();
  var birthDate = new Date(year, month - 1, day);
  var age = today.getFullYear() - birthDate.getFullYear();
  var m = today.getMonth() - birthDate.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }

  return age;
}


function getUserDetails(data) {
    var resultArray = [];

    data.results.forEach(function(user, i) {
      resultArray.push([
      	'<img src="' + user.picture.medium + '"/>',
    		'<img src="' + user.picture.large + '"/>',
    		user.name.first + ' ' + user.name.last,
      	getAge(user.dob),
      	user.gender,
        user.location.city + ', ' + user.location.state
      ]);
    });
    
    return resultArray;
}

/**
 * Insert user medium picture for all users
 */
function drawMediumPictureForAllUsers() {
	  var html = '';

    usersCollection.forEach(function(item) {
      html += '<li class="photo-item">' + item[0] + '</li>'
    });
    
    $('#userListContainer').html(html);
}

function drawUserDetails(index) {
	var user = {
  	bigPhoto: usersCollection[index][1],
		name: usersCollection[index][2],
    age: usersCollection[index][3],
    gender: usersCollection[index][4],
    location: usersCollection[index][5]
	}
      
  $('.big-photo').html(user.bigPhoto);
  $('.user-name').text('Name: ' + user.name);
  $('.user-age').text('Age: ' + user.age);
  $('.user-gender').text('Gender: ' + user.gender);
  $('.user-location').text('Location: ' + user.location);
}

function drawUserSimilarProfiles(index) {
	var userAge = usersCollection[index][3];
  var minAge = userAge - 2;
  var maxAge = userAge + 2;
  var html = '';
  
  usersCollection.forEach(function(user, i) {
    var photo = user[0];
    var name = user[2];
    var age = user[3];
                
    if...