import gradio as gr

# CSS to change tab colors
CUSTOM_CSS = """
.tabs {
    background-color: #eadedb !important; /* Change tab background color */
    color: white !important; /* Change tab text color */
    font-weight: bold !important;
}
.tabs .tab {
    padding: 20px;
    border-radius: 10px;
    margin: 10px;
}
.tabs .tab:hover {
    background-color: #dadedb !important; /* Change tab hover color */
}
.tabs .tab-selected {
    background-color: #eadedb !important; /* Change selected tab color */
    color: white !important;
}
"""

# Create the Gradio app with a theme and custom CSS
with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Glass(primary_hue = "rose")) as app:
    with gr.Tab("Box Breathing"):
        gr.Markdown("This is the content for Box Breathing.")
        gr.Button("Va")
    with gr.Tab("Calming"):
        gr.Markdown("This is the content for Calming.")
    with gr.Tab("5-5-5"):
        gr.Markdown("This is the content for 5-5-5.")

app.launch()