DEMO

HTML

		<div class="tab01">
    <label>
        <input type="radio" name="tab01" checked>
        タブ1
    </label>
    <div>本文1が入ります。</div>

    <label>
        <input type="radio" name="tab01">
        タブ2
    </label>
    <div>本文2をここに入れてください。</div>

    <label>
        <input type="radio" name="tab01">
        タブ3
    </label>
    <div>本文3がここに入るといいと思います。</div>
</div>	

		

HTML説明

タブの増減方法
<label>~</div> までの記述が1つのタブの要素です。
増やす場合はコピー％ペースト、減らす場合は削除してください。

CSS

		<style>
.tab01 {
    display: flex;
    flex-wrap: wrap;
    max-width: 580px;
    margin: 0 auto;
    font-size: .9em;
}

.tab01 > label {
    flex: 1 1;
    order: -1;
    min-width: 70px;
    padding: .7em 1em .5em;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    background: #ffe3fd;
    color: #535353;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}

.tab01 > label:hover {
    opacity: .5;
}

.tab01 input {
    display: none;
}

.tab01 > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background: #fff;
}

.tab01 label:has(:checked) {
    background-color: #fff;
    border-color: #ff9bf6 #f0f0f0 #fff;
    border-style: solid;
    border-width: 4px 1px 1px;
    border-radius: 5px;
    color: #333333;
}

.tab01 label:has(:checked) + div {
    display: block;
    border: solid 1px #f0f0f0;
}
</style>

		

CSS説明

色の変更方法
各色コードを任意のものに書き換えてください。
選択されたタブの上線の色＝41行目
選択されていないタブの背景色＝17行目

※疑似クラス「:has(:checked)」が対応していないブラウザがある可能性があります。ご注意のうえご使用ください。