JSFiddle - React, Tailwind, and code Playground

Logo/Name Magic

by Jennifer Perrin

HTML

<nav>
  <ul class="ripple">
    <li>J</li>
    <li>e</li>
    <li>n</li>
    <li>n</li>
    <li>i</li>
    <li>f</li>
    <li>e</li>
    <li>r</li>
  </ul>  
</nav>

<div class="contain">
  <p>Hover my name for some magic!</p>
</div>

CSS

*:not(body){
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  backface-visbility: hidden;
}

body{
  margin:0;
  background:#f5f5f5;
  color:#505050;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-size:34px;
}

nav{
  background:#333;
  height:80px;
  line-height:90px;
}

.contain{
  max-width:800px;
  margin:50px auto;
  text-align:center;
}

/* the good stuff: */
ul.ripple{
  float:left;
  overflow:hidden;
  margin:0;
  padding-left:50px;
  font-size:38px;
  font-weight:600;
}

ul.ripple li{
  float:left;
  list-style:none;
  padding:0 1px;
  color:white;
  text-shadow:1px 1px 3px rgba(0,0,0,.25);
}

ul.ripple li:nth-child(2){
  -webkit-animation-delay:50ms;
  -moz-animation-delay:50ms;
  animation-delay:50ms;
}

ul.ripple li:nth-child(3){
  -webkit-animation-delay:100ms;
  -moz-animation-delay:100ms;
  animation-delay:100ms;
}

ul.ripple li:nth-child(4){
  -webkit-animation-delay:150ms;
  -moz-animation-delay:150ms;
  animation-delay:150ms;
}
/* that green bar */
ul.ripple li:nth-child(4):before{
  position:absolute;
  bottom:20px;
  left:-5%;
  display:block;
  content:'';
  height:5px;
  width:110%;
  background:#bada55;
  border-radius:2px;
  box-shadow:1px 1px 3px rgba(0,0,0,.25);
}

ul.ripple li:nth-child(5){
  -webkit-animation-delay:200ms;
  -moz-animation-delay:200ms;
  animation-delay:200ms;
  color:#64B9E6;
}

ul.ripple li:nth-child(6){
  -webkit-animation-delay:250ms;
  -moz-animation-delay:250ms;
  animation-delay:250ms;
  color:#64B9E6;
}

ul.ripple li:nth-child(7){
  -webkit-animation-delay:300ms;
  -moz-animation-delay:300ms;
  animation-delay:300ms;
  color:#64B9E6;
}

ul.ripple li:nth-child(8){
  -webkit-animation-delay:350ms;
  -moz-animation-delay:350ms;
...