JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div id="huge">
<div id="big-h">
    <div id="h1">
    <a href="http://beta.humanreviews.me/aidanpraid" title="aidanpraid   — C# developer"></a><a href="http://beta.humanreviews.me/kokareff" title="Роман Кокарев  — PHP/Frontend Developer"></a><a href="http://beta.humanreviews.me/askent" title="Vlad Volkov  — PHP Architect"></a><a href="http://beta.humanreviews.me/medgat" title="medgat  "></a><a href="http://beta.humanreviews.me/mutogen" title="mutogen  "></a><a href="http://beta.humanreviews.me/aidanpraid" title="aidanpraid   — C# developer"></a><a href="http://beta.humanreviews.me/shushlek" title="Игорь Андрющенко "></a><a href="http://beta.humanreviews.me/ruhomi" title="ruhomi  "></a><a href="http://beta.humanreviews.me/vadim" title="vadim   — QA Engineer"></a><a href="http://beta.humanreviews.me/alexzhukoff86" title="alexzhukoff86 Zhukov "></a><a href="http://beta.humanreviews.me/ilzul" title="ilzul  "></a><a href="http://beta.humanreviews.me/crchemist" title="crchemist  "></a><a href="http://beta.humanreviews.me/meliborn" title="meliborn  "></a><a href="http://beta.humanreviews.me/phpfad" title="Егор Фадеев  — PHP разработчик"></a><a href="http://beta.humanreviews.me/robotex" title="robotex  "></a><a href="http://beta.humanreviews.me/simon" title="simon  "></a><a href="http://beta.humanreviews.me/erwing" title="erwing  "></a><a href="http://beta.humanreviews.me/Fastlap" title="Fastlap  "></a><a href="http://beta.humanreviews.me/denges" title="denges  "></a><a href="http://beta.humanreviews.me/shushlek" title="Игорь Андрющенко "></a><a href="http://beta.humanreviews.me/tarantul" title="tarantul  "></a><a href="http://beta.humanreviews.me/timurkhamitov" title="Тимур Хамитов  — PHP developer"></a><a href="http://beta.humanreviews.me/natali" title="natali  "></a><a href="http://beta.humanreviews.me/sokol8" title="sokol8  "></a><a href="http://beta.humanreviews.me/tester" title="tester  "></a><a href="http://beta.humanreviews.me/ashalaenko" title="ashalaenko ...

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