<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
</div>
</div>
<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="ui large secondary pointing menu">
<a class="active item" data-tab="first"><i class="instagram outline icon"></i>Instagram</a>
<a class="item" data-tab="second"><i class="comments outline icon"></i>DIRECT</a>
<a class="item" data-tab="third"><i class="list icon"></i>ACTIVITY</a>
<div class="ui right item">
<div class="ui search transparent icon input">
<input type="text" placeholder="Search ..." class="prompt" /><i class="search link icon"></i>
</div>
</div>
</div>
<div class="ui bottom attached tab active" data-tab="first">
<div class="ui container">
<div id="instafeed" class="ui three column doubling centered grid container"></div>
</div>
</div>
<div class="ui bottom attached tab" data-tab="second">
<div class="ui middle aligned divided list">
<div class="item">
<div class="right floated content">
<div class="ui button">Add</div>
</div>
<img class="ui avatar image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg">
<div class="content">
Lena
</div>
</div>
<div class="item">
<div class="right floated content">
<div class="ui button">Add</div>
</div>
<img class="ui avatar image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg">
<div class="content">
Lindsay
</div>
</div>
<div class="item">
<div class="right floated content">
<div class="ui button">Add</div>
</div>
<img class="ui avatar image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg">
<div class="content">
Mark
</div>
</div>
<div class="item">
<div class="right floated content">
<div class="ui button">Add</div>
</div>
<img class="ui avatar image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg">
<div class="content">
Molly
</div>
</div>
</div>
</div>
<div class="ui bottom attached tab" data-tab="third">
<div class="ui large feed">
<div class="event">
<div class="label">
<img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg">
</div>
<div class="content">
<div class="summary">
<a class="user">
Elliot Fu
</a> added you as a friend
<div class="date">
1 Hour Ago
</div>
</div>
<div class="meta">
<a class="like">
<i class="like icon"></i> 4 Likes
</a>
</div>
</div>
</div>
<div class="event">
<div class="label">
<i class="pencil icon"></i>
</div>
<div class="content">
<div class="summary">
You submitted a new post to the page
<div class="date">
3 days ago
</div>
</div>
<div class="extra text">
I'm having a BBQ this weekend. Come by around 4pm if you can.
</div>
<div class="meta">
<a class="like">
<i class="like icon"></i> 11 Likes
</a>
</div>
</div>
</div>
<div class="event">
<div class="label">
<img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg">
</div>
<div class="content">
<div class="date">
4 days ago
</div>
<div class="summary">
<a>Helen Troy</a> added <a>2 new illustrations</a>
</div>
<div class="extra images">
<a><img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg"></a>
<a><img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg"></a>
</div>
<div class="meta">
<a class="like">
<i class="like icon"></i> 1 Like
</a>
</div>
</div>
</div>
</div>
</div>
