JSFiddle - React, Tailwind, and code Playground

Pixel Heart small

by Jennifer Perrin

HTML

<div id="wrapper">
        <ul class="first">
            <li></li>
            <li></li>
            <li class="r1"></li>
            <li class="r1"></li>
            <li class="r1"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        
        <ul>
            <li></li>
            <li class="r2"></li>
            <li class="r2"></li>
            <li class="r2"></li>
            <li class="r2"></li>
            <li class="r2"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        
        <ul>
            <li class="r3"></li>
            <li class="r3"></li>
            <li class="r3"></li>
            <li class="r3"></li>
            <li class="r3"></li>
            <li class="r3"></li>
            <li class="r3"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        
        <ul>
            <li class="r4"></li>
            <li class="r4"></li>
            <li class="r4"></li>
            <li class="r4"></li>
            <li class="r4"></li>
            <li class="r4"></li>
            <li class="r4"></li>
            <li class="r4"></li>
            <li></li>
            <li></li>
        </ul>
        
        <ul>
            <li></li>
            <li class="r5"></li>
            <li class="r5"></li>
            <li class="r5"></li>
            <li class="r5"></li>
            <li class="r5"></li>
            <li class="r5"></li>
            <li class="r5"></li>
            <li class="r5"></li>
            <li></li>
        </ul>
        
        <ul>
            <li></li>
            <li></li>
            <li class="r6"></li>
            <li class="r6"></li>
            <li class="r6"></li>
            <li class="r6"></li>
            <li class="r6"></li>
            <li class="r6"></li>
            <li class="r6"></li>
            <li class="r6"></li>
        </ul>
       ...

CSS

* {
    margin:0;
    padding:0;
}

body {
    margin:50px;
    padding:0;
    background:#000;
}

#wrapper{
    width:118px;
    height:80px;
    position:absolute;
}

ul {
    list-style:none;
    display:inline-block;
}

ul li {
    width:6px;
    height:6px;
    margin:1px -1px;
    background:#000;
}
    ul.first li { margin-left:1px }

ul li.r1  { background:#c13a20 }
ul li.r2  { background:#c13a20 }
ul li.r3  { background:#912819 }
ul li.r4  { background:#d8de1d }
ul li.r5  { background:#c0d624 }
ul li.r6  { background:#a2cd41 }
ul li.r7  { background:#bfdd99 }
ul li.r8  { background:#7bc694 }
ul li.r9  { background:#2ab3a9 }
ul li.r10 { background:#197d9b }
ul li.r11 { background:#0e3f76 }