Adding a styled line underneath tabs and highlight selected tab

Question

I want to add a line underneath a set of tabs and also highlight the selected tab. I am using react and styled components and the list item should be highlighted with a bar underneath when the user selects it as active.

This is what it currently looks like

This is what it should look like

And this is the code i have so far

import { List, ListItems, Div } from './messageTab.elements';
function MessageTab() {
    return (

        <Tabs>
            <div label="Recent">
                Recent component
            </div>
            <div label="Unread">
                Unread component
            </div>
            <div label="Groups">
                Groups component
            </div>
        </Tabs>

    )
}


function Tabs(props) {
    const [activeTab, setActiveTab] = useState(props.children[0].props.label)
    const switchTabs = (tab) => {
        setActiveTab(tab);
    }

    console.log(activeTab);
    return (
        <Div>
            <List>
                {props.children.map((child) => {
                    const { label } = child.props;
                    return (
                        <Tab
                            activeTab={activeTab}
                            key={label}
                            label={label}
                            onClick={switchTabs}
                        />
                    );
                })}
            </List>
        </Div>
    );
}

function Tab(props) {
    const { label, onClick, activeTab } = props;
    console.log(activeTab);
    console.log(label);
    return (
        <ListItems onClick={() => onClick(label)}>{label}</ListItems>
    );
}

Here are my styled components

import styled from 'styled-components';

const ListItems = styled.li`
    margin-right : 6%;
    color: #9095A4;
    
`;

const List = styled.ul`
    display : flex;
    list-style-type : none;
    float : right;
    flex-direction: row;
    
`;

const Div = styled.div`
    display : flex;
    margin-left : 6%;
`;

export { List, ListItems, Div };

Answer 1

You can use an ::after pseudoselector to create and style a "tab".

const ListItems = styled.li`
  margin-right: 6%;
  color: #9095a4;

  ${(props) =>
    props.activeTab &&
    css`
      color: #0095ff;

      ::after {
        content: "";
        position: relative;
        height: 5px;
        margin-top: 0.5rem;
        border-radius: 5px 5px 0 0;
        background-color: #0095ff;
        display: block;
      }
    `}
`;

Add a border bottom to the list and set the width.

const List = styled.ul`
  display: flex;
  list-style-type: none;
  float: right;
  flex-direction: row;
  border-bottom: 1px solid lightgray;
  width: 100%;
`;