30[html]<style>.jfb,.jfbfriend,.jfbscroll{overflow:auto}.jfbnarrow,.jfbtabbar,.jffloattall{box-sizing:border-box}.jfb{width:550px;height:auto;color:#333;background-color:#e9eaed;outline:#f0f0f0 solid 1px;margin:0 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}.jfbtabbar,.jfbwide{background-color:#fff}.jfb .jprofile{position:absolute;top:120px;left:18px;border:3px solid #fff;outline:#ddd solid 1px}.jfbtab label,.jfbtabbar{border-right:1px solid #ddd;border-left:1px solid #ddd}.jfbtabbar{width:100%;height:40px;border-bottom:1px solid #ddd;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;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}.jfbwide h1{background-color:#f6f7f8;padding:20px;margin:0;border-bottom:1px solid #ddd}.jfbscroll{margin:10px;padding-right:5px;height:345px}.jfbphotos img{border:0;padding:0;float:left;margin:1px;width:100px;height:100px}.jfbfriend{width:49%;display:inline-block;height:80px}.jfbfriend img{float:left;margin-right:15px}.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;text-align:left}.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}.jfbnarrow span,.jffloattall span{color:#6d84b4}.jfbwide h4:nth-of-type(1){margin-top:0}.jfbnarrow p{text-indent:5px}.jffloatleft{height:365px;width:29%;float:left;border-right:1px solid #ddd}.jfbnarrow{padding:20px}.jffloattall{height:405px;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}.jpostimage{float:left;margin-right:15px}.jfbpostmain h5{margin:14px 0 18px;font:normal normal bold 14px/100% Helvetica,Arial,sans-serif;color:#3b5998}.jfbpostmain h5 span{display:block;font-weight:400;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="https://placehold.it/550x200" class="jcover">
<a href="http://shine.jcink.net/index.php?showuser=11182"><img src="https://placehold.it/100" class="jprofile"></a>
<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!
<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>
</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>[/html]
