JSFiddle - React, Tailwind, and code Playground

by Dmitry Britan

HTML

<div id="wrapper">
    <div id="inner-wrapper">
        <header id="header">
            <h1>WebComplex</h1>
            <nav id="menu">
                <ul>
                    <li><a href="http://webcomplex.com.ua">Link URL</a></li>
                    <li><a href="ru/service#ex2">Link #2</a></li>
                    <li><a href="#ex3">Link #3</a></li>
                    <li><a href="#ex4">Link #4</a></li>
                </ul>
            </nav>
        </header>
        <div id="content">
            <section id="ex1">
                <h2>Block with ID="ex1"</h2>
                <article class="post">
                    <h3 class="post-title">Post title</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </article>
                <article class="post">
                    <h3 class="post-title">Post title</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           ...

CSS

body {margin: 0; font: normal 14px/130% arial,verdana;}
a, a:hover {color: #FFF; text-decoration: none;}

#wrapper {position: relative; overflow: hidden;}
#inner-wrapper {width: 960px; margin: 0 auto;}
#header {height: 150px; background: #069;}
#header h1 {font-size: 32px; line-height: 36px; color: #FFF; padding: 70px 0 0 30px; margin: 0 0 14px;}
#content {min-height: 400px; overflow: hidden; padding: 20px 5%; color: #000; border:1px solid #f0f0f0; border-width: 0 1px}
#footer {background: #f0f0f0; height: 25px; color: #777; padding: 10px;}

#menu {background: #000;}
#menu > ul {margin: 0; padding: 0; list-style-type: none;}
#menu > ul:after {content: " "; display: block; line-height: 0; height: 0; width: 100%; clear: both;}
#menu > ul > li {float: left;}
#menu > ul > li + li {margin-left: 5px;}
#menu > ul > li > a {
    display: block; padding: 6px 12px; color: #FFF;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#menu > ul > li > a:hover {background: #E76600;}

.post {width: 30%; margin-right: 5%; float: left; text-align: justify; cursor: pointer;}
.post.last {margin-right: 0;}
.post .post-title {text-transform: uppercase;}

#ex2 .post,
#ex3 .post,
#ex4 .post {width: 45%; margin-right: 10%;}
#ex2 .post.last,
#ex3 .post.last,
#ex4 .post.last {margin-right:0;}
.separator {clear: both; overflow: hidden; height: 50px;}
@media only screen and (max-width:960px){
    #inner-wrapper {width: 80%;}
}

JavaScript

$(document).ready(function(){
    $("#menu").on("click","a", function (event) {
        if (/#/.test(this.href)) {
          event.preventDefault();
          
          var url = $(this).attr('href'),
    					hash = url.split('#')[1];

          
          //забираем идентификатор бока с атрибута href
          var id  = '#'+hash,

              //узнаем высоту от начала страницы до блока на который ссылается якорь
              top = $(id).offset().top;

          //анимируем переход на расстояние - top за 1500 мс
          $('body,html').animate({scrollTop: top}, 1500);
        }
    });
});