tabs.tabs.underlineTab.title

쉬움

tabs.tabs.underlineTab.description

#click#css-only#smooth

라이브 데모

코드

UnderlineTab.tsx

export const UnderlineTab = () => {
  const [activeTab, setActiveTab] = useState(0);
  const tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
  return (
    <div className="underline-tab-list">
      {tabs.map((tab, index) => (
        <button
          key={index}
          className={`underline-tab ${activeTab === index ? 'active' : ''}`}
          onClick={() => setActiveTab(index)}
        >
          {tab}
        </button>
      ))}
    </div>
  );
};

tabs.css

.underline-tab {
  padding: 0.75rem 1.5rem;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}
.underline-tab.active {
  color: var(--accent-purple);
  border-bottom-color: var(--accent-purple);
}