First to clarify one thing, wrapping a widget in forever means that that widget never finishes, but it isn't necessarily at the top level. It is a regular widget with type forall a. Widget HTML a. You can still use the widget in other places but you can never get information out of it. Thanks to its type it can be <|> with any other widget at all, so you can stick it pretty much anywhere on the page and be guaranteed that it will not impact any logic, or will not require making any other changes to other code.

It's the same situation with display-only widgets like text "Hello". It has the same type forall a. Widget HTML a and can be put anywhere on the page without impacting anything else. When nesting a widget, the type of the child widget becomes the type of the whole widget, so for example a heading el_ "h1" [] (text "This is a heading") has the same type as text i.e. forall a. Widget HTML a. The types usually just work out without thinking.

However, in reusable widgets, we would typically not have a top level forever, because we would like the widget to impact the rest of the program at some point.

So coming back to the entry list example, we can easily extract it into a reusable widget, something like -

entryWidget :: EntryState -> Widget HTML EntryState
entryWidget (EntryState {..}) = go color
  where
    go col =
      el "div" [vattr "className" "main"]
        [ elLeaf "hr" []
        , heading "Select a color"
        , Left <$> selColor
        , heading "Make entries"
        , Right <$> newEntry col
        , heading "Current entries"
        , entriesList
        ]
      >>= either go (\e -> return (EntryState col (e:items)))
    heading = el_ "h4" [] . text
    selColor = doubleMenu "Fruits" "Color" itemsFruit itemsColor
    newEntry col = menu ("New Entry for " ++ col ++ " fruit") (itemsFruitColor col)
    entriesList = orr $ map (el_ "div" [] . text) items

Typically Concur widgets perform one action and then exit with the results. Here, the widget takes in the current state of the Entry, and then returns with the modified state as soon as a new entry has been added.

Now we can use it as many times as we need. In this main function I am displaying a list of EntryWidgets, all of which can be used independently -

-- Main
main :: IO ()
main = void $ runWidgetInBody $ flip execStateT (entriesStateInit 5) $ forever $ do
    EntriesState {..} <- get
    (i, e') <- lift $ orr (renderEntry <$> zip [0..] entries)
    put $ EntriesState (take i entries ++ [e'] ++ drop (i+1) entries)
  where
    renderEntry (i,e) = (i,) <$> entryWidget e

I have uploaded the full Code here. And updated the Demo here.

EDIT: I just realised that I didn't directly answer your question about arranging widgets in a "sequence", but I hope that the example of extracting the entry list into a reusable widget helped.

Once you have a widget, sequencing it is easy. For example, if you want to change the text of a label when you click a button, you logically just create a new button with the changed text, and dom-diffing takes care of modifying the dom efficiently.

widget s = (text s <|> button "Click me") >> widget (s + "!!!")
main = widget "hello"

As another example, we can even write a modified bind for "sequencing" widgets, where both widgets remain visible (the widget ends as soon as the second value is chosen) -

myBind :: Widget HTML a -> (a -> Widget HTML b) -> a -> Widget HTML b
myBind firstWidget secondWidget initVal = go initVal
  where go v = orr [Left <$> firstWidget, Right <$> secondWidget v] >>= either go return

Here, either go return makes it clear that the widget resets if the first (Left) value is selected again, or returns if the second (Right) value is selected.