origami1024

Нужна связь с сервером, есть куча вариантов, например:
1) через вебсокеты,
2) постоянные ажаксы для проверки изменений счетчика - самый простой вариант
3) менее постоянные ажаксы по принципу longpool
4) PWA с сервис воркерами, что кажется работает с сокетами.
.
.
.
P. S. Хотя может ОП просто ищет ивент происходящий во всех вкаладках на изменении данных в локалсторедже: https://developer.mozilla.org/en-US/docs/Web/API/W... т. е. вместо

onload=myFunction()

что-то типа:

<script>
  window.addEventListener('storage', myFunction);
</script>

с учетом того, что myFunction будет вставлять в нужный DOM-элемент значение из локалстореджа

Затенение внутри блока
box-shadow: inset 0 0 4px 1px #ccc;
Но судя по всему тут обычная "наружная" тень у внутрених блоков
box-shadow: 0 0 4px 1px #ccc;

Думаю есть около 3-х вариантов:
1. Через css на flex свойством order
2. Через css на grid свойством grid-template-areas
3. Через js dom методы типа insertBefore, insertAfter - не удобно для разметки

Вместо
description={findDescription()}
используй
description={allFind.shift()}

Скорее всего это не mix-blend, а что-то типа:
1) 2 span-а с одинаковым текстом - наложенны друг на друга через position: absolute;
2) белый span идет в разметке после черного, чтобы был поверх
3) у белого спана overflow: hidden и рассчитывается width, чтобы подходила под зеленую полосу.

Вот вариант реализации

Можно и без гридов, используй flex-wrap и order

1) Линии через path.
2) Круги на местах соединений - через svg элемент<marker>.
3) Анимацию тегом animate.

<svg viewBox="0 0 140 140" width=100vw height=100vh>
  <defs>
    <marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
        <circle cx=5 cy=5 r=3 />
    </marker>
  </defs>
  <path d="M20 20 L30 40 L70 20 L90 80" fill="none" stroke="red" marker-start=url(#markerCircle) marker-mid=url(#markerCircle) marker-end=url(#markerCircle)>
    <animate 
           attributeName="d"
           values="M20 20 L30 40 L70 20 L90 80;
               M20 40 L30 10 L70 60 L90 110;
               M10 10 L15 80 L120 70 L150 75;
               M20 20 L30 40 L70 20 L90 80"
           dur="20s"
           repeatCount="indefinite"
           />
  </path>
</svg>

UPD: круги через svg marker

Отвечая на вскидку - многим элементам ты задаешь расположение через margin-left margin-right, при этом в абсолютных единицах, тоесть px - пикселях.
Чтобы хорошо сделать нужно вникнуть в адаптивный/респонсивный дизайн и заранее планировать, где будет флекс контейнер с вложенными блоками (с автоматическим выравниванием по заданным правилам), где будут размеры заданы в процентах либо других относительных единицах, где будет медиазапрос, который скрывает элемент или перемещает его на определенных расширениях экрана.

Продлить выпадалку прозрачным верхним бордером.

*с учетом информации, предоставленной моим подразделением медиумов.

Вариант без псевдоэлементов, фон через linear-gradient

.wrapper{
  text-align: center;
  background-image: 
  linear-gradient(transparent calc(49%), skyblue calc(49%), transparent calc(49% + 1px)),
  linear-gradient(transparent calc(49%), skyblue calc(49%), transparent calc(49% + 1px));
  background-size: calc(45% - 80px);
  background-repeat: no-repeat;
  background-position: 0 0, 100% 0;
}

UPD: теперь корректно работает с картинкой на фоне

hr {
    border-bottom: 0;
}

Потому что его родитель вылазит за пределы. Задай родителю overflow-x: hidden и всё будет чики пуки

.wrap_offs_left {
  overflow-x: hidden;
}

Вот тебе Vuetify компонент (созданный с учетом всех спецификаций material design гугла)
https://vuetifyjs.com/ru/components/selects#examples

UPD: более универсальный select

Вот вариант:
1) Родителю белый фон
2) Самому блоку - бэкграунд родителя
3) На mouseMove изменять background-position соответственно перемещению блока
https://codepen.io/origami1024/pen/eYYRbmx

Можно было gulp еще до html и css изучить, если сильно хотелось