:root {
--white: #FFF;
--gray: #F3F3F3;
--gray-mid: #9D9D9D;
--gray-dark: #3e3e3e;
--gray-hover: #F7F7F7;
--body-background: #dfdfdf;
}
body {
font-family: 'Poppins';
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 16px;
background-color: var(--body-background);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.tabs-container {
padding: 16px;
width: 100%;
max-width: 480px;
min-width: 320px;
display: flex;
margin: 10px;
border-radius: 16px;
background-color: var(--white);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
header {
position: relative;
}
.tab-content-wrapper {
overflow-y: hidden;
overflow-x: auto;
height: 300px;
transition: all 0.45s ease-in-out;
padding: 0 16px;
}
.tab-content h2 {
color: var(--gray-dark);
font-size: 1.2rem;
font-weight: 600;
margin-top: 0px;
margin-bottom: 8px;
}
.tab-content {
font-size: 0.8rem;
min-height: 300px;
min-width: 240px;
overflow-x: auto;
transition: all 0.45s ease-in-out;
}
.tabs {
position: relative;
display: flex;
flex-direction: column;
border-right: 1px solid #F0F0F0;
list-style-type: none;
padding-right: 16px;
gap: 8px;
}
.tabs a {
position: relative;
display: flex;
text-decoration: none;
width: 100%;
font-size: 14px;
font-weight: 600;
color: var(--gray-mid);
text-align: left;
border-radius: 8px;
justify-content: start;
padding: 12px;
align-items: center;
gap: 8px;
transition: all 0.3s ease-in-out;
}
.tabs a img {
height: 20px;
width: 20px;
}
.tabs .active, .tabs a:hover {
font-weight: 700;
outline: none;
color: white;
background-color: var(--gray-dark);
}
.tabs a svg {
stroke: var(--gray-mid);
}
.tabs .active svg {
stroke: var(--white);
}
.tabs a:hover svg {
stroke: var(--white);
}