JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="genelocklin">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<header roll="banner">
    <hgroup>
        <h1 class="fancy-lettering">Hello I'm Gene</h1>
        <h2>I Like The Internets</h2>
    </hgroup>
</header>

CSS

@font-face { 
    /* http://www.marcelomagalhaes.net/ */
    font-family: 'Folksolid';
    src:...

JavaScript

/* Lettering.JS 0.6.1 by Dave Rupert  - http://daverupert.com */
(function($){function injector(t,splitter,klass,after){var a=t.text().split(splitter),inject='';if(a.length){$(a).each(function(i,item){inject+='<span class="'+klass+(i+1)+'">'+item+'</span>'+after});t.empty().append(inject)}}var methods={init:function(){return this.each(function(){injector($(this),'','char','')})},words:function(){return this.each(function(){injector($(this),' ','word',' ')})},lines:function(){return this.each(function(){var r="eefec303079ad17405c889e092e105b0";injector($(this).children("br").replaceWith(r).end(),r,'line','')})}};$.fn.lettering=function(method){if(method&&methods[method]){return methods[method].apply(this,[].slice.call(arguments,1))}else if(method==='letters'||!method){return methods.init.apply(this,[].slice.call(arguments,0))}$.error('Method '+method+' does not exist on jQuery.lettering');return this}})(jQuery);

$(document).ready(function() {
 $("h1.fancy-lettering").lettering('words').children("span").lettering();
});

/* 

i really love this font from: http://www.marcelomagalhaes.net/

this only looks good on my mac. i've tested it, through parallels, on different windows browsers - 
and it looks like crap on all of them. 

unfortunately, since only about 7% of us can see how cool this is, this kind of stuff is just a hobby. fun though. 

*/