JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<section class="ib-container" id="ib-container">
    <article>
        <header>
             <h3><a target="_blank" href="http://tympanus.net/codrops/2011/12/08/25-examples-of-perfect-color-combinations-in-web-design/">apo-ucoz.com</a></h3>
	<span>Отборные скрипты для вашего сайта</span>

        </header>
        <p>Не веришь? Забегай, сам всё увидишь</p>
    </article>
    <article>
        <header>
            	<h3><a target="_blank" href="http://tympanus.net/codrops/2011/12/08/design-it-to-build-it-what-to-consider-when-designing-for-the-web/">Design It to Build It: What to Consider When Designing for the Web</a></h3>
	<span>December 8, 2011 by Patrick Cox</span>

        </header>
        <p>For me, Photoshop is becoming more and more of a prototyping or blue printing tool: it’s basically just a canvas...</p>
    </article>
    <article>
        <header>
            	<h3><a target="_blank" href="http://tympanus.net/codrops/2011/12/07/splash-and-coming-soon-page-effects-with-css3/">Splash and Coming Soon Page Effects with CSS3</a></h3>
	<span>December 7, 2011 by Mary Lou </span>

        </header>
        <p>CSS3 opens up so many crazy possibilities and today we want to show you how to go wild with splash and coming soon page effects using CSS3 animations.</p>
    </article>
    <article>
        <header>
            	<h3><a target="_blank" href="http://tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/">Lateral On-Scroll Sliding with jQuery</a></h3>
	<span>December 5, 2011 by Mary Lou </span>

        </header>
        <p>After getting the request, we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade.</p>
    </article>
    <article>
        <header>
            	<h3><a target="_blank" href="http://tympanus.net/codrops/2011/12/01/6-questions-you-should-ask-yourself-when-choosing-fonts/">6...

CSS

h3 {
    margin:0;
    padding:0;
    font-size:100%;
    font-weight:normal;
}
.ib-container {
    position: relative;
    width: 800px;
    margin: 30px auto;
    display: block;
}
.ib-container:before, .ib-container:after {
    content:"";
    display:table;
}
.ib-container:after {
    clear:both;
}
.ib-container article {
    display: block;
    width: 140px;
    height: 220px;
    background: #fff;
    cursor: pointer;
    float: left;
    border: 10px solid #fff;
    text-align: left;
    text-transform: none;
    margin: 15px;
    -webkit-backface-visibility: hidden;
    z-index: 1;
    box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 1), 1px 1px 3px 10px rgba(0, 0, 0, 0.2);
    -webkit-transition: opacity 0.4s linear, -webkit-transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    -moz-transition: opacity 0.4s linear, -moz-transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    -o-transition: opacity 0.4s linear, -o-transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    -ms-transition: opacity 0.4s linear, -ms-transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    transition: opacity 0.4s linear, transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
.ib-container h3 a {
    font-size: 16px;
    font-weight: 400;
    color: #000;
    color: rgba(0, 0, 0, 1);
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
    opacity: 0.8;
}
.ib-container article header span {
    font-size: 10px;
    font-family:"Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
    padding: 10px 0;
    display: block;
    color: #FFD252;
    color: rgba(255, 210, 82, 1);
    text-shadow: 0px 0px 0px rgba(255, 210, 82, 1);
    text-transform: uppercase;
    opacity: 0.8;
}
.ib-container article p {
    font-family: Verdana, sans-serif;
    font-size: 10px;
    line-height: 13px;
    color: #333;
    color: rgba(51, 51, 51, 1);
    text-shadow: 0px 0px 0px rgba(51, 51, 51, 1);
    opacity: 0.8;
}
.ib-container h3 a, .ib-container article header...

JavaScript

$(function () {

    var $container = $('#ib-container'),
        $articles = $container.children('article'),
        timeout;

    $articles.on('mouseenter', function (event) {

        var $article = $(this);
        clearTimeout(timeout);
        timeout = setTimeout(function () {

            if ($article.hasClass('active')) return false;

            $articles.not($article.removeClass('blur').addClass('active'))
                .removeClass('active')
                .addClass('blur');

        }, 65);

    });

    $container.on('mouseleave', function (event) {

        clearTimeout(timeout);
        $articles.removeClass('active blur');

    });

});