JSFiddle - React, Tailwind, and code Playground

by glebcha

HTML

<!--Вознаграждениея за пожертвование. / Rewards.-->
                            <div class="rewards">

                                <!--Список вознаграждений. / Rewards list.-->
                                <div class="rewardsList clearfix">
                                    <div class="item WAV" data-val="" data-range="32">
                                        <div class="image">
                                            <div class="icon"></div>
                                        </div>
                                        <p>
                                            WAV
                                        </p>
                                    </div>
                                    <div class="item MP3" data-val="" data-range="47">
                                        <div class="image">
                                            <div class="icon"></div>
                                        </div>
                                        <p>
                                            MP3
                                        </p>
                                    </div>
                                    <div class="item ALT" data-val="" data-range="100">
                                        <div class="image">
                                            <div class="icon"></div>
                                        </div>
                                        <p>
                                            ALTERNATE
                                            VERSION
                                        </p>
                                    </div>
                                    <div class="item STEMS" data-val="" data-range="140">
                                        <div class="image">
                                            <div class="icon"></div>
                                        </div>
                                        <p>
                                            STEMS
 ...

CSS

/*--------- GothamHTF ---------*/

/*--------- 100 ---------*/
@font-face {
    font-family: 'GothamHTF-Thin';
    src: url('../fonts/Gotham/GothamHTF-Thin.eot');
    src: url('../fonts/Gotham/GothamHTF-Thin.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Gotham/GothamHTF-Thin.woff2') format('woff2'),
         url('../fonts/Gotham/GothamHTF-Thin.woff') format('woff'),
         url('../fonts/Gotham/GothamHTF-Thin.ttf') format('truetype'),
         url('../fonts/Gotham/GothamHTF-Thin.svg#GothamHTF-Thin') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GothamHTF-ThinItalic';
    src: url('../fonts/Gotham/GothamHTF-ThinItalic.eot');
    src: url('../fonts/Gotham/GothamHTF-ThinItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Gotham/GothamHTF-ThinItalic.woff2') format('woff2'),
         url('../fonts/Gotham/GothamHTF-ThinItalic.woff') format('woff'),
         url('../fonts/Gotham/GothamHTF-ThinItalic.ttf') format('truetype'),
         url('../fonts/Gotham/GothamHTF-ThinItalic.svg#GothamHTF-ThinItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*--------- 200 ---------*/
@font-face {
    font-family: 'GothamHTF-Ultra';
    src: url('../fonts/Gotham/GothamHTF-Ultra.eot');
    src: url('../fonts/Gotham/GothamHTF-Ultra.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Gotham/GothamHTF-Ultra.woff2') format('woff2'),
         url('../fonts/Gotham/GothamHTF-Ultra.woff') format('woff'),
         url('../fonts/Gotham/GothamHTF-Ultra.ttf') format('truetype'),
         url('../fonts/Gotham/GothamHTF-Ultra.svg#GothamHTF-Ultra') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GothamHTF-UltraItalic';
    src: url('../fonts/Gotham/GothamHTF-UltraItalic.eot');
    src: url('../fonts/Gotham/GothamHTF-UltraItalic.eot?#iefix') format('embedded-opentype'),
        ...

JavaScript

/**
 * Created by dyachenko on 02.04.2015.
 */
"use strict"

var sentio = {};

sentio.homePageBannerSlideDown = function () {
    var featuredPos = $('.featured').offset();
    $('body').animate({scrollTop:featuredPos.top}, 'slow');
}
sentio.init = function(){
    var points = $('.rewardsList>.item'),
        l = points.length,
        r = Math.round(100 / (l + 1)),
        sliderMax = $('.rewardsSlider').attr('data-max');
    for(var i = 0; i < points.length; i++) {
        var point = points[i],
            minRange,
            maxRange = parseInt(point.getAttribute('data-range'));
        point.setAttribute('data-val', r * [i+1]);

        var val = parseInt(point.getAttribute('data-val'));
        if(points[i-1] !== undefined) {
            minRange = parseInt(points[i-1].getAttribute('data-range'));
            point.setAttribute('data-k', (maxRange - minRange)/r);       
        } else {
            point.setAttribute('data-k', (maxRange - 1)/r);
        }
        
        
    }
};
sentio.rewardsSlider = function () {
    var items = $('.rewardsList>.item').attr('data-val'),
        //startValue = $('.rewardsList>.item:first-child').attr('data-range'),
        startValue = $('.rewardsSlider').attr('data-min'),
        itemVals = $('.rewardsList>.item').attr('data-range'),
        maxRange = $('.rewardsSlider').attr('data-max'),
        minRange = $('.rewardsSlider').attr('data-min'),
        scoreboard = $('.rewardsPanel .scoreboard'),
        step = parseInt(maxRange) / 100;
    $('.rewardsSlider').slider({
        animate: "medium",              // Ñêîðîñòü àíèìàöèè. / Animation duration.
        range: "min",                   // Îòñ÷¸ò îò ìèíèìóìà ê ìàêñèìóìó. / From minimal to maximal.
        min: parseInt(minRange),
        max: parseInt(maxRange),                       // Ìèíèìàëüíàÿ âåëè÷èíà. / Minimal value.
        value: startValue,              // Íà÷àëüíîå çíà÷åíèå. / Start value.
        step: step,                     // Øàã. / Step.
     ...