Más ejercicios en pablomonteserin.com 
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="robots" content="noindex, follow">
	<title>Tabs</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">


</head>

<body>
	<ul class="nav nav-tabs" id="myTab" role="tablist">
		<li class="nav-item" role="presentation">
			<a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home"
				aria-selected="true">Home</a>
		</li>
		<li class="nav-item" role="presentation">
			<a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile"
				aria-selected="false">Profile</a>
		</li>
		<li class="nav-item" role="presentation">
			<a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact"
				aria-selected="false">Contact</a>
		</li>
	</ul>
	<div class="tab-content" id="myTabContent">
		<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Tab 1 content</div>
		<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Tab 2 Content</div>
		<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Tab 3 content</div>
	</div>


	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>