JSFiddle - React, Tailwind, and code Playground

by lukempeters

HTML

<div class="rightCol attention" style="overflow: hidden;">
    <div class="innerPadding">

        <b>Message from Luke:</b><br>
<p>Hey guys! I am currently rebuilding SnipSave from the bottom up inside CodeIgniter. The current version of SnipSave isn't inside of any framework, so adding new features was getting quite messy. The overall design and layout will remain similar, but the back-end will be completely new.</p>

        <p>I'm really excited to make SnipSave more of a community, while still sticking with the original goal of being a very quick, simple to use tool.</p>
        <p>Thanks for all of your feedback and support, it always makes my day :)</p>
        
<p>Feel free to <a href="mailto:[email protected]">email me</a> with any questions/comments.</p>

    </div>

</div>

CSS

body {
    padding: 20px 160px 0 0;
    font-family: Arial, Tahoma, Verdana;
    font-size: 14px;
    line-height: 18px;
    color: #5B5B5B;
    background: #F1F5FF;
}

p {
    margin: 0 0 12px 0;
}

.attention {
    box-shadow: 0 0 4px #FFE500;
    -webkit-transition: box-shadow .6s ease;
}

div#rightCol, .rightCol {
    position: relative;
    margin-bottom: 14px;
    width: 26.1%;
            width: 240px;
    border: 1px solid rgba(0, 0, 100, 0.14);
    border: 1px solid #DBDBE9\9;
    border-radius: 4px;
    float: right;
    clear: right;
    background: white;
}

div.innerPadding {
    padding: 10px 14px;
}

a, a:visited {
    color: #3C7CA8;
}

JavaScript

var attentionInt = setInterval(function() {
    $('.attention').css({
        'box-shadow': '0 0 50px #FFE500'
    });
    clearInterval(attentionInt);
}, 1000);

var attentionInt2 = setInterval(function() {
    $('.attention').css({
        'box-shadow': '0 0 4px #FFE500'
    });
    clearInterval(attentionInt2);
}, 1200);