css-file

.dashboard-container {
  @extend .container;
}

.dashboard {
  @include make-row;
}

.dashboard-contents {
  @include make-lg-column(10);
}

.dashboard-tabs--nav {
  margin-top: 30px;
  padding-left: 0;

  .dashboard-tabs--nav-item {
    border-right: $border-blue;
    border-top: $border-blue;
    border-bottom: $border-blue;
    background: $base-white;
    padding: $tabs-padding;
    display: table-cell;
    width: 1%;
    text-align: center;
    text-transform: uppercase;

    &:first-child {
      border-left: $border-blue; 
    }

    &:hover {
      background: $base-gray;
    }
    &:hover > a {
      text-decoration: none;
    }

    &.nav-item-active {
      background: $base-blue;
    }

    &.nav-item-active > a {
      color: $base-white;
    }
  }
}

.dashboard-tabs--content {
  border: $border-blue;
  margin-top: 30px;

  .title,
  p {
    font-weight: $font-bold;
  }

  .dashboard-tabs--content-item-wrapper {
    padding: 15px;
  }

  .dashboard-tabs--content-item {
    border: 3px solid $base-blue;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    text-transform: uppercase;
    text-align: center;
    
    .title {
      font-size: $font-size-h4;
      color: $base-blue;
    }
  }

  .dashboard-tabs--content-stats {
    .stats-today,
    .stats-week,
    .stats-active {
      display: inline-block;
      width: 33%;
    }
    .title {
      font-size: $font-size-h6;
    }
  }

}

gistfile1.haml

%skyline-header
.dashboard-container
  .dashboard
    %skyline-sidebar

    .dashboard-contents
      %ul.dashboard-tabs--nav
        %li.dashboard-tabs--nav-item.nav-item-active
          %a{href: "#", "data-toggle" => "tab"} Pre Employment Process
        %li.dashboard-tabs--nav-item
          %a{href: "/services#kpi", "data-toggle" => "tab"} KPI
        %li.dashboard-tabs--nav-item
          %a{href: "/services#report", "data-toggle" => "tab"} Report
        %li.dashboard-tabs--nav-item
          %a{href: "/services#search", "data-toggle=" => "tab"} Search

      .dashboard-tabs--content 
        .dashboard-tabs--content-item-wrapper
          .dashboard-tabs--content-item
            %h2.title {{ preEmploymentScreenData.master_service }}
            .dashboard-tabs--content-stats
              .stats-today
                %h3.title TODAY
                %p 42
              .stats-week
                %h3.title WEEK
                %p 12
              .stats-active
                %h3.title ACTIVE
                %p 23
          .dashboard-tabs--content-item
            %h2.title {{ employerRequestFollowUpData.master_service }}
            .dashboard-tabs--content-stats
              .stats-today
                %h3.title TODAY
                %p 42
              .stats-week
                %h3.title WEEK
                %p 12
              .stats-active
                %h3.title ACTIVE
                %p 23