Untitled

<div class="mdc-card" style="width: 600px; height: 300px;">
  <div class="mdc-tab-bar" role="tablist">
    <div class="mdc-tab-scroller">
      <div class="mdc-tab-scroller__scroll-area">
        <div class="mdc-tab-scroller__scroll-content">
          <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
            <span class="mdc-tab__content">
              <span class="mdc-tab__text-label">Android</span>
            </span>
            <span class="mdc-tab-indicator mdc-tab-indicator--active">
              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
            </span>
            <span class="mdc-tab__ripple"></span>
          </button>
          <button class="mdc-tab" role="tab" aria-selected="false" tabindex="-1">
            <span class="mdc-tab__content">
              <span class="mdc-tab__text-label">iOS</span>
            </span>
            <span class="mdc-tab-indicator">
              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
            </span>
            <span class="mdc-tab__ripple"></span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

.mdc-card {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mdc-tab-bar {
  width: auto; /* Tự động điều chỉnh chiều rộng dựa trên nội dung tab */
  margin-bottom: auto; /* Canh chỉnh lề dưới cho phù hợp */
}

/* Đây chỉ là một ví dụ đơn giản, tùy thuộc vào theme hiện có của bạn, bạn có thể cần tùy chỉnh màu sắc và phong cách khác cho phù hợp */
.mdc-tab {
  min-width: 160px; /* Đặt chiều rộng tối thiểu cho mỗi tab để chúng không nhìn chật chội */
}

/* Thêm phong cách cho active tab */
.mdc-tab--active .mdc-tab-indicator__content--underline {
  background-color: blue; /* Thay đổi màu của tab đang hoạt động */
}