flex-element-tabs/dist/esm/components/TabsContainer.css

flex-element-tabs is a versatile JavaScript library for creating dynamic tabs in web interfaces. It offers customizable, lightweight, and easy-to-integrate tab components, enhancing user navigation and content organization in web applications.

.tabs-head {
    display: flex;
    align-items: center;
}

.tabs-item {
    min-width: 150px;
    height: 30px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border: solid 1px #e9e9e9;
    margin-right: 2px;
    color: #ccc;
    padding: 5px;
    border-radius: 3px;
    font-size: 14px;

}


.tabs-item.active {
    color: #bd0000;
}

.tabs-container {
    position: absolute;
    visibility: hidden;
    width: 100%;
    border: solid 1px #e9e9e9;
    margin-top: 2px;
    min-height: 400px;
    border-radius: 3px;
    padding: 5px;
    transition: all 0.1s ease-in-out;
    opacity: 0;
}


.tabs-container.active {
    visibility: visible;
    transition: all 0.2s ease-in-out;
    opacity: 1;
}

.tabs-no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
}