.code-container {
    border: 1px solid #ccc;
    padding: 10px;
    position: relative;
}
.tabs {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    background-color: #f1f1f1;
    border-bottom: 1px solid #ccc;
}
.tab-button, .tab-button2 {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 8px 15px;
    transition: 0.3s;
    border-left: 1px solid #ccc;
}
    .tab-button:hover, .tab-button2:hover {
        background-color: #ddd;
    }
    .tab-button.active, .tab-button2.active {
        background-color: #ccc;
    }
.code-content, .code-content2 {
    display: none;
    padding-top: 40px; /* Space for tabs */
}
    .code-content.active, .code-content2.active {
        display: block;
    }
textarea {
    width: 100%;
    height: 250px;
    border: 1px solid #eee;
    padding: 10px;
    box-sizing: border-box;
    resize: vertical;
    font-family: monospace;
    white-space: nowrap; /* Prevent text from wrapping */
    overflow-x: auto; /* Enable horizontal scrolling when content overflows */
    white-space: pre-wrap;
}