<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
</ul>

<div class="tab-content">
  <div id="tab1" class="tab-pane active">Content for Tab 1</div>
  <div id="tab2" class="tab-pane">Content for Tab 2</div>
  <div id="tab3" class="tab-pane">Content for Tab 3</div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $('.nav-tabs a').click(function() {
    var tabId = $(this).attr('href');
    $('.nav-tabs li').removeClass('active');
    $(this).parent('li').addClass('active');
    $('.tab-content .tab-pane').removeClass('active');
    $(tabId).addClass('active');
  });
});
</script>

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    tabs = [
        {'id': 'tab1', 'title': 'Tab 1', 'content': 'Content for Tab 1'},
        {'id': 'tab2', 'title': 'Tab 2', 'content': 'Content for Tab 2'},
        {'id': 'tab3', 'title': 'Tab 3', 'content': 'Content for Tab 3'}
    ]
    return render_template('index.html', tabs=tabs)

if __name__ == '__main__':
    app.run()

<ul class="nav nav-tabs">
  {% for tab in tabs %}
  <li{% if loop.first %} class="active"{% endif %}><a href="#{{ tab.id }}">{{ tab.title }}</a></li>
  {% endfor %}
</ul>

<div class="tab-content">
  {% for tab in tabs %}
  <div id="{{ tab.id }}" class="tab-pane{% if loop.first %} active{% endif %}">{{ tab.content }}</div>
  {% endfor %}
</div>