<div class="col-lg-12 col-md-12 my-sm-auto ms-sm-auto me-sm-0 mx-auto mt-3">
  <div class="nav-wrapper position-relative end-0">
    <ul class="nav nav-pills nav-fill p-1" role="tablist">
      <li class="nav-item">
        <a class="nav-link mb-0 px-0 py-1 active d-flex align-items-center justify-content-center" 
           id="nav-strength-tab" 
           data-bs-toggle="tab" 
           data-bs-target="#nav-strength" 
           href="javascript:;" 
           role="tab" 
           aria-controls="nav-strength"
           aria-selected="true">
          <i class="fa-solid fa-thumbs-up"></i>
          <span class="ms-2">Strengths</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link mb-0 px-0 py-1 d-flex align-items-center justify-content-center" 
           id="nav-weaknesses-tab" 
           data-bs-toggle="tab" 
           data-bs-target="#nav-weaknesses" 
           href="javascript:;" 
           role="tab" 
           aria-controls="nav-weaknesses"
           aria-selected="false">
          <i class="fa-solid fa-thumbs-down"></i>
          <span class="ms-2">Weaknesses</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link mb-0 px-0 py-1 d-flex align-items-center justify-content-center"  
           id="nav-opportunities-tab" 
           data-bs-toggle="tab" 
           data-bs-target="#nav-opportunities" 
           href="javascript:;" 
           role="tab" 
           aria-controls="nav-opportunities"
           aria-selected="false">
          <i class="fa-solid fa-chart-line"></i>
          <span class="ms-2">Opportunities</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link mb-0 px-0 py-1 d-flex align-items-center justify-content-center"  
           id="nav-threats-tab" 
           data-bs-toggle="tab" 
           data-bs-target="#nav-threats" 
           href="javascript:;" 
           role="tab" 
           aria-controls="nav-threats"
           aria-selected="false">
          <i class="fa-solid fa-triangle-exclamation"></i>
          <span class="ms-2">Threats</span>
        </a>
      </li>
    </ul>
  </div>
</div>

<!-- Tab Content -->
<div class="tab-content mt-3">
  <div class="tab-pane fade show active" id="nav-strength" role="tabpanel" aria-labelledby="nav-strength-tab">
    <p>Strengths content goes here...</p>
  </div>
  <div class="tab-pane fade" id="nav-weaknesses" role="tabpanel" aria-labelledby="nav-weaknesses-tab">
    <p>Weaknesses content goes here...</p>
  </div>
  <div class="tab-pane fade" id="nav-opportunities" role="tabpanel" aria-labelledby="nav-opportunities-tab">
    <p>Opportunities content goes here...</p>
  </div>
  <div class="tab-pane fade" id="nav-threats" role="tabpanel" aria-labelledby="nav-threats-tab">
    <p>Threats content goes here...</p>
  </div>
</div>