JSFiddle - React, Tailwind, and code Playground

by Umar

HTML

<link href="http://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
<svg>
<defs>  
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgba(255,255,255,0);stop-opacity:1" />
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" >
        <animate 
          attributeName="offset" 
          dur="2s"
          from="-20%"
          to="120%"
          repeatCount="indefinite"/>
      </stop>
      <stop offset="100%" style="stop-color:rgba(255,255,255,0);stop-opacity:1" />
    </linearGradient>

    </defs>
    <text x="0" y="80" font-size="72" font-weight="100" fill="rgba(255,255,255,0.2)" stroke="none">Shimmer</text>
    <text x="0" y="80" font-size="72" font-weight="100" fill="url(#grad1)" stroke="none">Shimmer
        <animate attributeType="CSS" attributeName="opacity" values="0; 1; 0" dur="2s" repeatCount="indefinite" />
    </text>  
</svg>

CSS

html {
    background: #1c2332 url("https://dl.dropboxusercontent.com/u/6037571/Temp/index.png");
    font-family: 'Lato', sans-serif;
    font-weight: 100;
    text-align: center;
    padding-top: 50px;
}