JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="container">

            <header>
                <h1 id="headline">Hello, please help</h1>
            </header>

        </div>

CSS

.container{
    width: 100%;
    padding-bottom: 40px;
    min-width: 590px;
    position: relative;
    text-align: center;
}
.container > header{
    padding: 20px;
    margin: 0px 20px 20px 20px;
    position: relative;
    display: block;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: center;
    font-family: 'Montserrat', Impact, Arial, sans-serif;
    text-transform: uppercase;
}
.container > header h1{
    font-size: 48px;
    line-height: 70px;
    position: relative;
    font-weight: 100;
    letter-spacing: 2px;
    color: #D26A44;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1), 0 0 1px #D26A44;
    padding: 0px 0px 60px 0px;

}
#headline{
    margin-top: 80px;
    margin-left:30px;
}

JavaScript

var injector = function(t, splitter, klass, after){
    var a = t.get('text').split(splitter), inject = '';

    if (!a.length) return;

    a.each(function(item, i) {
        inject += '<span class="' + klass + (i + 1) + '">' + item + '</span>' + after;
    });

    t.set('html', inject);
};

var methods = {
    init: function() {
        return injector(this, '', 'char', '');
    },

    words: function() {
        return injector(this, ' ', 'word', ' ');
    },

    lines : function() {
        return injector(this, /<br[^>]*>/gi, 'line', '');
    },

    custom: function(options) {
        options = options || {};
        return injector(this, options.split || '', 'group', options.after || '');
    }
};

Element.implement('lettering', function(method, options){
    if (method && methods[method])
        methods[method].apply(this, Array.from(options));
    else if (method === 'letters' || !method )
        methods.init.apply(this);

    return this;
});




/**
 * Arctext.js
 * A jQuery plugin for curved text
 * http://www.codrops.com
 *
 * Copyright 2011, Pedro Botelho / Codrops
 * Free to use under the MIT license.
 *
 * Date: Mon Jan 23 2012
 */

(function(){

var letters;
    Element.implement('arctext', function(options){
        var _self = this;
        var options = $merge({
        radius    : 0,     // the minimum value allowed is half of the word length. if set to -1, the word will be straight.
        dir        : 1,    // 1: curve is down, -1: curve is up.
        rotate    : true,    // if true each letter will be rotated.
        fitText    : false // if you wanna try out the fitText plugin (http://fittextjs.com/) set this to true. Don't forget
        }, options);
        //$(window).addEvent('resize', updatePositions);

var dtWord, dtArc, dtArcBase;

var applyLettering = function(el) {
            el.lettering();
            letters = el.getElements('span').setStyle('display', 'inline-block');
            console.log(letters);
    };
var...