I’m working on a tab component where I want to create a smooth, curved transition between the active tab and the next tab.
I have tried using CSS pseudo-elements, but I couldn’t achieve the desired effect. Here’s a simplified version of my current code on CodePen:
CodePen Link:
https://codepen.io/Tomas-Gil-Amodeo/pen/WNBdVBv
My actual code is React and Tailwind, and this is how it looks:
import { useState } from "react";
import FAQCollapsible from "./FAQCollapsible";
import "./styles.css";
...
const FAQTabs = () => {
const [activeTab, setActiveTab] = useState(tabs[0]);
const handleTabClick = (tab) => {
setActiveTab(tab);
};
return (
<div className="my-[80px] mx-auto mx-full md:my-0 md:py-[80px] md:px-[196px]">
{/* <h2>FAQs</h2>
<p>Find answers to frequently asked questions </p>
<div className="max-w-full md:max-w-[768px] mx-auto rounded-lg border border-purple top-left-border-rad-none sd-tabs">*/}
<div
container
className="md:max-w-[768px] mx-auto border top-left-border-rad-none border-purple rounded-[20px]"
>
<div
data-tab-labels-container
className="flex justify-start bg-white -mt-[7.75%] rel-1px"
>
{tabs.map((tab, index) => {
const isActive = activeTab === tab;
const isNextTab =
tabs[(tabs.indexOf(activeTab) + 1) % tabs.length] === tab;
const nextTabClass =
isNextTab && index !== 0 ? "next-tab-border-radius" : "";
return (
<button
style={{ fontFamily: "Clash Display" }}
key={tab}
className={`px-[1rem] py-[13px] md:px-14 md:py-4 text-center tabs-border text-sm md:text-[18px] leading-[140%] border-rad-top ${
isActive
? "bg-white negative-fff-border text-black font-semibold special-class"
: isNextTab
? `bg-[#A05BF7] text-white font-medium border-none ${nextTabClass}`
: "bg-purple text-white font-medium border-none"
}`}
onClick={() => handleTabClick(tab)}
>
{tab}
</button>
);
})}
</div>
// collapsibles section
</div>
</div>
);
};
export default FAQTabs;
css:
.negative-fff-border {
position: relative;
}
.negative-fff-border::after {
content: "";
position: absolute;
width: 100%;
height: 10px;
bottom: -5px;
background: #fff;
bottom: -8%;
left: 0;
}
.top-left-border-rad-none {
border-top-left-radius: 0px !important;
}
.next-tab-border-radius {
border-bottom-left-radius: 20px;
}
.tabs-border {
border-top: 1px solid #7c1be0;
border-left: 1px solid #7c1be0;
border-right: 1px solid #7c1be0;
}
.rel-1px {
position: relative;
right: 1px;
}
.border-rad-top {
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}
.next-to-active {
background: #a05bf7;
}
.special-class {
position: relative;
}
.special-class::after {
content: "";
position: absolute;
width: 22px;
height: 20px;
background: #fff;
bottom: -11px;
left: calc(100% - 10px);
border-bottom-left-radius: 20px;
transform: rotate(45deg);
z-index: 1;
}
Any help is highly appreciated!