Do I add it here: <div>{code CB Profile CSS class cb_template CSS}</div>

No, add a div that surrounds your entire layout with the CSS class cb_template on it. Example as follows.

Substituting in a tab or a field just substitutes in the tab or fields contents. It doesn't do anything beyond that. There's not going to be a tabbed menu like you see on your profile as that's specifically designed for the canvas layout, which I guess if you 100% recreated in your custom HTML might be possible. Suppose you could try substituting in entire tab positions, but again if you do not mimic the expected canvas layout it likely will look odd or not work. Example as follows.

[cb:userposition position="canvas_main_middle" /]

I'm not sure why you need this to be honest as you can customize what does and does not display based off who is viewing the profile rather easily using CB Conditional giving the illusion of 2 different views.

To have two different profile views using CB Conditional? Suggest installing CB Conditional and begin using it. Example of its usage to show/hide fields can be found on our demo site below.

demo.cbdemosites.com/

You can also find a few tutorials below.

www.joomlapolis.com/documentation/315-cb-conditional/tutorials

The UX maybe out of date in the videos, but the usage is still the same. For example to condition a tab to only display if the profile owner isn't viewing the page you'd use the below.

Display: Tab conditional show
Field: Custom > Value
Value: [user_id]
Operator: Not Equal To
Value: [cb:userdata field="user_id" user="#me" /]

This would let you have tabs or fields only visible to someone else viewing the profile limiting clutter for the actual profile owner (e.g. if you wanted to hide some of the canvas from profile owner).