<div class="ui basic tabular segment cf-layout-standard-row">
  <div class="ui grid">
    <div class="row">
      <div class="column">
        <h2>
          Funnel Name
        </h2>
      </div>
      <div class="column">
        <div class="ui top attached tabular menu">
          <a class="item active" data-tab="first">
            First
          </a>
          <a class="item" data-tab="second">
            Second
          </a>
          <a class="item" data-tab="third">
            Third
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="ui basic tabular segment cf-layout-standard-row">
  <div class="ui grid">
    <div class="row">
      <div class="column">
        <h2>
          Funnel Name
        </h2>
      </div>
      <div class="column">
        <div class="ui top attached tabular menu">
          <a class="item active" data-tab="first">
            First
          </a>
          <a class="item" data-tab="second">
            Second
          </a>
          <a class="item" data-tab="third">
            Third
          </a>
        </div>
        <a href="" class="ui small button">
          <i class="cog icon"></i>
          Step Settings
        </a>
      </div>
    </div>
  </div>
</div>

<div class="ui basic tabular segment cf-layout-standard-row">
  <div class="ui grid">
    <div class="row">
      <div class="column">
        <h2>
          Funnel Name
        </h2>
      </div>
      <div class="column">
        <div class="ui green cf toggle checkbox">
          <input type="checkbox" name="public">
          <div class="frame">
            <div class="toggler"></div>
            <div class="text centered">
              <span class="off">Paused</span>
              <span class="on">Live</span>
            </div>
          </div>
        </div>
        <div class="ui top attached tabular menu">
          <a class="item active" data-tab="first">
            First
          </a>
          <a class="item" data-tab="second">
            Second
          </a>
          <a class="item" data-tab="third">
            Third
          </a>
        </div>
        <a href="" class="ui small button">
          <i class="cog icon"></i>
          Step Settings
        </a>
      </div>
    </div>
  </div>
</div>

<div class="ui basic tabular segment cf-layout-standard-row">
  <div class="ui grid">
    <div class="row">
      <div class="column">
        <h2>
          ファンネル名
        </h2>
      </div>
      <div class="column">
        <div class="ui top attached tabular menu">
          <a class="item active" data-tab="first">
            <i class="indent tiny icon"></i>
            概要
          </a>
          <a class="item" data-tab="second">
            <i class="indent tiny icon"></i>
            オートメーション
          </a>
          <a class="item" data-tab="third">
            <i class="indent tiny icon"></i>
            製品
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="cf-time-filter">
  <!-- time filter tabs -->
  <div class="ui tabular menu">
    <a class="item active" data-tab="first">
      Today
    </a>
    <a class="item" data-tab="second">
      Week
    </a>
    <a class="item" data-tab="third">
      Month
    </a>
    <a class="item" data-tab="fourth">
      Year
    </a>
  </div>
  <!-- time filter content -->
  <!-- tab 1 content -->
  <div class="ui attached tab segment active" data-tab="first">
    <span class="date-range">Feb. 1</span>
    first tab content for time tabs
  </div>
  <!-- tab 2 content -->
  <div class="ui attached tab segment" data-tab="second">
    <span class="date-range">Feb. 1 - Feb. 7</span>
    second tab content for time tabs
  </div>
  <!-- tab 3 content -->
  <div class="ui attached tab segment" data-tab="third">
    <span class="date-range">February</span>
    third tab content for time tabs

  </div>
  <!-- tab 4 content -->
  <div class="ui attached tab segment" data-tab="fourth">
    <span class="date-range">2018</span>
    fourth tab content for time tabs
  </div>
</div>

<!-- tabs script -->
<script type="text/javascript">
  $('.menu .item').tab();
</script>

<div class="ui secondary menu" id="test">
  <a class="item active" data-tab="first">
    Priority List
  </a>
  <a class="item" data-tab="second">
    Most Recent
  </a>
  <a class="item" data-tab="third">
    Saved Cards
  </a>
  <a href="" class="float right yellow text item">
    <i class="plus icon"></i>
    New Funnel
  </a>
</div>

<div class="ui attached tab segment" data-tab="first">
  <div class="ui basic">
    <h2>First tab content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde veritatis mollitia nam sapiente nulla autem quia est amet aliquam molestiae. Saepe atque deleniti voluptate vel fugiat, quas, qui officiis eveniet?
    </p>
  </div>
</div>
<div class="ui attached tab segment" data-tab="second">
  <div class="ui basic">
    <h2>Second tab content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, optio ex, assumenda eligendi amet rem suscipit neque adipisci, harum ut quam. Magnam rerum quasi tempora earum nulla, error minus expedita.</p>
  </div>
</div>
<div class="ui attached tab segment" data-tab="third">
  <div class="ui basic">
    <h2>Third tab content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, enim voluptatum debitis aliquam tempore dignissimos. Perspiciatis corporis quasi optio assumenda, quibusdam, libero adipisci, dolorum numquam sapiente vitae reprehenderit consequatur. Est.</p>
  </div>
</div>
<div class="ui attached tab segment" data-tab="fourth">
  <div class="ui basic">
    <h2>Fourth tab content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi est omnis rerum qui facilis alias aperiam reiciendis libero nesciunt ab, provident deleniti quasi minima sit asperiores. Nesciunt, sit blanditiis quod.
    </p>
  </div>
</div>