JSFiddle - React, Tailwind, and code Playground

HTML

<body class="centered">
        <div id="main-container">
            <!-- header -->
            <div class="col_1_of_1 blue header">
                 <div class="col_1_of_5 menu-icon">
                     <img src="img/menu.png"/>
                </div>
                <div class="col_3_of_5">
                    <p class="main_title" id="headerTitle"></p>
                </div>
               <div class="col_1_of_5 img-icon">
                   <a  href="#tab1">     <img src="*" alt="TOP"/></a>
                </div>
            </div>
            <!-- body -->
            <div class="body" id="list">
                <article class='tabs'>
                <section id='tab1'>
                    <h2><a href='#tab1' id='sayit'>Person1</a></h2>
                      <div class='col_1_of_1'>
                            <img src='img/bike/img.png'>
                    </div>
                    <div class='col_1_of_1'>
                        <p class='fausto_title'>dscdsvdvds</p>
                        <p class='fausto_text'>vdlisvd shvgldk sgvds gvgsd kjbvds  ds uidshiu diui guig uig uig g g gl ffyolg f f h hj lhfh ff yfyufolyf uhyf   dsvdvdhvihiu ugig piogv hgho ghvh vhvhv hvo vohv hovhjvhjvhvh vhvvhv vhvh vhvhv hv hjvp8ythtuy ty tygt gtg68g 6g 6g 6g tg tr gytrg 
                            dsvdvdhvihiu ugig piogv hgho ghvh vhvhv hvo vohv hovhjvhjvhvh vhvvhv vhvh vhvhv hv hjvp8ythtuy ty tygt gtg68g 6g 6g 6g tg tr gytrg 
                            dsvdvdhvihiu ugig piogv hgho ghvh vhvhv hvo vohv hovhjvhjvhvh vhvvhv vhvh vhvhv hv hjvp8ythtuy ty tygt gtg68g 6g 6g 6g tg tr gytrg 
                            dsvdvdhvihiu ugig piogv hgho ghvh vhvhv hvo vohv hovhjvhjvhvh vhvvhv vhvh vhvhv hv hjvp8ythtuy ty tygt gtg68g 6g 6g 6g tg tr gytrg dsvdvdhvihiu ugig piogv hgho ghvh vhvhv hvo vohv hovhjvhjvhvh vhvvhv vhvh vhvhv hv hjvp8ythtuy ty tygt gtg68g 6g 6g 6g tg tr gytrg
                              dsvdvdhvihiu ugig piogv hgho ghvh vhvhv hvo vohv hovhjvhjvhvh vhvvhv...

CSS

.col_1_of_5 img{
border: 3px solid red;
}


.menu-icon {
    padding-top: 9% !important;
}
.menu-icon img {
    width: 40%;
}
.header {
    position: fixed;
    height: 64px; 
    top: 0;
    z-index: 1000;
}
.header div {
    float: left;
    padding-top: 8%;
}
article.tabs
{
    position: relative;
    display: block;
    width: 100%;
}
article.tabs section
{
    position: absolute;
    top: 1.8em;
    left: 0;
    height: 12em;
    background-color: #ddd;
    z-index: 0;
    width: 100%;
}
article.tabs section .table  {
    display: none;
}

article.tabs section:first-child
{
    z-index: 1;
}
article.tabs section h2
{
    position: absolute;
    font-size: 1em;
    font-weight: normal;
    width: 33%;
    height: 1.8em;
    top: -1.8em;
    padding: 0;
    margin: 0;
    color: #999;
    background-color: #ddd;
    border-top: 1px solid #ddd;
}

article.tabs section:nth-child(2) h2
{
    left: 33%;
}

article.tabs section:nth-child(3) h2
{
    left: 66%;
}

article.tabs section h2 a
{
    display: block;
    width: 100%;
    line-height: 1.8em;
    text-align: center;
    text-decoration: none;
    color: inherit;
    outline: 0 none;
}
/* --- active section --- */
article.tabs section:target,
article.tabs section:target h2
{
    background-color: #fff;
    z-index: 2;
}
article.tabs section:target {
    width: 100%;
    position: absolute;

    top: 1.8em;
    left: 0;
    height: 12em;

}
article.tabs section:target h2 {
    width: 33%;
    border-right: 1px solid rgb(27,47,105);
    border-left: 1px solid rgb(27,47,105);
    border-top: 1px solid rgb(27,47,105);
    color: rgb(27,47,105);
}
article.tabs section:target .table{
    display: block;
}
/* --- transition effect --- */

article.tabs section,
article.tabs section h2
{
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

JavaScript

$(function() {
    $('a').bind('click',function(event){
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1000);       
      event.preventDefault();
    });
 });