JSFiddle - React, Tailwind, and code Playground

by XstreamINsanity

HTML

<div>
    <div class="forum_post_wrapper">
        <div class="forum_post">Post 1</div>
        <div class="forum_post">Post 2</div>
        <div class="forum_post">Post 3</div>
        <div class="forum_post">Post 4</div>
        <div class="forum_post">Post 5</div>
        <div class="forum_post">Post 6</div>
        <div class="forum_post">Post 7</div>
        <div class="forum_post">Post 8</div>
        <div class="forum_post">Post 9</div>
        <div class="forum_post">Post 10</div>
        <div class="forum_post">Post 11</div>
        <div class="forum_post_wrapper">
            <div class="forum_post post_unread">Post 11-1</div>
            <div class="forum_post_wrapper">
                <div class="forum_post post_unread">Post 11-1-1</div>
            </div>
            <div class="forum_post post_unread">Post 11-2</div>
            <div class="forum_post post_unread">Post 11-3</div>
            <div class="forum_post_wrapper">
                <div class="forum_post post_unread">Post 11-3-1</div>
            </div>
        </div>
        <div class="forum_post">Post 12</div>
        <div class="forum_post">Post 13</div>
        <div class="forum_post">Post 14</div>
        <div class="forum_post">Post 15</div>
        <div class="forum_post">Post 16</div>
        <div class="forum_post">Post 17</div>
        <div class="forum_post">Post 18</div>
        <div class="forum_post">Post 19</div>
        <div class="forum_post">Post 20</div>
        <div class="forum_post">Post 21</div>
        <div class="forum_post">Post 22</div>
        <div class="forum_post">Post 23</div>
        <div class="forum_post">Post 24</div>
        <div class="forum_post">Post 25</div>
        <div class="forum_post_wrapper">
            <div class="forum_post post_unread">Post 25-1</div>
            <div class="forum_post_wrapper">
                <div class="forum_post post_unread">Post 25-1-1</div>
            </div>
            <div class="forum_post post_unread">Post...

CSS

.post_read {
    background-color:white;
}

.post_reading {
    background-color:green;
}

.post_unread {
    background-color:lightyellow;
}

.forum_post {
    border:1px solid black;
    height:50px;
}

.forum_post_wrapper {
    padding-left:25px;
}

JavaScript

$(document).keyup(function (e) {
        if (e.keyCode == 90 || e.keyCode == 16) {
            var ta2;
            if (ta2 = document.getElementsByClassName('post_reading')[0])
            {
                ta2.removeAttribute('class','post_reading');
                ta2.setAttribute('class', 'forum_post');
            }
            
            var ta = document.getElementsByClassName('post_unread')[0];
            ta.removeAttribute('class','post_unread');
            ta.setAttribute('class', 'forum_post post_reading');
            ta.scrollIntoView();
        }
    });