JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div id="huge">
<div id="big-h">
    <div id="h1">
    </div>
    <div id="h2"></div>
    <div id="h3"></div>
    
</div>
<div id="h4"></div>
</div>

CSS

body{
    background: #e2e2e2;
}

#huge{
    width: 360px;
    height: 382px;
    position: absolute;
    margin: auto;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

#big-h{
    width: 268px;
    height: 300px;    
    position: relative;
    margin: 0 auto;
    display: block;
}

#h1, #h3, #h2, #h4{
    width: 90px;
    height: 300px;
    background: #0085FF;
    position: absolute;
}

#h3{
    left: 168px;
}

#h2{
    width: 78px;
    height: 78px;
    left: 90px;
    top: 110px;
}

#h4{
    height: 60px;
    width: 100%;
    bottom: 0;
}

#huge a{
    display: inline-block;
    float: left;
    width: 30px;
    height: 30px;
    background: #34383e;
    opacity: 0.85;
}

#huge a:nth-of-type(3n){
    opacity: 0.25;
}

#huge a:nth-of-type(3n+2){
    opacity: 0.75;
}

#huge a:nth-of-type(7n){
    opacity: 0.7;
}

#huge a:nth-of-type(11n+1){
    opacity: 0.6;
}

#huge a:nth-of-type(9n+3){
    opacity: 0.5;
}

#huge a:nth-of-type(5n+13){
    opacity: 0.4;
}

#huge a:nth-of-type(5n+5){
    opacity: 0.3;
}

#h2 a{
    width: 39px;
    height: 39px;
}

#huge a:hover{
    background: #e2e2e2;
}

JavaScript

var x = [ { link: 'natali', name: 'natali ', profession: '' },
  { link: 'zvadim1593',
    name: 'zvadim1593 ',
    profession: '' },
  { link: 'abasarab', name: 'abasarab ', profession: '' },
  { link: 'dima', name: 'dima ', profession: '' },
  { link: 'splin', name: 'splin ', profession: '' },
  { link: 'busha', name: 'busha ', profession: '' },
  { link: 'sanya', name: 'sanya ', profession: '' },
  { link: 'mutogen', name: 'mutogen ', profession: '' },
  { link: 'gjo', name: 'gjo ', profession: '' },
  { link: 'rettpop', name: 'rettpop ', profession: '' },
  { link: 'garret', name: 'garret ', profession: '' },
  { link: 'vicul', name: 'vicul ', profession: '' },
  { link: 'xoxot', name: 'xoxot ', profession: '' },
  { link: 'igor',
    name: 'Иван Шутко',
    profession: 'middle php developer' },
  { link: 'abyr', name: 'abyr doe', profession: '' },
  { link: 'anastasia', name: 'anastasia ', profession: '' },
  { link: 'robotex', name: 'robotex ', profession: '' },
  { link: 'ruhomi', name: 'ruhomi ', profession: '' },
  { link: 'decibel', name: 'decibel ', profession: '' },
  { link: 'dankiv', name: 'dankiv ', profession: '' },
  { link: 'medgat', name: 'medgat ', profession: '' },
  { link: 'millerrock', name: 'millerrock ', profession: '' },
  { link: 'strelnitskaya', name: 'strelnitskaya ', profession: '' },
  { link: 'ashalaenko', name: 'ashalaenko ', profession: '' },
  { link: 'yaross', name: 'yaross ', profession: '' },
  { link: 'gastas', name: 'gastas ', profession: '' },
  { link: 'erwing', name: 'erwing ', profession: '' },
  { link: 'axik', name: 'axik ', profession: '' },
  { link: 'drup', name: 'drup ', profession: '' },
  { link: 'santik', name: 'santik ', profession: '' },
  { link: 'crchemist', name: 'crchemist ', profession: '' },
  { link: 'denges', name: 'denges ', profession: '' },
  { link: 'ghostwg', name: 'ghostwg ', profession: '' },
  { link: 'hard', name: 'Роберто Волков', profession: '' },
  { link: 'tester', name: 'tester ',...