However, the same is not true of modern SharePoint pages. The DOM of these pages changes regularly so any manipulation using element Ids or CSS class names will eventually break. You can do some user interface customizations on specific areas of a modern page using the SharePoint Framework, but adding the time in the areas you indicated is not one of them.
I think your best option to add the time to the page would be to put it in a footer which you could add to the page using a SharePoint Framework Application Customizer extension.
According to my research and testing, unfortunately, we cannot customize the top navigation bar in modern SharePoint sites, it is by default. We can only add link/label in the navigation bar. Thanks for your understanding.
If the answer is helpful, please click "√" on the left panel of the answer and kindly upvote it.
You cannot customize office 365 ribbon bar (top most navigation - near search box) to add time.
You have below two options:
Option 1 (Recommended): Use default page placeholders provided by Microsoft in SPFx application customizer to show the time in header/footer.
Follow Microsoft official documentation at: Use page placeholders from Application Customizer
Option 2: Inject custom JS/CSS using SPFx application customizer to show the time in navigation.
You can use SPFx application customizer to inject the custom CSS in SharePoint online modern pages. Check more information at:
Note: DOM manipulation & CSS customizations are not recommended by Microsoft and some of your customization may break if Microsoft changes HTML element id/classes in new release updates.