Here is the spec that I need : Take special look at shadows and round corners. And that div content has also shadows and round corner.
I don't manager to setup box-shaddow and round corner correctly.
Here is what I did : tab coded, with the following code :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>test box shadow</title>
<style>
body {
margin: 50px;
background-color: #f3f4f6;
}
/*------------------ */
#version4 .tab-container {
display: flex;
flex-direction: column;
border-top: 0;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-radius: 0.75rem;
overflow: hidden;
width: 300px;
margin: 50px auto;
justify-content: center;
}
#version4 .tabs {
display: flex;
background-color: white;
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
overflow: hidden;
}
#version4 .tab {
position: relative;
cursor: pointer;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
background-color: white;
/* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); */
box-shadow: 0px 0px 6px #00000029;
padding: 10px 20px;
width: 100%;
}
#version4 .tab span {
padding-bottom: 2px;
}
#version4 .tab::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
background-color: white;
}
#version4 .tab:last-child {
border-right: none;
border-top-right-radius: 0.75rem;
}
#version4 .tab.active {
background-color: white;
position: relative;
}
#version4 .tab.active span {
border-bottom: 2px solid red;
}
#version4 .tab.active::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
background-color: white;
}
#version4 .tab-divider {
width: 100%;
height: 10px;
background-color: white;
border-top: 1px solid #ccc;
border-bottom: 1px solid white;
}
#version4 .divider-container {
display: flex;
background-color: white;
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
overflow: hidden;
box-sizing: border-box;
box-shadow: 0px 0px 0.375rem #00000029;
}
#version4 .divider-container[first] {
border-top-left-radius: 0;
}
#version4 .divider-container[last] {
border-top-right-radius: 0;
}
#version4 .divider-container .tab-divider:first-child {
border-left: 1px solid #ccc;
}
#version4 .divider-container .tab-divider.active:first-child {
border-left: 1px solid white;
}
#version4 .divider-container .tab-divider:last-child {
border-right: 1px solid #ccc;
}
#version4 .divider-container .tab-divider.active:last-child {
border-right: 1px solid white;
}
#version4 .tab-divider.active {
background-color: white;
border-top: 1px solid white;
}
#version4 .tab-content {
display: none;
padding: 20px;
/* border-top: 1px solid #ccc; */
background-color: white;
}
#version4 .content {
flex: 1;
}
#version4 .firstCorner {
border-top-left-radius: 0.75rem;
}
#version4 .lastCorner {
border-top-right-radius: 0.75rem;
}
#version4 .noCorner {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
</style>
</head>
<body>
<section id="version4">
<div class="tab-container">
<div class="tabs">
<div class="tab" onclick="changeTab('version4', 0)">
<span>Onglet 1</span>
</div>
<div class="tab" onclick="changeTab('version4', 1)">
<span>Onglet 2</span>
</div>
<div class="tab" onclick="changeTab('version4', 2)">
<span>Onglet 3</span>
</div>
</div>
<div class="divider-container dividers">
<div class="tab-divider"></div>
<div class="tab-divider"></div>
<div class="tab-divider"></div>
</div>
<div class="content">
<div class="tab-content" id="tabContent0">Contenu de l'onglet 1</div>
<div class="tab-content" id="tabContent1">Contenu de l'onglet 2</div>
<div class="tab-content" id="tabContent2">Contenu de l'onglet 3</div>
</div>
</div>
</section>
<script>
function changeTab(sectionId, tabIndex) {
const tabContents = document.querySelectorAll(`#${sectionId} .tab-content`);
const tabs = document.querySelectorAll(`#${sectionId} .tab`);
const dividers = document.querySelectorAll(`#${sectionId} .tab-divider`);
tabContents.forEach((content) => {
content.style.display = 'none';
});
tabs.forEach((tab) => {
tab.classList.remove('active');
});
dividers.forEach((tab) => {
tab.classList.remove('active');
});
tabContents[tabIndex].style.display = 'block';
tabs[tabIndex].classList.add('active');
dividers[tabIndex].classList.add('active');
const dividersContainer = document.querySelector(`#${sectionId} .divider-container`);
if (tabIndex === 0) {
dividersContainer.setAttribute('first', true);
dividersContainer.removeAttribute('last');
} else if (tabIndex === 2) {
dividersContainer.removeAttribute('fist');
dividersContainer.setAttribute('last', true);
} else {
dividersContainer.removeAttribute('first');
dividersContainer.removeAttribute('last');
}
}
changeTab('version4', 0);
</script>
</body>
</html>
=> Please advise how to add shadows and round corner correctly.