<!--HTML-->
<div class="postcolor"> <style>
  
  .jfb {
    width: 550px;
    height: auto;
    background-color: #e9eaed;
    outline: 1px solid #f0f0f0;
    margin: 0 auto; 
    overflow: auto; 
    position: relative;
    font: normal normal normal 11px/110% 'Helvetica', 'Arial', sans-serif;
  }
  
  .jfb ::-webkit-scrollbar { width: 3px; }
  .jfb ::-webkit-scrollbar-track { background-color: #d8dfea; }
  .jfb ::-webkit-scrollbar-thumb { background-color: #6d84b4; }
  
  .jfb .jprofile {
    position: absolute;
    top: 120px; 
    left: 18px;
    border: 3px solid #fff;
    outline: 1px solid #ddd;
  }
  
  .jfbtabbar {
    width: 100%;
    background-color: #fff;
    height: 40px;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    box-sizing: border-box; 
    
    text-align: center;
    font: normal normal normal 12px/40px 'Helvetica', 'Arial', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .jfbtabcontainer {
    margin: 5px;
    position: relative;
    height: 420px;
  }
  
  .jfbtab { float: left; }
  
  .jfbtab input[type=radio] { display: none; }
  
  .jfbtab .jfcontent { opacity: 0; }

  .jfbtab input[type=radio]:checked ~ label ~ .jfcontent { opacity: 1; z-index: 2; }
  
  .jfbtab label {
    display: block;
    height: 40px;
    padding: 0 14px;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    margin: 2px -1px 0 0;
    position: relative;
    top: -47px;
    left: 130px;
    
    font: normal normal bold 12px/40px 'Helvetica', 'Arial', sans-serif;
    text-transform: none;
    letter-spacing: normal;
    color: #6d84b4;
  }
  
  .jfbtab input[type=radio]:checked ~ label {
    color: #000;
  }
  
  .jfbtab input[type=radio]:checked ~ label:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 42%;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid #e9eaed;
  }
  
  .jfcontent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .jfbwide {
    border: 1px solid #ddd;
    background-color: #fff;
  }
  
  .jfbwide h1 {
    background-color: #f6f7f8;
    padding: 20px;
    margin: 0;
    border-bottom: 1px solid #ddd;
  }
  
  .jfbscroll {
    margin: 10px;
    padding-right: 5px;
    height: 345px;
    overflow: auto;
  }
  
  .jfbphotos img {
    border: 0; 
    padding: 0;
    float: left; 
    margin: 1px;
    width: 100px;
    height: 100px;
  }
  
  .jfbfriend {
    width: 49%;
    display: inline-block;
    height: 80px;
    overflow: auto;
  }
  
  .jfbfriend img { float: left; margin-right: 5px;}
  
  .jfbwide h2 {
    margin: 0;
    float: left;
    font: normal normal bold 16px/80px 'Helvetica', 'Arial', sans-serif;
    color: #3b5998;
  }
  
  .jfbwide h3 {
    font: normal normal bold 12px/100% 'Helvetica', 'Arial', sans-serif;
    margin: 0 0 20px 10px;
    padding: 3px 5px;
    color: #888;
  }
  
  .jfbwide h3:nth-of-type(1) {
    margin-top: 30px;
    border-left: 3px solid #3b5998;
    color: #000;
  }
  
  .jfbwide h4 {
    margin: 15px 0 5px;
    border-bottom: 1px solid #ddd;
    padding-left: 20px;
    text-transform: uppercase;
    font: normal normal bold 9px/100% 'Helvetica', 'Arial', sans-serif;
    color: #888;
  }
  
  .jfbwide h4:nth-of-type(1) {
    margin-top: 0;
  }
  
  .jfbnarrow p {
    text-indent: 5px;
  }
  
  .jfbnarrow span {
    color: #6d84b4;
  }
  
  .jffloatleft { 
    height: 365px;
    width: 29%;
    float: left; 
    border-right: 1px solid #ddd;
  }
  
  .jfbnarrow {
    padding: 20px;
    box-sizing: border-box;
  }
  
  .jffloattall {
    height: 405px;
    box-sizing: border-box;
    padding: 10px 10px 0 5px;
  }
  
  .jfbpost {
    height: auto;
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    margin-bottom: 20px;
  }
  
  .jfbpost:last-child { 
    margin-bottom: 0; }
  
  .jfbpostmain {
    background-color: #fff;
    padding: 15px;
    text-align: justify;
  }
  
  .jffloattall span {
    color: #6d84b4;
  }
  
  .jpostimage {
    float: left; 
    margin-right: 15px;
  }
  
  .jfbpostmain h5 {
    margin: 14px 0 18px 0;
    font: normal normal bold 14px/100% 'Helvetica', 'Arial', sans-serif;
    color: #3b5998;
  }
  
  .jfbpostmain h5 span {
    display: block;
    font-weight: normal;
    font-size: 10px;
    color: #666;
  }
  
  .jfblike {
    margin-top: 10px;
    color: #6d84b4;
  }
  
  .jfblike2 {
    color: #6d84b4;
    margin: 10px;
  }
  
  .jpostimage {
    max-width: 100%;
    display: block;
    margin-bottom: 5px;
  }
  
</style>

<div class="jfb">


<img src="http://placehold.it/550x200" class="jcover">


<img src="http://placehold.it/100" class="jprofile">

<div class="jfbtabbar">



</div>
  
<div class="jfbtabcontainer">


<div class="jfbtab">
<input type="radio" id="jtimeline" name="jfbgroup-1" checked="">
<label for="jtimeline"> Timeline </label>
<div class="jfcontent">

<div class="jffloatleft jffloattall">

<div class="jfbpost">
<div class="jfbpostmain">

Works at <span>place</span><br><br>
Went to <span>University</span><br><br>
Lives in <span>City, Province</span><br><br>
From <span>City, Province</span>

</div>
</div>

</div>
<div class="jfbscroll jfbnarrow jffloattall" style="padding: 10px;">



<div class="jfbpost">
<div class="jfbpostmain">

<img src="http://placehold.it/50" class="jpostimage">
<h5>Name
<span>Sunday, May 5th</span>
</h5>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur et enim id mollis. Mauris a felis molestie, maximus lorem id, molestie libero. Cras tempor ultrices fermentum. Integer et fringilla ante. Sed nisi arcu, commodo id faucibus luctus, pellentesque et est. 

<div class="jfblike">Like • Comment • Share</div></div>

<div class="jfblike2">4 people like this</div>

</div>



<div class="jfbpost">
<div class="jfbpostmain">

<img src="http://placehold.it/50" class="jpostimage">
<h5>Name
<span>Sunday, May 5th</span>
</h5>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<img src="http://placehold.it/400x200" class="jpostimage">

<div class="jfblike">Like • Comment • Share</div></div>

<div class="jfblike2">4 people like this</div>

</div>



<div class="jfbpost">
<div class="jfbpostmain">

<img src="http://placehold.it/50" class="jpostimage">
<h5>Name
<span>Sunday, May 5th</span>
</h5>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur et enim id mollis. Mauris a felis molestie, maximus lorem id, molestie libero. Cras tempor ultrices fermentum. Integer et fringilla ante. Sed nisi arcu, commodo id faucibus luctus, pellentesque et est. 

<div class="jfblike">Like • Comment • Share</div></div>

<div class="jfblike2">4 people like this</div>

</div>


</div>

</div>
</div>


<div class="jfbtab">
<input type="radio" id="jabout" name="jfbgroup-1">
<label for="jabout"> About </label>
<div class="jfcontent">

<div class="jfbwide">
<h1>About</h1>
<div class="jffloatleft">
<h3>Overview</h3>
<h3>Work and Education</h3>
<h3>Contact and Basic Info</h3>
<h3>Family and Relationship</h3>
<h3>Details About You</h3>
<h3>Life Events</h3>
</div>
<div class="jfbscroll jfbnarrow">

<h4>about you</h4>
<p>Write a blurb about yourself here!
</p><h4>current city and hometown</h4>
<p>Currently living in <span>City</span></p>
<p>Born in <span>City</span></p>
<h4>family</h4>
<p>List any family you have</p>
<h4>relationship</h4>
<p>♥ <span>single</span></p>
<h4>work</h4>
<p>Jan 2015 - present, <span>Workplace</span>

</p></div>
</div>

</div>
</div>


<div class="jfbtab">
<input type="radio" id="jfriends" name="jfbgroup-1">
<label for="jfriends"> Friends </label>
<div class="jfcontent">

<div class="jfbwide">
<h1>Friends</h1>
<div class="jfbscroll">


<div class="jfbfriend">
<img src="http://placehold.it/80">
<h2>first last</h2>
</div>

<div class="jfbfriend">
<img src="http://placehold.it/80">
<h2>first last</h2>
</div>

<div class="jfbfriend">
<img src="http://placehold.it/80">
<h2>first last</h2>
</div>

<div class="jfbfriend">
<img src="http://placehold.it/80">
<h2>first last</h2>
</div>

<div class="jfbfriend">
<img src="http://placehold.it/80">
<h2>first last</h2>
</div>

<div class="jfbfriend">
<img src="http://placehold.it/80">
<h2>first last</h2>
</div>

<div class="jfbfriend">
<img src="http://placehold.it/80">
<h2>first last</h2>
</div>

<div class="jfbfriend">
<img src="http://placehold.it/80">
<h2>first last</h2>
</div>

<div class="jfbfriend">
<img src="http://placehold.it/80">
<h2>first last</h2>
</div>

<div class="jfbfriend">
<img src="http://placehold.it/80">
<h2>first last</h2>
</div>

<div class="jfbfriend">
<img src="http://placehold.it/80">
<h2>first last</h2>
</div>


</div>
</div>

</div>
</div>


<div class="jfbtab">
<input type="radio" id="jphoto" name="jfbgroup-1">
<label for="jphoto"> Photos </label>
<div class="jfcontent">

<div class="jfbwide">
<h1>Photos</h1>
<div class="jfbscroll jfbphotos">

<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">
<img src="http://placehold.it/100">

</div></div>

</div>
</div>


</div>
</div>  </div>