Tab navigation

Get the code

import Css
import Html.Styled as Html exposing (Html)
import Html.Styled.Attributes as Html


tab : Html msg
tab =
    Html.div
        [ Html.css
            [ Css.displayFlex
            , Css.alignItems Css.center
            , Css.justifyContent Css.center
            ]
        ]

        -- Actice tab

        [ Html.div
            [ Html.css
                [ Css.border3 (Css.px 1) Css.solid (Css.hex "efefef")
                , Css.borderBottomColor Css.transparent
                , Css.borderTopLeftRadius <| Css.px 2
                , Css.borderTopRightRadius <| Css.px 2
                ]
            ]
            []

        -- Inactive tab

        , Html.div
            [ Html.css
                [ Css.borderBottom3 (Css.px 1) Css.solid (Css.hex "efefef") ]
            ]
            []
        ]