JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="checklist">
  <li>Su</li>
  <li>Mo</li>
  <li>Tu</li>
  <li>We</li>
  <li>Th</li>
  <li>Fr</li>
  <li>Sa</li>
</ul>

CSS

.checklist {
    border: 2px solid #e8e8e8;
    border-radius: 30px;
    display: inline-block;
    padding: 4px;
    width: auto;
    white-space: nowrap;
}

.checklist > li {
    border: 2px solid transparent;
    color: #0036ff;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    padding: 10px 0;
    text-align: center;
    width: 38px;
}
.checklist > li:not(:first-child) {
    margin-left: -7px;
}


.checklist > li.active {
    border-top: 2px solid #0036ff;
    border-bottom: 2px solid #0036ff;
    border-radius: 0;
    color: #000;
}

.checklist li.active:first-child,
.checklist li:not(.active) + li.active {
    border-bottom-left-radius: 50px;
    border-left: 2px solid #0036ff;
    border-top-left-radius: 50px;
}

.checklist li.active:last-child,
.checklist li.right-side {
    border-bottom-right-radius: 50px;
    border-right: 2px solid #0036ff;
    border-top-right-radius: 50px;
}

JavaScript

$('.checklist li').on('click', function(){
  $(this).toggleClass('active');
  $('.checklist li').removeClass('right-side').filter('.active').each(function(){
    if (!$(this).next().hasClass('active')) {
      $(this).addClass('right-side');
    }
  });
});