JSFiddle - React, Tailwind, and code Playground

by alessandro_pezzato

HTML

<article class="catalog-element">
            <p>Mauris at arcu vitae ligula ultrices tempor. Donec sit amet
                nisl eu turpis semper volutpat id nec arcu. Aliquam erat volutpat.
                Donec dignissim dui ac urna mattis sed malesuada orci ornare.
                Vestibulum sodales sem eget velit pharetra ac commodo arcu accumsan.
                Morbi eu nibh sit amet dui feugiat sodales. Vivamus venenatis dolor
                et magna pretium aliquet. Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. Nam sagittis pharetra felis, non lobortis dolor
                posuere a. Ut scelerisque laoreet mauris, in congue orci convallis
                sed. Pellentesque habitant morbi tristique senectus et netus et
                malesuada fames ac turpis egestas. Nunc pretium scelerisque massa
                nec venenatis. Donec tristique, odio id fringilla dignissim, nisi mi
                volutpat quam, consequat pretium dui turpis at felis. Etiam at lorem
                massa. Pellentesque habitant morbi tristique senectus et netus et
                malesuada fames ac turpis egestas.</p>
        </article>

CSS

* {
    font-family: sans-serif;
}

body, html {
    margin: 0; padding: 0; background: #666666;
}

article {
        display: block;
    margin: 16px;
    border: 16px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.75);
    background-color: #ffffff;
    background-clip: padding-box;
}

article p {
    padding: 16px;
}

JavaScript

$elements = $('article');

$elements.each(function() {
    $el = $(this);
    $el.bind('mousedown', function() {
        $el.animate({
            opacity: 0.5
        }, 500, function() {
            $(this).animate({
                opacity: 1.0
            })
        });
    });
});