Tabs

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-md-offset-2">
      <!-- Nav tabs -->
      <ul class="tabs-filled nav nav-tabs" role="tablist">
        <li class="nav-item active">
          <a class="nav-link" data-toggle="tab" href="#widget-tab-1" role="tab">Posts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#widget-tab-2" role="tab">Archive</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#widget-tab-3" role="tab">Form</a>
        </li>
      </ul>
      
      <!-- Tab panes -->
      <div class="tab-content">
        <div class="tab-pane fade in active" id="widget-tab-1" role="tabpanel">
          
          <br>
          <div class="widget widget-block-news">
            <ul>
              <li><a href="#">
                <span class="news-img">
                  <img src="/img/portfolio/small/1.jpg" alt="blog post 1">
                </span>
                <span class="news-text">
                  <span class="h5">Donec elementum quis dolor</span>
                  <em class="block date">yesterday</em>
                </span>
              </a></li>
      
              <li><a href="#">
                <span class="news-img">
                  <img src="/img/portfolio/small/2.jpg" alt="blog post 2">
                </span>
                <span class="news-text">
                  <span class="h5">Mauris efficitur porttitor</span>
                  <em class="block date">3 days ago</em>
                </span>
              </a></li>
      
              <li><a href="#">
                <span class="news-img">
                  <img src="/img/portfolio/small/3.jpg" alt="blog post 3">
                </span>
                <span class="news-text">
                  <span class="h5">Nullam nec volutpat felis</span>
                  <em class="block date">7 days ago</em>
                </span>
              </a></li>
      
              <li><a href="#">
                <span class="news-img">
                  <img src="/img/portfolio/small/4.jpg" alt="blog post 4">
                </span>
                <span class="news-text">
                  <span class="h5">Montes aliquam venenatis</span>
                  <em class="block date">month ago</em>
                </span>
              </a></li>
            </ul>
          </div>
      
        </div>
        <div class="tab-pane" id="widget-tab-2" role="tabpanel">
          
          <br>
          <div class="widget widget-archive">
            <ul class="list-unstyled archive-border h5">
              <li><a href="#">April 2016</a></li>
              <li><a href="#">March 2016</a></li>
              <li><a href="#">February 2016</a></li>
              <li><a href="#">January 2016</a></li>
              <li><a href="#">December 2015</a></li>
              <li><a href="#">November 2015</a></li>
            </ul>
          </div>
      
        </div>
        <div class="tab-pane fade" id="widget-tab-3" role="tabpanel">
          
          <br>
          <div class="widget">
            <form>
              <div class="form-group">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-smile-o"></i></span>
                  <input type="text" class="form-control" placeholder="Your Name">
                </div>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
                  <input type="email" class="form-control" placeholder="Email Address">
                </div>
              </div>
              <div class="form-group">
                <textarea class="form-control" rows="3" placeholder="Message"></textarea>
              </div>
              <button type="submit" class="button button-primary button-rounded button-small text-uppercase">Send Message</button>
            </form>
          </div>
      
        </div>
      </div>    </div>
    <div class="col-sm-6 col-md-4">
      <!-- Nav tabs -->
      <ul class="nav nav-tabs nav-border-bottom" role="tablist">
        <li class="nav-item active">
          <a class="nav-link" data-toggle="tab" href="#widget-tab-4" role="tab"><i class="fa fa-twitter"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#widget-tab-5" role="tab"><i class="fa fa-instagram"></i></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#widget-tab-6" role="tab"><i class="fa fa-dribbble"></i></a>
        </li>
      </ul>
      
      <!-- Tab panes -->
      <div class="tab-content">
        <div class="tab-pane fade in active" id="widget-tab-4" role="tabpanel">
      
          <div class="widget">
            <p class="widget-title h5">Latest tweets</p>
            <div class="widget-twitter twitter-2"></div>
            <p class="h4 m-t m-b-0">
              <a class="btn button-small button-inverse text-uppercase" href="#">Follow us</a>
            </p>
          </div>
      
        </div>
        <div class="tab-pane" id="widget-tab-5" role="tabpanel">
          
          <div class="widget instagram-block gallery-small-icons">
            <p class="widget-title h5">Instagram gallery</p>
            <div id="instafeed-widgets4"></div>
          </div>
      
        </div>
        <div class="tab-pane fade" id="widget-tab-6" role="tabpanel">
          
          <div class="widget widget-dribbble">
            <p class="widget-title h5">Tiny dribbble shots</p>
            <div class="dribbble dribbble-shots-tiny"></div>
          </div>
         
      
        </div>
      </div>    </div>
  </div>
</div>