JSFiddle - React, Tailwind, and code Playground

by Manuel Camacho

HTML

<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<div id='stars'></div>
<div id='stars2'></div>
<div id='stars3'></div>
<div id='title'>
  <span>
    PURE CSS
  </span>
  <br>
  <span>
    PARALLAX PIXEL STARS
  </span>
</div>
<br/><br/><br/><br/><br/>



<h1 class="strip">
  Hola!<br>
  ¿Que puedo hacer por ti?
<h1>

CSS

html {
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
}

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 278px 481px #FFF , 1155px 974px #FFF , 743px 1766px #FFF , 1972px 1827px #FFF , 411px 103px #FFF , 484px 1311px #FFF , 1137px 1809px #FFF , 1174px 1786px #FFF , 225px 1641px #FFF , 803px 1616px #FFF , 1065px 742px #FFF , 1384px 1506px #FFF , 382px 377px #FFF , 1222px 1681px #FFF , 1354px 1176px #FFF , 519px 1331px #FFF , 1606px 1993px #FFF , 451px 159px #FFF , 50px 1683px #FFF , 157px 1817px #FFF , 1692px 1766px #FFF , 1322px 201px #FFF , 728px 999px #FFF , 696px 1595px #FFF , 115px 181px #FFF , 1749px 433px #FFF , 973px 1481px #FFF , 1256px 1246px #FFF , 1412px 1112px #FFF , 1214px 143px #FFF , 289px 883px #FFF , 668px 1275px #FFF , 993px 1017px #FFF , 1253px 1368px #FFF , 1325px 1825px #FFF , 1564px 448px #FFF , 154px 884px #FFF , 174px 317px #FFF , 896px 1658px #FFF , 1633px 1416px #FFF , 850px 104px #FFF , 915px 1974px #FFF , 1315px 1152px #FFF , 1119px 1703px #FFF , 1686px 105px #FFF , 132px 632px #FFF , 286px 1836px #FFF , 929px 761px #FFF , 1946px 1976px #FFF , 596px 81px #FFF , 526px 733px #FFF , 774px 1558px #FFF , 1191px 1430px #FFF , 490px 257px #FFF , 835px 1610px #FFF , 971px 959px #FFF , 1031px 1023px #FFF , 91px 1161px #FFF , 633px 983px #FFF , 1051px 1274px #FFF , 869px 1331px #FFF , 119px 918px #FFF , 1091px 696px #FFF , 237px 901px #FFF , 138px 716px #FFF , 312px 1990px #FFF , 1534px 299px #FFF , 711px 869px #FFF , 1785px 525px #FFF , 1529px 755px #FFF , 1176px 246px #FFF , 795px 1289px #FFF , 600px 1265px #FFF , 1016px 484px #FFF , 443px 1310px #FFF , 1792px 715px #FFF , 1809px 9px #FFF , 747px 14px #FFF , 301px 1472px #FFF , 34px 1973px #FFF , 1571px 1035px #FFF , 1668px 1483px #FFF , 1793px 1217px #FFF , 673px 1298px #FFF , 551px 1141px #FFF , 73px 1130px #FFF , 1442px 523px #FFF , 1800px 373px #FFF , 997px 1104px #FFF , 1853px 728px #FFF ,...

JavaScript

$('.strip').each(function(){
  var $t = $(this),
      rows = $.trim($t.html()).split('<br>');

  $t.html('');

  $.each(rows, function(i, val){
    $('<span class="row"></span>').appendTo($t);

    var letters = $.trim(val).split('');

    $.each(letters, function(j, v){
      v = (v == ' ') ? '&nbsp;' : v;
      $('<span>' + $.trim(v) + '</span>').appendTo($('.row:last', $t));
    });

  });
});

$('body').click(function(){
  for (i = 0; i < $('.strip span').length; i++) {
    (function(ind) {
      setTimeout(function(){
          $('.strip span:not(".row")').eq(ind).toggleClass('animate');
      }, ind * 15);
    })(i);
  }
}).click();