HTML редактор

<!doctype html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Horizontal scrolling menu - Example 02</title>
  <style>
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

@media (prefers-reduced-motion: no-preference) {
      :root {
        scroll-behavior: smooth;
      }
    }

body {
      margin: 0;
      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
        'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      background-color: #fff;
      -webkit-text-size-adjust: 100%;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

.nav-scroller {
      overflow-y: hidden;
      background-color: #fff;
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }

.nav-scroller__items {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      white-space: nowrap;
    }

.nav-scroller__item {
      color: #424242;
      display: flex;
      padding: 0.5rem 1.25rem;
      text-decoration: none;
    }

.nav-scroller__item:not(:last-child) {
      border-right: 1px solid #eee;
    }

.nav-scroller__item_active {
      background-color: #fff59d;
    }

.nav-scroller__item:not(.nav-scroller__item_active):hover {
      background-color: #f5f5f5;
    }

.nav-scroller__item_active:hover {
      background-color: #fff176;
    }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const $navItems = document.querySelector('.nav-scroller__items');
      const $navItemActive = $navItems.querySelector('.nav-scroller__item_active');
      const navItemsRect = $navItems.getBoundingClientRect();
      const navItemActiveRect = $navItemActive.getBoundingClientRect();
      const navItemsLeft = navItemActiveRect.left - navItemsRect.left + (navItemActiveRect.width - navItemsRect.width) / 2;
      $navItems.scrollLeft = navItemsLeft;
    })
  </script>
</head>

<body>

<div class="nav-scroller">
    <nav class="nav-scroller__items dragscroll">
      <a class="nav-scroller__item" href="#">Start</a>
      <a class="nav-scroller__item" href="#">Icons</a>
      <a class="nav-scroller__item" href="#">Docs</a>
      <a class="nav-scroller__item nav-scroller__item_active" href="#">Support</a>
      <a class="nav-scroller__item" href="#">Plans</a>
      <a class="nav-scroller__item" href="#">Blog</a>
      <a class="nav-scroller__item" href="#">Sign in</a>
    </nav>
  </div>

</body>

</html>