JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="main-cont">
  <div class="userpic userpic-1">

  </div>
  <div class="userpic userpic-2" data-userpic="1">
    +


  </div>
  <div class="userpic userpic-3" data-userpic="2">
    +
  </div>
  <div class="userpic userpic-4">

  </div>
  <div class="userpic userpic-5" data-userpic="3">
    +
  </div>
  <div class="userpic userpic-6" data-userpic="4">
    +
  </div>
  <div class="userpic userpic-7">

  </div>
  <div class="userpic userpic-8">

  </div>
  <div class="userpic userpic-9" data-userpic="5">
    +
  </div>
  <div class="userpic userpic-10">

  </div>
  <div class="userpic userpic-11" data-userpic="6">
    +
  </div>
</div>

<div class="popup-userpic">
  <div class="close">X</div>
  <div data-userpic="1">

    Sophie 11
    25 years

    What is love? Love is not a feeling. Love is a decision that we make.

    Chat with Sophie
  </div>
  <div data-userpic="2">
    Sophie 22
    25 years

    What is love? Love is not a feeling. Love is a decision that we make.

    Chat with Sophie
  </div>
  <div data-userpic="3">
    Sophie 33
    25 years

    What is love? Love is not a feeling. Love is a decision that we make.

    Chat with Sophie
  </div>
  <div data-userpic="4">
    Sophie 44
    25 years

    What is love? Love is not a feeling. Love is a decision that we make.

    Chat with Sophie
  </div>
  <div data-userpic="5">
    Sophie 55
    25 years

    What is love? Love is not a feeling. Love is a decision that we make.

    Chat with Sophie
  </div>
  <div data-userpic="6">
    Sophie 66
    25 years

    What is love? Love is not a feeling. Love is a decision that we make.

    Chat with Sophie
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main-cont {
  position: relative;
}

.userpic {
  position: absolute;
  border-radius: 50%;
  background: no-repeat 50% 50%;
  background-size: cover;
}

.userpic-1 {
  width: 100px;
  height: 100px;
  left: 0px;
  top: 99px;

  /* tenderbang / primary */

  background: #DC113C;
  opacity: 0.3;
}

.userpic-2 {
  width: 120px;
  height: 120px;
  left: 40px;
  top: 53px;

  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRce1bRL9ki3Sq8os_mebqXXVIERWz95ktXhA&usqp=CAU);
}

.userpic-3 {
  width: 80px;
  height: 80px;
  left: 106px;
  top: 213px;

  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRce1bRL9ki3Sq8os_mebqXXVIERWz95ktXhA&usqp=CAU);
}

.userpic-4 {
  width: 40px;
  height: 40px;
  left: 246px;
  top: 126px;

  /* tenderbang / primary */

  background: #DC113C;
  opacity: 0.3;

}

.userpic-5 {
  width: 80px;
  height: 80px;
  left: 206px;
  top: 145px;

  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRce1bRL9ki3Sq8os_mebqXXVIERWz95ktXhA&usqp=CAU);
}

.userpic-6 {
  width: 120px;
  height: 120px;
  left: 260px;
  top: 0px;

  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRce1bRL9ki3Sq8os_mebqXXVIERWz95ktXhA&usqp=CAU);
}

.userpic-7 {
  width: 100px;
  height: 100px;
  left: 370px;
  top: 175px;

  /* tenderbang / primary */

  background: #DC113C;
  opacity: 0.3;
}

.userpic-8 {
  width: 40px;
  height: 40px;
  left: 379px;
  top: 155px;

  /* tenderbang / primary */

  background: #DC113C;
  opacity: 0.3;
}

.userpic-9 {



  width: 120px;
  height: 120px;
  left: 306px;
  top: 184px;

  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRce1bRL9ki3Sq8os_mebqXXVIERWz95ktXhA&usqp=CAU);
}

.userpic-10 {
  width: 10px;
  height: 10px;
  left: 427px;
  top: 50px;

  /* tenderbang / primary */

  background: #DC113C;
  opacity: 0.3;
}

.userpic-11 {



 ...

JavaScript

// document.querySelectorAll('[data-js="someFooElement"]')
let paginationItems = document.querySelectorAll('.userpic');
let attributeName = 'data-userpic';

[].forEach.call(paginationItems, function(el) {
  el.addEventListener('click', function() {

    var sections = document.querySelectorAll('.popup-userpic div');
    for (i = 0; i < sections.length; i++) {
      sections[i].classList.remove('is-show');
    }


    var selectedItem = this.getAttribute(attributeName);

    document.querySelector('.popup-userpic [data-userpic="' + selectedItem + '"]').classList.toggle('is-show');

    document.querySelector('.close').classList.toggle('is-show');



    /*var id = this.dataset.subject;
        		document.querySelector('#' + id).classList.toggle('active'); */
  });
});

document.querySelector('.close').addEventListener('click', function() {
  var sections = document.querySelectorAll('.popup-userpic div');
  for (i = 0; i < sections.length; i++) {
    sections[i].classList.remove('is-show');
  }
});