<!-- Custom Tabs -->
<div class="tab-btns">
  <button class="tab active-btn" data-tab-btn="1">Basic</button>
  <button class="tab" data-tab-btn="2">Standard</button>
  <button class="tab" data-tab-btn="3">Premium</button>
    <button class="tab" data-tab-btn="4">Ultra</button>

</div>

<!-- Content -->
<div class="container">
  <div class="tab-content active" data-tab-content="1">
    <div class="card b-grey">
      <h2 class="card-title">Basic</h2>
      <p class="card-text">$<strong>49.99</strong></p>
      <ul class="card-list">
         <li class="card-list-item"><img width="20"height="20" src="https://cdn.iconscout.com/icon/free/png-256/tick-3404975-2843766.png" />Data Storage 100gb</li>
        <li class="card-list-item">
          <img width="20"height="20" src="https://cdn.iconscout.com/icon/free/png-256/tick-3404975-2843766.png" />All the Telephone Services</li>
        <li class="card-list-item"><img width="20"height="20" src="https://cdn.iconscout.com/icon/free/png-256/tick-3404975-2843766.png" />All Chats Services</li>
        
        <li class="card-list-item"><img width="20"height="20" src="https://www.freeiconspng.com/thumbs/cross-png/red-cross-png-33.png" />All Video Calls Services</li>
       
        <li class="card-list-item"><img width="20"height="20" src="https://www.freeiconspng.com/thumbs/cross-png/red-cross-png-33.png" />Live Session Services</li>
      </ul>
      <button class="card-btn">Subscribe</button>
    </div>
  </div>
  <div class="tab-content" data-tab-content="2">
    <div class="card b-violet">
      <h2 class="card-title">Standard</h2>
      <p class="card-text">$<strong>99.99</strong></p>
      <ul class="card-list">
          <li class="card-list-item"><img width="20"height="20" src="https://cdn.iconscout.com/icon/free/png-256/tick-3404975-2843766.png" />Data Storage 200gb</li>
        <li class="card-list-item">
          <img width="20"height="20" src="https://cdn.iconscout.com/icon/free/png-256/tick-3404975-2843766.png" />All the Telephone Services</li>
        <li class="card-list-item"><img width="20"height="20" src="https://cdn.iconscout.com/icon/free/png-256/tick-3404975-2843766.png" />All Chats Services</li>
        
        <li class="card-list-item"><img width="20"height="20" src="https://cdn.iconscout.com/icon/free/png-256/tick-3404975-2843766.png" />All Video Calls Services</li>
       
        <li class="card-list-item"><img width="20"height="20" src="https://www.freeiconspng.com/thumbs/cross-png/red-cross-png-33.png" />Live Session Services</li>
      </ul>
      <button class="card-btn">Subscribe</button>
    </div>

  </div>
  <div class="tab-content" data-tab-content="3">
    <div class="card b-purple">
      <h2 class="card-title">Premium</h2>
      <p class="card-text">$<strong>199.99</strong></p>
      <ul class="card-list">
        <li class="card-list-item"><img width="20"height="20" src="https://cdn.iconscout.com/icon/free/png-256/tick-3404975-2843766.png" />Data Storage 500gb</li>
        <li class="card-list-item">
          <img width="20"height="20" src="https://cdn.iconscout.com/icon/free/png-256/tick-3404975-2843766.png" />All the Telephone Services</li>
        <li class="card-list-item"><img width="20"height="20" src="https://cdn.iconscout.com/icon/free/png-256/tick-3404975-2843766.png" />All Chats Services</li>
        
        <li class="card-list-item"><img width="20"height="20" src="https://cdn.iconscout.com/icon/free/png-256/tick-3404975-2843766.png" />All Video Calls Services</li>
       
        <li class="card-list-item"><img width="20"height="20" src="https://cdn.iconscout.com/icon/free/png-256/tick-3404975-2843766.png" />Live Session Services</li>
      </ul>
      <button class="card-btn">Subscribe</button>
    </div>
  </div>
  
  <div class="tab-content" data-tab-content="4">
    <div class="card b-lightpurple">
      <h2 class="card-title">Ultra</h2>
      <p class="card-text">$<strong>299.99</strong></p>
      <ul class="card-list">
        <li class="card-list-item"><img width="20"height="20" src="https://cdn.iconscout.com/icon/free/png-256/tick-3404975-2843766.png" />Data Storage 1000gb</li>
        <li class="card-list-item">
          <img width="20"height="20" src="https://cdn.iconscout.com/icon/free/png-256/tick-3404975-2843766.png" />All the Telephone Services</li>
        <li class="card-list-item"><img width="20"height="20" src="https://cdn.iconscout.com/icon/free/png-256/tick-3404975-2843766.png" />All Chats Services</li>
        
        <li class="card-list-item"><img width="20"height="20" src="https://cdn.iconscout.com/icon/free/png-256/tick-3404975-2843766.png" />All Video Calls Services</li>
       
        <li class="card-list-item"><img width="20"height="20" src="https://cdn.iconscout.com/icon/free/png-256/tick-3404975-2843766.png" />Live Session Services</li>
        <li class="card-list-item"><img width="20"height="20" src="https://cdn.iconscout.com/icon/free/png-256/tick-3404975-2843766.png" />Meeting Scheduling and <br /> Management</li>
      </ul>
      <button class="card-btn">Subscribe</button>
    </div>
  </div>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ol,
ul {
  list-style: none;
}

.tab-btns {
  margin: 1rem 2rem 0;
  display: flex;
  justify-content: center;
  gap: 3rem;

  .tab {
    border: none;
    border-radius: 4px;
    background-color: rebeccapurple;
    color: white;
    padding: 0.4rem 1.2rem;
    cursor: pointer;
    transition:all .3s linear; 
  }
    .active-btn {
      border: 1px solid rebeccapurple;
      outline: 3px solid rebeccapurple;
      outline-offset: 3px;
      border-radius: 20px;
    }

  @media screen and (max-width: 500px) {
    gap: 1rem;

    .tab {
      padding: 0.4rem 0.8rem;
    }
  }
}

.container {
  margin-top: 30px;
  display: grid;
  place-items: center;
}

.tab-content {
  max-height: 0;
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  overflow: hidden;
  transition: all 0.3s linear;
}

.active {
  max-height: 450px;
  padding: 1.5rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

// Card Styling
.card {
  padding: 1rem 1.5rem;
  border: 2px solid lightgrey;
  min-height: 400px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  box-shadow: 16px 18px 17px -11px rgba(175, 184, 177, 1);

  &-title {
    font-size: 2rem;
    color: rgb(0, 0, 0, 0.8);
  }
  &-list {
    margin-top: 30px;
    display: grid;
    gap: 0.8rem;
    color: rgb(0, 0, 0, 0.9);
    &-item {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
  }
  &-btn {
    margin-top: auto;
    border: none;
    padding: 0.4rem 1.4rem;
    background-color: #603fef;
    color: white;
    border-radius: 20px;
    cursor: pointer;
  }

  @media screen and (max-width: 500px) {
    padding: 0.7rem 1.2rem;
    border: 2px solid lightgrey;
    min-width: 220px;
  }
}

.b-violet {
  border: 1px solid #c9a0ff;
  outline: 3px solid #c9a0ff;
  outline-offset: 5px;
}

.b-purple {
  border: 1px solid #603fef;
  outline: 3px solid #603fef;
  outline-offset: 5px;
}

.b-grey {
  border: 1px solid lightgrey;
  outline: 3px solid lightgrey;
  outline-offset: 5px;
}

.b-lightpurple {
  border: 1px solid #5b3b8c;
  outline: 3px solid #5b3b8c;
  outline-offset: 5px;
}
View Compiled
const tabBtns = document.querySelector(".tab-btns");

 tabBtns.addEventListener("click", (e) => {
   Array.from(tabBtns.children).forEach(btn => {
     btn.classList.remove("active-btn");
   })
    let activeTab = e.target.getAttribute("data-tab-btn");
    let tabContent = document.querySelectorAll(".tab-content");
    if(activeTab) {
      e.target.classList.add("active-btn");
    Array.from(tabContent).forEach((content) => {
      const activeContent = content.getAttribute("data-tab-content");
      if(activeContent === activeTab){
        content.classList.add("active")
      }
      else{
        content.classList.remove("active")
      }
    });
    }
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.