Min-Profile Tabs [no JavaScript]

[MC3K_Neonz]

JavaScript Version here 

First off, go to the layout template

Admin > Themes/Structure > Layout Templates > Mini-Profile

On Line 18 paste the following code:

The HTML


<ul class="tabs">
       <li>
         <input type="radio" checked name="tabs" id="tab1">
         <label for="tab1">tab 1</label>
         <div id="tab-content1" class="tab-content animated fadeIn">
   ...
         </div>
       </li>
       <li>
         <input type="radio" name="tabs" id="tab2">
         <label for="tab2">tab 2</label>
         <div id="tab-content2" class="tab-content animated fadeIn">
           ...
         </div>
       </li>
       <li>
         <input type="radio" name="tabs" id="tab3">
         <label for="tab3">tab 3</label>
         <div id="tab-content3" class="tab-content animated fadeIn">
           ...
         </div>
       </li>
</ul>

the css:
Admin > Themes > Advanced Styles & CSS > Style Sheet

/* Mini-Profile Tab */
.tabs input[type=radio] {
         position: absolute;
         top: -9999px;
         left: -9999px;
     }
     .tabs {
       width: 650px;
       float: none;
       list-style: none;
       position: relative;
       padding: 0;
       margin: 75px auto;
     }
     .tabs li{
       float: left;
     }
     .tabs label {
         display: block;
         padding: 10px 20px;
         border-radius: 2px 2px 0 0;
         color: #08C;
         font-size: 24px;
         font-weight: normal;
         font-family: 'Lily Script One', helveti;
         background: rgba(255,255,255,0.2);
         cursor: pointer;
         position: relative;
         top: 3px;
         -webkit-transition: all 0.2s ease-in-out;
         -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
         transition: all 0.2s ease-in-out;
     }
     .tabs label:hover {
       background: rgba(255,255,255,0.5);
       top: 0;
     }
     
     [id^=tab]:checked + label {
       background: #08C;
       color: white;
       top: 0;
     }
     
     [id^=tab]:checked ~ [id^=tab-content] {
         display: block;
     }
     .tab-content{
       z-index: 2;
       display: none;
       text-align: left;
       width: 100%;
       font-size: 20px;
       line-height: 140%;
       padding-top: 10px;
       background: #08C;
       padding: 15px;
       color: white;
       position: absolute;
       top: 53px;
       left: 0;
       box-sizing: border-box;
       -webkit-animation-duration: 0.5s;
       -o-animation-duration: 0.5s;
       -moz-animation-duration: 0.5s;
       animation-duration: 0.5s;
     }

the Effects (optional):

<link href="http://www.onextrapixel.com/examples/pure-css-tab-with-fade-animation/css/animate.min.css" rel="stylesheet" type="text/css">

XD Wondering where the JavaScript code is (By Any Chance), this does not require JavaScript.
Any questions from peeps who don't know how to do re-sizing, etc. can ask here for help.