Untitled

<div class="mdc-card" style="width: 33%;">
  <!-- Đặt mdc-tab-bar với width 50% so với mdc-card -->
  <div class="mdc-tab-bar" role="tablist" style="width: 50%; display: flex;">
    <!-- Các tabs sẽ có chiều rộng bằng nhau và chiếm toàn bộ không gian của tab bar -->
    <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0" style="flex-grow: 1;">
      <span class="mdc-tab__content">
        <!-- Nội dung tab Android -->
        Android
      </span>
    </button>
    <button class="mdc-tab" role="tab" aria-selected="false" tabindex="-1" style="flex-grow: 1;">
      <span class="mdc-tab__content">
        <!-- Nội dung tab iOS -->
        iOS
      </span>
    </button>
  </div>
  <!-- Thêm nội dung khác của mdc-card nếu cần -->
</div>

// CSS
/* Hiệu ứng hover */
.mdc-tab:hover {
  background-color: #ececec; /* Màu nền bạn muốn hiển thị khi hover */
}

/* Hiệu ứng cho tab đang active */
.mdc-tab--active {
  color: #6200ee; /* Màu của tab đang active */
  border-bottom: 2px solid #6200ee; /* Gạch chân tab đang active */
}

// Lấy tất cả các tabs
var tabs = document.querySelectorAll('.mdc-tab');

// Thêm sự kiện 'click' cho mỗi tab
tabs.forEach(function(tab) {
  tab.addEventListener('click', function() {
    // Xoá class 'mdc-tab--active' từ tất cả các tabs
    tabs.forEach(function(tab) {
      tab.classList.remove('mdc-tab--active');
    });

    // Thêm class 'mdc-tab--active' cho tab được click
    this.classList.add('mdc-tab--active');
  });
});