JSFiddle - React, Tailwind, and code Playground

by Caleb Wong

HTML

<div class="content-item">
                                            <div class="promo-block">
                                                <div class="promo-heading">
                                                    <h3 class="heading">Cars Guide</h3>
                                                </div>
                                                <div class="promo-image"><img width="212" height="131" src="http://placehold.it/212x131"></div>
                                                <div class="promo-text">
                                                    <h4>New Camero Lands</h4>
                                                </div>
                                                <p class="update"><a href="">Update</a></p>
                                                <div class="download-progress-overlay">
                                                    <div class="download-progress">
                                                        <div class="progress">
                                                            <span class="meter"></span>
                                                        </div><!-- .progress -->
                                                    </div><!-- .download-progress -->
                                                </div><!-- .download-progress-overlay -->
                                            </div>
                                        </div>

        <div id="d" class="ui-overlay ui-overlay-arrow-bottom">
            <div class="ui-overlay-content">
                <div class="ui-overlay-header">
                    <h4 class="heading">Download</h4>
                    <h4 class="heading"><span>Cars Guide</span>?</h4>
                    <h5 class="dl-size">7MB</h5>
                </div>
                <div class="ui-overlay-body">
                    <!--
                    <p class="alert-msg">This will pause download</p>
                    -->
                   ...

CSS

.ui-overlay { display: none; }
.content-item.updating .update a { background: #ffd00;
    -webkit-transform: rotate(0deg) translateZ(0); -webkit-transition-duration: 0ms; -webkit-animation-name: loading; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }
@-webkit-keyframes loading {
    from { -webkit-transform: rotate(0deg) translateZ(0); }
    to { -webkit-transform: rotate(360deg) translateZ(0); }
}
.content-item.updating .download-progress-overlay { background-color: rgba(0, 0, 0, .5); display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.content-item.updating .download-progress { background: #fff; border-radius: 14px; border: 2px solid #fff; height: 15px; position: absolute; }
.content-item .percent { color: #fff; font-size: 11px; font-weight: normal; position: absolute; z-index: 4; }
.content-item.updating .progress { background: #2b2b2b; border-radius: 14px; border: 2px solid #2b2b2b; float: left; height: 11px; width: 60px; }
.content-item.updating .progress .meter { background: #fc0; border-radius: 14px; display: inline-block; height: 11px; margin: 0 0 9px; }
.content-item.updated .promo-heading { background: #fc0; }
.content-item.updated .promo-heading h3 { color: #2b2b2b; -webkit-text-fill-color: initial; }
.content-item.updated .update a { background: #c00; height: 16px; width: 16px; }
.content-item.preloaded .promo-heading { background: #fc0; }
.content-item.preloaded .promo-heading h3 { color: #2b2b2b; -webkit-text-fill-color: initial; }
.content-item.preloaded .percent { color: #2b2b2b; }

.content-item { display: inline-block; }
.content-item .promo-block { border-right: 1px solid #fff; }
.content-item:last-child .promo-block { border-right: none; }
.content-item .promo-block .promo-heading { height: 25px; line-height: 25px; }
.content-item .promo-block .promo-heading h3 { font-size: 16px; }
.content-item .promo-block .promo-text { height: 31px;...

JavaScript

/* counter */
(function($) {
    $.fn.countTo = function(options) {
        // merge the default plugin settings with the custom options
        options = $.extend({}, $.fn.countTo.defaults, options || {});

        // how many times to update the value, and how much to increment the value on each update
        var loops = Math.ceil(options.speed / options.refreshInterval),
            increment = (options.to - options.from) / loops;

        return $(this).each(function() {
            var _this = this,
                loopCount = 0,
                value = options.from,
                interval = setInterval(updateTimer, options.refreshInterval);

            function updateTimer() {
                value += increment;
                loopCount++;
                $(_this).html(value.toFixed(options.decimals) + '%');

                if (typeof(options.onUpdate) == 'function') {
                    options.onUpdate.call(_this, value);
                }

                if (loopCount >= loops) {
                    clearInterval(interval);
                    value = options.to;

                    if (typeof(options.onComplete) == 'function') {
                        options.onComplete.call(_this, value);
                    }
                }
            }
        });
    };

    $.fn.countTo.defaults = {
        from: 0,
        // the number the element should start at
        to: 100,
        // the number the element should end at
        speed: 1000,
        // how long it should take to count between the target numbers
        refreshInterval: 100,
        // how often the element should be updated
        decimals: 0,
        // the number of decimal places to show
        onUpdate: null,
        // callback method for every time the element is updated,
        onComplete: null,
        // callback method for when the element finishes updating
    };
})(jQuery);

$('.content-item').bind('click', function() {

    var downloadSection = $(this),
      ...