JSFiddle - React, Tailwind, and code Playground

by beshanoe

HTML

<div id="wrapper">
    <div id="header">
        <div class="logo">
            <h1>Идеальная служба доставки</h1>
            <h1>для интернет магазинов день в день!</h1>
        </div>
        <div class='info'>
            <span>Закажите пробную доставку <a href="#"><strong>через форму на сайте</strong></a> или по телефону <strong>+7 495 215-11-69</strong>
        </div>
    </div>
    <div id="content">
        <h3 class="centered">Почему Достависта?</h3>
        <div class="reason-block">
            <div class="question">
                Клиент требует доставить срочно?
            </div>
            <div class="answer">
                Мы доставляем за 2-3 часа по Москве. Или когда будет удобно.
            </div>
        </div>
        <div class="reason-block">
            <div class="question">
                Заболел свой курьер?
            </div>
            <div class="answer">
                Все курьеры уже заняты и некому доставить новый заказ? В Достависте Вы всегда сможете заказать курьера на замену. В течение 1-2 часов курьер будет у Вас. В любое время суток. Без бюроркатии и выматывающих звонков диспетчеру. Просто заполните форму заказа!
            </div>
        </div>
        <div class="reason-block">
            <div class="question">
                Заказов не так много, чтобы держать курьера на зарплате?
            </div>
            <div class="answer">
                Мы поможем сэкономить! Нам неважно сколько заказов вы делаете — раз в год или 1000 заказов — в месяц. Условия неизменны. Вы важны для нас независимо от количества заказов.
            </div>
        </div>
        <div class="reason-block">
            <div class="question">
                Хотите протестировать новую рыночную нишу без лишних затрат и бюрократии?
            </div>
            <div class="answer">
                Это проще, чем вы подумали! Просто покажите нам поставщиков, а наш курьер выкупит у них товар за свои собственные деньги и получит деньги с...

CSS

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    background-color: #FAFAFA;
}

h1 {
    font-size: 2em;
    font-weight: bold;
}

h3 {
    font-size: 1.2em;
    font-weight: bold;
}

strong {
    font-weight: bold;
}

a {
    color: #D96AA4;
}

.centered {
    text-align: center;
}

.separator {
    border-top: solid 1px #eee;
    margin-top: 3em;
    margin-bottom: 2em;
}

.clear {
    clear: both;
    visibility: hidden;
}

#wrapper {
    margin: 20px auto;
    width: 96%;
    box-shadow: 0px 0px 3px 1px #aaa;
    border-radius: 1px;
}

#header .logo {
    text-align: center;
    padding: 1.5em 1em;
    background-image: url("http://s14.postimg.org/9qe0gtksx/background.png");
    background-position: center center;
}

#header .logo h1 {
    color: #FFF;
    line-height: 1.4em;
    text-shadow: 0.02em 0.03em 1px  #333;
}

#header .info {
   ...

JavaScript

;(function(){

    function textNodesUnder(el){
        var n,
            a = [],
            walk = document.createTreeWalker(el,NodeFilter.SHOW_TEXT, null, false);
        while (n = walk.nextNode()) {
            a.push(n);
        }
        return a;
    }

    function convertNodesToSpans(textNodes) {

        var currentParent, currentDocumentFragement;

        textNodes.forEach(function (textNode) {

            var text = textNode.textContent;

            if (currentParent !== textNode.parentNode) {
                if (currentParent) {
                    currentParent.appendChild(currentDocumentFragement);
                }
                currentParent = textNode.parentNode;
                currentDocumentFragement = document.createDocumentFragment();
            }

            text.split(' ')
                .filter(function (word) {
                    return typeof word !== 'undefined' && word !== '' && word !== '\n';
                })
                .map(function (word) {

                    var node = document.createElement('span');
                    node.innerText = word + ' ';
                    node.classList.add('word');
                    return node;

                })
                .forEach(function (span) {
                    currentDocumentFragement.appendChild(span);
                });

            textNode.parentNode.removeChild(textNode);

        });

    }

    convertNodesToSpans(textNodesUnder(document.body));

    window.addEventListener('click', function (e) {
        var el = e.target;
        if (el.tagName.toLowerCase() === 'span' && el.classList.contains('word')) {

            el.classList.add('leave');
            setTimeout(function () {

                el.parentNode.removeChild(el);

            }, 301);

        }
    });

})();