JSFiddle - React, Tailwind, and code Playground

HTML

<body>


<div class="wraphold">
    <div class="timeline-title"><span>Timeline</span>

    </div>
    <ul class="timeline">
        <li>
            <div class="dot">
                <div class="date"><span>21st JUNE</span>

                </div>
            </div>
            <div class="box">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
        </li>
        <li>
            <div class="dot">
                <div class="date"><span>22nd JUNE</span>

                </div>
            </div>
            <div class="box">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
        </li>
        <li>
            <div class="dot">
                <div class="date"><span>23rd JUNE</span>

                </div>
            </div>
            <div class="box">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
        </li>
        <li>
            <div class="dot">
                <div class="date"><span>24th JUNE</span>

                </div>
            </div>
            <div class="box">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            </div>
        </li>
        <li>
            <div class="dot">
                <div class="date"><span>25th JUNE</span>

                </div>
            </div>
            <div class="box">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
           ...

CSS

body {
    
    width:100%;
    height:100%;
    overflow:scroll;
}


.wraphold {
    min-width:1200px;
    width:81%;
    margin-left:20px;
    background-color:#fff;
    height:auto;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius:blur 10px;
    margin-bottom:30px;
    padding-bottom:20px;
}
.timeline-title {
    height:80px;
    width:100%;
    margin-top:30px;
    border-bottom: solid 2px #ccc;
}
.timeline-title span {
    line-height:80px;
    margin-left:30px;
    color:#254661;
    font-family:'Segoe UI';
    font-size:22px;
}
.timeline {
    margin:40px 0;
    padding: 0;
    top:35px;
    list-style:none;
    position:relative;
    font-size:16px;
}
/* The line */
 .timeline:before {
    content:'';
    position: absolute;
    top: -75px;
    bottom: 0;
    width: 3px;
    background: #ccc;
    left: 20%;
    margin-left: -150px;
}
li {
    position: relative;
}
/* Right content */
 li .box {
    margin: 40px 0 15px 220px;
    color: #000;
    height:200px;
    width:950px;
    padding: 25px;
    position: relative;
    border-radius: 5px;
    font-size:16px;
}
.timeline li:nth-child(odd) .box {
    color: #000;
}
/* Dots */
 .timeline li .dot {
    width:80px;
    height:80px;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    background: #ececec;
    border: solid 2px #00a9ff;
    border-radius: 50%;
    left: 20%;
    top: 0;
    margin: 20px 0 0 -190px;
}
.timeline li .dot .date {
    width:75px;
    height:75px;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    background: #ececec;
    border: solid 2px #ffffff;
    border-radius: 50%;
    left: 20%;
    top: 0;
    margin: 0px 0 0 -16px;
    line-height:50px;
}

.date span {
    color:#254661;
    font-weight:bold;
    font-size:16px;
    font-family:'Segoe UI';
    text-align:center;
    display: inline-block;
    line-height: 18px;
    vertical-align: middle;
}
.blur {
   width:120px !important;
    height:120px !important;
  ...

JavaScript

$(document).ready(function () {
        $('.timeline li .dot:first').addClass("blur");
        $('.timeline li .date:first').addClass("blur2");

    });
    var $window = $('body');

    function isScrolledIntoView($elem, $window) {
        var docViewTop = $window.scrollTop();
        var docViewBottom = docViewTop + $window.height();

        var elemTop = $elem.offset().top;
        var elemBottom = elemTop + $elem.height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }
    var elements = $('.timeline li .dot');
    $('body').on('scroll', function () {
        elements.each(function () {
            $this = $(this);
            if (isScrolledIntoView($this, $window)) {
                $this.addClass("blur");
            }
            else {
                $this.removeClass("blur");
            }
        })
    });

    var elements2 = $('.timeline li .date');
    $('body').on('scroll', function () {
        elements2.each(function () {
            $this = $(this);
            if (isScrolledIntoView($this, $window)) {
                $this.addClass("blur2");
            }
            else {
                $this.removeClass("blur2");
            }
        })
    });