JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Book Timeline</title>
</head>
<body>

<!-- Language toggle buttons -->
<div class="language-toggle">
  <button id="ruBtn">RU</button>
  <button id="enBtn">EN</button>
</div>

<!-- Container for the timeline (as an unordered list) -->
<ul id="timelineContainer" class="timeline"></ul>

</body>
</html>

CSS

ul.timeline {
      list-style-type: none;
      position: relative;
      margin: 2rem 0;
      padding: 0;
    }
    
    /* Vertical line that runs behind the circles */
    ul.timeline::before {
      content: '';
      background: #d4d9df;
      display: inline-block;
      position: absolute;
      left: 29px; /* Align with circles */
      width: 2px;
      height: 100%;
      z-index: 400;
    }
    
    /* Each timeline entry */
    ul.timeline > li {
      margin: 20px 0;
      padding-left: 40px; /* space so text doesn't overlap circle */
      position: relative;
    }
    
    /* The circular marker for each timeline entry */
    ul.timeline > li::before {
      content: '';
      background: #fff;
      display: inline-block;
      position: absolute;
      border-radius: 50%;
      border: 2px solid #22c0e8; /* color of the circle border */
      left: 23px;
      width: 10px;
      height: 10px;
      z-index: 400;
    }

    /* The "badge" showing the year within each li */
    .year-badge {
      font-weight: 600;
      font-size: 1.2em;
      margin-bottom: 0.5rem;
      display: inline-block;  
    }

    span.author {
      font-weight: bold;
      font-size: 1.1rem;
      margin-right: 10px;
    }

    span.book {
      font-size: 1.1rem;
      color: #333;
    }

     .language-toggle {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 999;
    }
    .language-toggle button {
      margin-right: 5px;
      padding: 6px 10px;
      cursor: pointer;
    }

JavaScript

const booksData = [
  {
    "year": "1968",
    "author": { "en": "Gerald Weinberg", "ru": "Джеральд Вайнберг" },
    "book":   { "en": "The Psychology of Computer Programming", "ru": "Психология компьютерного программирования" }
  },
  {
    "year": "1975",
    "author": { "en": "Frederick Brooks", "ru": "Фредерик Брукс" },
    "book":   { "en": "The Mythical Man-Month", "ru": "Мифический человеко-месяц" }
  },
  {
    "year": "1975",
    "author": { "en": "Edward Yourdon", "ru": "Эдвард Йёрдон" },
    "book":   { "en": "Structured Analysis and System Specification", "ru": "Структурный анализ и системная спецификация" }
  },
  {
    "year": "1978",
    "author": { "en": "Donald Knuth", "ru": "Дональд Кнут" },
    "book":   { "en": "The Art of Computer Programming", "ru": "Искусство программирования" }
  },
  {
    "year": "1978",
    "author": { "en": "Brian Kernighan, Dennis Ritchie", "ru": "Брайан Керниган, Деннис Ритчи" },
    "book":   { "en": "The C Programming Language", "ru": "Язык программирования C" }
  },
  {
    "year": "1979",
    "author": { "en": "Douglas Hofstadter", "ru": "Дуглас Хофштадтер" },
    "book":   { "en": "Gödel, Escher, Bach: An Eternal Golden Braid", "ru": "Гёдель, Эшер, Бах: эта бесконечная гирлянда" }
  },
  {
    "year": "1985",
    "author": { "en": "Harold Abelson, Gerald Jay Sussman", "ru": "Гарольд Абельсон, Джеральд Джей Суссман" },
    "book":   { "en": "Structure and Interpretation of Computer Programs", "ru": "Структура и интерпретация компьютерных программ" }
  },
  {
    "year": "1986",
    "author": { "en": "Jon Bentley", "ru": "Джон Бентли" },
    "book":   { "en": "Programming Pearls", "ru": "Программные жемчужины" }
  },
  {
    "year": "1988",
    "author": { "en": "Bertrand Meyer", "ru": "Бертран Мейер" },
    "book":   { "en": "Object-Oriented Software Construction", "ru": "Объектно-ориентированное конструирование программ" }
  },
  {
    "year": "1990",
    "author": { "en": "Thomas H. Cormen, Charles E....