JSFiddle - React, Tailwind, and code Playground

HTML

<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>
            </div>
      ...

CSS

.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;
   margin-left:-203px !important;
}

.blur2 {
   width:114px !important;
...

JavaScript

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

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

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');
$(window).scroll(function () {
    elements.each(function () {
        $this = $(this);
        if (isScrolledIntoView($this, $window)) {
            $this.addClass("blur");
        }
        else{
            $this.removeClass("blur");
        }
    })
});

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