<div className="flex gap-xs">
  <HvScrollToVertical
    scrollElementId="content2"
    options={[
      { label: "Server", value: "mainId2-1" },
      { label: "Optimization", value: "mainId2-2" },
      { label: "Performance", value: "mainId2-3" },
      { label: "Insights", value: "mainId2-4" },
    ]}
    tooltipPosition="right"
  />
  <HvContainer id="content2" className="grid gap-sm h-400px overflow-auto">
    {[
      { label: "Server", value: "mainId2-1" },
      { label: "Optimization", value: "mainId2-2" },
      { label: "Performance", value: "mainId2-3" },
      { label: "Insights", value: "mainId2-4" },
    ].map((option) => (
      <HvPanel key={option.value} id={option.value} style={{ minHeight: 400 }}>
        <HvTypography variant="title1" className="pb-sm">
          {option.label}
        </HvTypography>
        <div className="w-400px">
          <HvInput label="Label" />
        </div>
      </HvPanel>
    ))}
  </HvContainer>
</div>