I am trying to add two tabs in Dash which I thought should be fairly simple. I thought I was following the documentation, but keep getting something strange. My code is below, along with an image. Rather than have all the tab data on one page, I’m expecting side by side tabs that you can select.

import pandas as pd
import plotly.express as px
from dash import Dash, dcc, html, Input, Output, dash_table
import dash_bootstrap_components as dbc




matchup_tab = html.Div([html.Div(html.H1("MLB Matchup Analysis", id="title", style={"textAlign":"center"}), className="row")])
hot_hitter_tab = html.H2("Header for hot hitter tab")

stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = Dash(__name__, external_stylesheets=stylesheets)
server = app.server

tabs = dbc.Tabs([dbc.Tab(matchup_tab, label="Matchup"), dbc.Tab(hot_hitter_tab, label="Hitter")])
app.layout = dbc.Row(dbc.Col(tabs))

if __name__ == "__main__":
    app.run_server(debug=True)

This is the current look

I expected something like this

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/tabs/