• HTML
• CSS
• JS

HTML

<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />

<div class="container">
    <div class="tabs">
        <h3 class="active">Tab 1</h3>
        <h3>Tab 2</h3>
        <h3>Tab 3</h3>
        <h3>Tab 4</h3>
    </div>
    <div class="tab-content">
        <!-- First -->
        <div class="active">
            <h4>First Title</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. 
            </p>
        </div>
        <!-- Second -->
        <div>
            <h4>Second Title</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. 
            </p>
        </div>
        <!-- Third -->
        <div>
            <h4>Third Title</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. 
            </p>
        </div>
        <!-- Fourth -->
        <div>
            <h4>Fourth Title</h4>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. 
            </p>
        </div>
    </div>
</div>

CSS

*{
    padding:0;
    margin:0;
    box-sizing:border-box;
    font-family:"Poppins",sans-serif;
}
body{
    background-color:#4d5bf9;
}
.container{
    background-color:#ffffff;
    width:95vmin;
    font-size:16px;
    min-width:30em;
    height:30em;
    position:absolute;
    transform:translate(-50%,-50%);
    top:50%;
    left:50%;
    display:grid;
    grid-template-columns:2fr 9fr;
    box-shadow:0 20px 40px rgba(0,0,0,0.2);
}
.tabs{
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    background-color:#e4e9fd;
}
h3{
    height:33.33%;
    display:grid;
    place-items:center;
    font-size:1.2em;
    font-weight:600;
    cursor:pointer;
}
.tab-content{
    background-color:#ffffff;
    padding:1em 1.5em;
}
.tab-content h4{
    font-size:1.8em;
    margin-bottom:0.5em;
    color:#000024;
    font-size:600;
}
.tab-content p{
    text-align:justify;
    line-height:1.9;
    letter-spacing:0.4px;
    color:#202238;
}
.tab-content div{
    display:none;
}
.tab-content .active{
    display:block;
}
.tabs .active{
    background-color:#ffffff;
    color:#4d5bf9;
}
@media screen and (max-width:500px){
    .container{
        font-size:14px;
        min-width:90vmin;
        height:70vh;
    }
    .tab-content{
        padding:1em 1.2em;
}

JS

let tabs = document.querySelectorAll(".tabs h3");
let tabContents = document.querySelectorAll(".tab-content div");

tabs.forEach((tab,index) => {
   tab.addEventListener("click",() => {
       tabContents.forEach((content) => {
           content.classList.remove("active");
       });
       tabs.forEach((tab) => {
          tab.classList.remove("active");
       });
       tabContents[index].classList.add("active");
       tabs[index].classList.add("active");
   });
});

// All the credits: https://www.youtube.com/watch?v=oMP8u1LGUyU