#tabs
  %ul
    %li<
      %a{href: '#tabs-1'}<
        %span.fa.fa-shopping-cart>
        Shopping
    %li<
      %a{href: '#tabs-2'}<
        %span.fa.fa-cutlery>
        Dining
    %li<
      %a{href: '#tabs-3'}<
        %span.fa.fa-music>
        Nightlife

  %section.tabs-content

    %article#tabs-1
      %h3< Hot Deals
      %span.tagline< Upcoming Sales
      %h4< Building a Winter Wardrobe
      %p< Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, facere aliquam accusantium, explicabo natus harum incidunt omnis, nemo quidem blanditiis voluptatibus placeat! Iure nulla obcaecati necessitatibus neque recusandae excepturi aliquid.

      <!-- Image by Ian Muttoo [CC-BY-SA-2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3AShoppers_on_Dundas%2C_near_Yonge.jpg -->
      %img{src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/shopping.png', alt: 'Shopping'}

      .readmore
        %a{href: '#'}<
          Read more
          %span.fa.fa-chevron-right>

    %article#tabs-2
      %h3< Good Eats
      %span.tagline< Local Favorites
      %h4< Anticipated Fall Openings
      %p< Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, facere aliquam accusantium, explicabo natus harum incidunt omnis, nemo quidem blanditiis voluptatibus placeat! Iure nulla obcaecati necessitatibus neque recusandae excepturi aliquid.

      <!-- Image by Serge Melki from Indianapolis, USA [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3AThe_restaurant_Inside_Marriott_(5531365092).jpg -->
      %img{src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/dining.png', alt: 'Dining'}

      .readmore
        %a{href: '#'}<
          Read more
          %span.fa.fa-chevron-right>

    %article#tabs-3
      %h3< Live Music
      %span.tagline< Hidden Gems
      %h4< Can't-miss Weekend Events
      %p< Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, facere aliquam accusantium, explicabo natus harum incidunt omnis, nemo quidem blanditiis voluptatibus placeat! Iure nulla obcaecati necessitatibus neque recusandae excepturi aliquid.

      <!-- Image by 松岡明芳 (松岡明芳) [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3AKaraoke-Harbin6303733.jpg -->
      %img{src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/nightlife.png', alt: 'Nightlife'}

      .readmore
        %a{href: '#'}<
          Read more
          %span.fa.fa-chevron-right>
View Compiled
@import "bourbon";

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

html {
  min-height:100%;
}

body {
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/bg.jpg');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

#tabs {
    margin: 1em auto;
    width: 450px;
    ul {
        margin: 0;
        padding: 0;
        height: 80px;
        @include column-count(3);
        @include column-gap(0);
        @include clearfix;
        li {
            display: block;
            width: 100%;
            height: 100%;
            background: #f4f4f3;
            border-bottom: 1px solid #e5e5e2;
            font-family: 'Josefin Sans', sans-serif;
            font-weight: 400;
            font-size: 1.2em;
            letter-spacing: 1px;
            text-align: center;
            &:first-child {
                -webkit-border-top-left-radius: 3px;
                -moz-border-radius-topleft: 3px;
                border-top-left-radius: 3px;
                border-right: 1px solid #e5e5e2;
            }
            &:last-child {
                -webkit-border-top-right-radius: 3px;
                -moz-border-radius-topright: 3px;
                border-top-right-radius: 3px;
                border-left: 1px solid #e5e5e2;       
            }
            a {
                display: block;
                padding: 1em;
                cursor: pointer;
                outline: 0;
                border: none;
                font-size: 0.85em;
                color: #6a6a6a;
                text-decoration: none;
                text-transform: uppercase;
            }
            span {
                display: block;
                margin-bottom: 0.75em;
            }
        }
        // change style on active tab
        .ui-tabs-active {
            background: #fff;
            border-bottom: none;
            a {
                color: #000;
            }
            span {
                color: #609c09;
            }
        }
    }
    h3, h4 {
        font-family: 'Josefin Sans', sans-serif;
        text-transform: uppercase;   
    }
    h3 {
        margin: 0.5em 0;
        border-bottom: 1px solid rgba(126,149,180,0.5);
        padding-bottom: 0.05em;
        font-size: 2.5em;
        color: #f38500;
        font-weight: 300; 
    }
    h4 {
        margin: 0.25em 0;
        font-size: 1.35em;
        color: #000;
        font-weight: 700;
    }
    .tagline {
        display: block;
        margin-top: 1.25em;
        font-family: 'Josefin Sans', sans-serif;
        font-size: 1.2em;
        color: #aa7786;
        text-transform: lowercase;
    }
}

.tabs-content {
    background: #fff;
    article {
        padding: 1em; 
        p {
            font-family: 'Open Sans', sans-serif;
            line-height: 24px;
        }    
        .readmore {
            display: block;
            margin-top: 1.5em;
            padding-top: 0.25em;
            border-top: 1px solid rgba(126,149,180,0.5);            
            font-family: 'Josefin Sans', sans-serif;
            font-size: 1.2em;
            @include clearfix;
            a {
                display: block;
                margin: 1em 0;
                float: right;
                color: #aa7786;
                text-decoration: none;
                &:hover {
                    color: darken(#aa7786, 10%);
                }
            }
            span {
                padding-left: 1em;
                vertical-align: middle;
            }
        }
        img {
            max-width: 100%;
            height: auto;
            vertical-align: bottom;
        }
    }
}
View Compiled
$(function() {
    $( "#tabs" ).tabs();
});

External CSS

  1. https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700|Open+Sans
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://code.jquery.com/ui/1.11.2/jquery-ui.js