<div>
      <nav>
        <ul className="gds-nav-tabs">
          <li
            className="gds-nav-tabs__list-item gds-nav-tabs__list-item--active">
            <a className="gds-nav-tabs__link">One</a>
          </li>
          <li className="gds-nav-tabs__list-item">
            <a className="gds-nav-tabs__link">Two</a>
          </li>
          <li className="gds-nav-tabs__list-item">
            <a className="gds-nav-tabs__link">Three</a>
          </li>
          <li
            className="gds-nav-tabs__list-item gds-nav-tabs__list-item--disabled"
          
          >
            <a className="gds-nav-tabs__link">Disabled</a>
          </li>
        </ul>
      </nav>
      <section>
        <div className="-block">
          Tab one content goes here.
        </div>
        <div className="-none">
          Tab two content goes here.
        </div>
        <div className="-none">
          Tab three content goes here.
        </div>
        <div className="-none">
          Tab four content goes here.
        </div>
      </section>
      Justified Tabs
      For justified tabs, use gds-nav-tabs--justified.

      <nav>
        <ul className="gds-nav-tabs gds-nav-tabs--justified">
          <li
            className="gds-nav-tabs__list-item gds-nav-tabs__list-item--active">
            <a
              className="gds-nav-tabs__link">One</a>
          </li>
          <li className="gds-nav-tabs__list-item">
            <a className="gds-nav-tabs__link">Two</a>
          </li>
          <li className="gds-nav-tabs__list-item">
            <a className="gds-nav-tabs__link">Three</a>
          </li>
          <li
            className="gds-nav-tabs__list-item gds-nav-tabs__list-item--disabled"
          
          >
            <a className="gds-nav-tabs__link">Disabled</a>
          </li>
        </ul>
      </nav>
      <section>
        <div className="-block">
          Tab one content goes here.
        </div>
        <div className="-none">
          Tab two content goes here.
        </div>
        <div className="-none">
          Tab three content goes here.
        </div>
        <div className="-none">
          Tab four content goes here.
        </div>
      </section>
      Pills
      For pill nav, use gds-nav-pills.
      
      <nav>
        <ul className="gds-nav-pills">
          <li
            className="gds-nav-pills__list-item gds-nav-pills__list-item--active"
            data-gds-nav-item
          >
            <a
              className="gds-nav-pills__link"
              data-gds-nav-button="1"
              data-gds-nav-type="pill"
              >One</a
            >
          </li>

          <li className="gds-nav-pills__list-item" data-gds-nav-item>
            <a
              className="gds-nav-pills__link"
              data-gds-nav-button="2"
              data-gds-nav-type="pill"
              >Two</a
            >
          </li>

          <li className="gds-nav-pills__list-item" data-gds-nav-item>
            <a
              className="gds-nav-pills__link"
              data-gds-nav-button="3"
              data-gds-nav-type="pill"
              >Three</a
            >
          </li>

          <li
            className="gds-nav-pills__list-item gds-nav-pills__list-item--disabled"
            data-gds-nav-item
          >
            <a
              className="gds-nav-pills__link"
              data-gds-nav-button="4"
              data-gds-nav-type="pill"
              >Disabled</a
            >
          </li>
        </ul>
      </nav>
      <section data-gds-nav-contents="4">
        <div className="-block" data-gds-nav-content="1">
          Tab one content goes here.
        </div>
        <div className="-none" data-gds-nav-content="2">
          Tab two content goes here.
        </div>
        <div className="-none" data-gds-nav-content="3">
          Tab three content goes here.
        </div>
        <div className="-none" data-gds-nav-content="4">
          Tab four content goes here.
        </div>
      </section>
      Underline
      For alternate, underlined tabs, use gds-nav-tabs--underline.
      
      <nav>
        <ul className="gds-nav-tabs gds-nav-tabs--underline" data-gds-nav="2">
          <li
            className="gds-nav-tabs__list-item gds-nav-tabs__list-item--underline gds-nav-tabs__list-item--active"
            data-gds-nav-item
          >
            <a
              className="gds-nav-tabs__link gds-nav-tabs--underline__link"
              data-gds-nav-button="1"
              data-gds-nav-type="tab"
              >One</a
            >
          </li>

          <li
            className="gds-nav-tabs__list-item gds-nav-tabs__list-item--underline"
            data-gds-nav-item
          >
            <a
              className="gds-nav-tabs__link gds-nav-tabs__link--underline"
              data-gds-nav-button="2"
              data-gds-nav-type="tab"
              >Two</a
            >
          </li>

          <li
            className="gds-nav-tabs__list-item gds-nav-tabs__list-item--underline"
            data-gds-nav-item
          >
            <a
              className="gds-nav-tabs__link gds-nav-tabs__link--underline"
              data-gds-nav-button="3"
              data-gds-nav-type="tab"
              >Three</a
            >
          </li>

          <li
            className="gds-nav-tabs__list-item gds-nav-tabs__list-item--underline gds-nav-tabs__list-item--disabled"
            data-gds-nav-item
          >
            <a
              className="gds-nav-tabs__link gds-nav-tabs__link--underline"
              data-gds-nav-button="4"
              data-gds-nav-type="tab"
              >Disabled</a
            >
          </li>
        </ul>
      </nav>
      <section data-gds-nav-contents="2">
        <div className="-block" data-gds-nav-content="1">
          Tab one content goes here.
        </div>
        <div className="-none" data-gds-nav-content="2">
          Tab two content goes here.
        </div>
        <div className="-none" data-gds-nav-content="3">
          Tab three content goes here.
        </div>
        <div className="-none" data-gds-nav-content="4">
          Tab four content goes here.
        </div>
      </section>
    </div>