JSFiddle - React, Tailwind, and code Playground

by bumbay

HTML

<a class="hf-ads" href="http://therandomvideo.com/" target="_blank">
    <div class="hf-right">
        <div class="hf-name">Нет ничего лучше, чем самые захватывающие видео мира!</div>
    <div class="hf-desc">Мы отобрали самые лучшие, захватывающие и интересные видео со всего мира, которые показываем в случайном порядке.</div>
        <div class="hf-button">
            <button class="hf-btn">Начать просмотр!</button>
            у нас только лучшее!
        </div>
    </div>
</a>

CSS

.hf-ads {
	font: 8pt Tahoma;
	background: #E75A4D;
  width: 428px;
    color: #FFD8D8;
  font-size: 14px;
  padding: 15px 20px;
    border: 1px solid #A80E00;
    display: block;
    text-decoration: none;
    overflow: hidden;
position: relative;
    margin: 20px 10px;
    -webkit-box-shadow:0 3px 2px rgba(0,0,0,.1);-moz-box-shadow:0 3px 2px rgba(0,0,0,.1);box-shadow:0 3px 2px rgba(0,0,0,.1)
}

.hf-ads:hover {
    cursor: pointer;
}

.hf-left img {
  padding-right: 20px;
}

.hf-left {
    float: left;
}

.hf-name {
color: #FFF;
padding: 0px 0 8px;    
}

.hf-desc {
    font-size: 9pt;
    line-height: 1.5;
}

.hf-video {
    padding-top: 20px;
    font-size: 9pt;
}
.hf-video a {
    color: #fff;
    text-decoration: none;
}
.hf-video a:hover {
    text-decoration: underline;
}


.hf-btn {
    width: 200px;
    padding: 8px;
    font: 300 14px Tahoma;
    background-color: #FFF;
    color: #000;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    box-shadow: 0 1px 2px rgba(0,0,0,.5);
    border: none;
    display: inline-block;
    margin-right: 15px;
}

.hf-btn:hover {
    cursor: pointer;
    opacity: 0.8;
}
.hf-btn:active {
    padding: 9px 7px 7px 9px;
    opacity: 0.9;
}

.hf-button {
    margin-top: 10px;
}

JavaScript

(function (d) {
    d.each(["backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor"], function (f, e) {
        d.fx.step[e] = function (g) {
            if (!g.colorInit) {
                g.start = c(g.elem, e);
                g.end = b(g.end);
                g.colorInit = true
            }
            g.elem.style[e] = "rgb(" + [Math.max(Math.min(parseInt((g.pos * (g.end[0] - g.start[0])) + g.start[0]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[1] - g.start[1])) + g.start[1]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[2] - g.start[2])) + g.start[2]), 255), 0)].join(",") + ")"
        }
    });

    function b(f) {
        var e;
        if (f && f.constructor == Array && f.length == 3) {
            return f
        }
        if (e = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)) {
            return [parseInt(e[1]), parseInt(e[2]), parseInt(e[3])]
        }
        if (e = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)) {
            return [parseFloat(e[1]) * 2.55, parseFloat(e[2]) * 2.55, parseFloat(e[3]) * 2.55]
        }
        if (e = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)) {
            return [parseInt(e[1], 16), parseInt(e[2], 16), parseInt(e[3], 16)]
        }
        if (e = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)) {
            return [parseInt(e[1] + e[1], 16), parseInt(e[2] + e[2], 16), parseInt(e[3] + e[3], 16)]
        }
        if (e = /rgba\(0, 0, 0, 0\)/.exec(f)) {
            return a.transparent
        }
        return a[d.trim(f).toLowerCase()]
    }
    function c(g, e) {
        var f;
        do {
            f = d.css(g, e);
            if (f != "" && f != "transparent" || d.nodeName(g, "body")) {
                break
            }
            e = "backgroundColor"
        } while (g = g.parentNode);
        return b(f)
   ...