JavaScript Tabs Style 2

CODEPEN:

JavaScript Tabs Style

---

Github: https://github.com/furkangulsen98/HTML-CSS-JAVASCRIPT/tree/master/JavaScript%20Tabs%20Style%202

---

HTML CODE:

    <div class="container">
        <h2>Tabs Styled</h2>
        <div class="tabs">
            <div class="tab tab1 " onclick="clickFunction(event,'js')">JavaScript</div>
            <div class="tab tab2 " onclick="clickFunction(event,'py')">Python</div>
            <div class="tab tab3 " onclick="clickFunction(event,'css')">CSS</div>
        </div>

        <div class="text_box">
            <div class="text tab_box1" id="js">
                JavaScript is one of the most popular and dynamic programming
                languages used for creating and developing websites.
            </div>
            <div class="text tab_box2" id="py">
                Python is a highly used and all-purpose programming
                language which is dynamic in nature.
            </div>
            <div class="text tab_box3" id="css">
                Some of the elements which CSS has an impact on include
                font size, font style, the overall layout.
            </div>
        </div>
    </div>

---

CSS CODE:

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
body {
    background: #262626;
    display: flex;
    justify-content: center;
    margin-top: 150px;
    font-family: 'Roboto Condensed', sans-serif;
}
.container{
    width: 330px;
    height: auto;
    border-radius: 8px 8px 0px 0px;
}
h2 {
    text-align: center;
    margin-bottom: 50px;
    color: #ccc;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: normal;
    text-shadow: 0px 20px 36px rgba(0, 0, 0, 0.45);
    font-size: 32px;
}
.tabs {
    position: relative;
    width: 100%;
    height: 40px;
    color: #ccc;
    border-radius: 8px 8px 0px 0px;
}
.tab {
    width: 110px;
    float: left;
    text-align: center;
    line-height: 40px;
    font-family: arial;
    cursor: pointer;
    transition: .3s;
}
.text_box {
    position: relative;
    display: block;
    width: 100%;
}
.text {
    position: absolute;
    padding: 25px;
    width: 100%;
    height: 120px;
    background: #d5d5d5;
    box-sizing: border-box;
    border-radius: 0px 0px 8px 8px;
    box-shadow: 0px 20px 36px rgba(0, 0, 0, 0.45);
}
.tab1,.tab2,.tab3 {
    background: #bc2626;
}
.tab1{border-radius:8px 0px 0px 0px}
.tab3{border-radius:0px 8px 0px 0px}
.tab1:hover,.tab2:hover,.tab3:hover{
    transform: scaleY(1.1) translateY(-2px);
    box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.15);
}
.tab1.active,
.tab2.active,
.tab3.active{
    transform: scaleY(1.3) translateY(-3px);
    background: #d5d5d5;
    color: #262626;
    box-shadow: 10px 0px 10px #262626;
}

---

JS CODE:

   function clickFunction(eve, section) {
            let i, text, tabs;
            text = document.getElementsByClassName("text");
            tabs = document.getElementsByClassName("tab");
            for (i = 0; i < text.length; i++) {
                text[i].style.display = "none";
            }
            for (i = 0; i < tabs.length; i++) {
                tabs[i].className = tabs[i].className.replace("active","");
            }
            document.getElementById(section).style.display = "block";
            eve.currentTarget.className += "active";
        }