tab style : demo 7

HTML

                    

                        

                            

                                

                                    
                                    

                                        
Section 1
                                        
Section 2
                                        
Section 3
                                        
Section 4
                                    

                                    
                                    

                                        

                                            
Web Development
                                            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros urna, dapibus in tellus eu, tempor pretium erat. Etiam ullamcorper lacus quis enim elementum placerat. Proin mollis id ex vel ullamcorper. Aenean vulputate nisl nec. 
                                        

                                        

                                            
Brand Building
                                            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet sodales mi. Nulla sollicitudin felis arcu, sed tempus lorem fermentum sit amet. Sed nec. 
                                        

                                        

                                            
Responsive Design
                                            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula sapien ut nisi pellentesque, et scelerisque eros varius. Aenean id purus quis ante convallis faucibus. Mauris aliquam nec ipsum a hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada. 
                                        

                                        

                                            
Clean & Clear Design
                                            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros urna, dapibus in tellus eu, tempor pretium erat. Etiam ullamcorper lacus quis enim elementum placerat. Proin mollis id ex vel ullamcorper. Aenean vulputate nisl nec.
                                        
                                    
                                
                            
                        
                    
                

CSS

                    .tab-content{
                        border: 1px solid #ddd;
                        padding:12px;
                        color: #7e828a;
                    }
                    .tab li a {
                        border: none;
                        border-right:1px solid #394d58;
                        border-radius: 0;
                        background: #23323a;
                        color: #fff;
                        margin: 0;
                        padding: 9px 15px;
                    }
                    .tab li a:hover{
                        border: none;
                        border-right:1px solid #394d58;
                        background: #23323a;
                        color: #fff;
                    }
                    .tab li.active > a,
                    .tab .nav-tabs > li.active > a:focus,
                    .tab .nav-tabs > li.active > a:hover {
                        background:#dc005a;
                        color: #fff;
                        border: none;
                    }
                    .tab .tab-content{
                        border-top: 3px solid #dc005a;
                    }
                

JavaScript

Tab depend on jQuery and Bootstrap.