About Raw Feeding
.tabs {
display: flex;
padding: 0 8px;
overflow: hidden;
& .tab-item {
flex-grow: 1;
max-width: 200px;
padding: 4px 3px;
position: relative;
& .tab {
flex-grow: 1;
display: flex;
align-items: center;
position: relative;
padding: 4px 8px;
border-radius: 8px;
white-space: nowrap;
transition: background-color 300ms;
}
&:not(:last-child) .tab::after {
content: '';
position: absolute;
right: -4px;
display: block;
width: 2px;
height: 1em;
background-color: #555;
transition: opacity 100ms;
}
&:hover .tab {
background-color: #555;
}
&:has(+ :hover) .tab::after,
&:hover .tab::after {
opacity: 0;
}
}
}
/* Style active tab */
body:has(input[name=tab-content][id=tab-content-2]:checked) label[for=tab-content-1].tab-item,
body:has(input[name=tab-content][id=tab-content-3]:checked) label[for=tab-content-2].tab-item,
body:has(input[name=tab-content][id=tab-content-4]:checked) label[for=tab-content-3].tab-item,
body:has(input[name=tab-content][id=tab-content-5]:checked) label[for=tab-content-4].tab-item {
& .tab::after {
opacity: 0;
}
}
body:has(input[name=tab-content][id=tab-content-1]:checked) label[for=tab-content-1].tab-item,
body:has(input[name=tab-content][id=tab-content-2]:checked) label[for=tab-content-2].tab-item,
body:has(input[name=tab-content][id=tab-content-3]:checked) label[for=tab-content-3].tab-item,
body:has(input[name=tab-content][id=tab-content-4]:checked) label[for=tab-content-4].tab-item,
body:has(input[name=tab-content][id=tab-content-5]:checked) label[for=tab-content-5].tab-item {
& .tab {
background-color: #555;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
height: 100%;
align-items: start;
&::after {
opacity: 0;
}
}
&::before, &::after {
content: '';
position: absolute;
bottom: 0;
display: block;
width: 16px;
height: 16px;
background-color: #555;
}
&::before {
transform: translateX(-100%);
border-bottom-right-radius: 8px;
background-color: #222;
box-shadow: 8px 0 0 0 #555;
z-index: -1;
}
&::after {
right: 3px;
transform: translateX(100%);
border-bottom-left-radius: 50%;
background-color: #222;
box-shadow: -8px 0 0 0 #555;
z-index: -1;
}
}
/* System display content */
content {
display: none;
&:has(input[name=tab-content]:checked) {
display: block;
}
}
content > input[name=tab-content] {
display: none;
}
/* Base UI */
body {
background-color: #222;
color: #fff;
margin: 0;padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
main {
flex-grow: 1;
display: block;
background-color: #555;
color: #fff;
width: 100%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
& content {
padding: 10vmin 0;
text-align: center;
& span {
font-weight: bold;
font-size: 2rem;
}
}
}
Tab Content 1
Tab Content 2
Tab Content 3 Tab Content 4 Tab Content 5
Click other tabs to change the contents
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis illo necessitatibus quod, at corrupti et? Repudiandae, ipsum quis voluptatibus maxime deleniti sit, dolore illo, fugiat eum reprehenderit officia nulla maiores?