<div>
            <h1>Hello World</h1>
            <p>Welcome to my website!</p>
            </div>            
        
        

        
            
            @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

            .card-tabs {
                font-family: Inter;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(5, 1fr);
                grid-column-gap: 0px;
                grid-row-gap: 0px;
                max-width: 400px;
                border: 4px solid aqua;
                border-radius: 10px;
                align-items: center;
                background-color: black;
                color: white;
    
            }
    
            .card-tabs > .tab {
                border: 4px solid aqua;
                text-align: center;
                padding: 5px;
                margin-top: 20px;
            }
    
            .card-tabs > .tab:hover {
                background-color: aquamarine;
                cursor: pointer;
            }
    
            .tab1 { grid-area: 1 / 1 / 2 / 2; }
            .tab2 { grid-area: 1 / 2 / 2 / 3; }
            .tab3 { grid-area: 1 / 3 / 2 / 4; }
            .text-area { 
                grid-area: 2 / 1 / 4 / 4;
            }
           
            .code-shown {
                display: inline;
                color: greenyellow;
            }
    
            .code-hidden {
                display: none;
            }
                
        
        

        
            
            var htmlTab = document.querySelector('.tab-html')
            var cssTab = document.querySelector('.tab-css')
            var jsTab = document.querySelector('.tab-js')

            var htmlCode = document.querySelector('.code-html')
            var cssCode = document.querySelector('.code-css')
            var jsCode = document.querySelector('.code-js')


            htmlTab.addEventListener("click", function(){
                console.log("html tab");
                showCode("html");
                hideCode("css");
                hideCode("js");
            });

            cssTab.addEventListener("click", function(){
                console.log("css tab");
                showCode("css");
                hideCode("html");
                hideCode("js");
            });

            jsTab.addEventListener("click", function(){
                console.log("js tab");
                showCode("js");
                hideCode("html");
                hideCode("css");
            });

            function showCode(tab_type){
                if (tab_type == "html"){
                    htmlCode.classList.add("code-shown")
                    htmlCode.classList.remove("code-hidden")
                }

                if (tab_type == "css"){
                    cssCode.classList.add("code-shown")
                    cssCode.classList.remove("code-hidden")
                }

                if (tab_type == "js"){
                    jsCode.classList.add("code-shown")
                    jsCode.classList.remove("code-hidden")
                }
            }

            function hideCode(tab_type){
                if (tab_type == "html"){
                    htmlCode.classList.add("code-hidden")
                    htmlCode.classList.remove("code-shown")
                }

                if (tab_type == "css"){
                    cssCode.classList.add("code-hidden")
                    cssCode.classList.remove("code-shown")
                }

                if (tab_type == "js"){
                    jsCode.classList.add("code-hidden")
                    jsCode.classList.remove("code-shown")
                }
            }