JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div id="tabs">

        <ul>
            <li><a href="#facebook" class="facebook active">
                    <img src="http://demo.harrisonstatham.com/demo/clickcard/facebook.png">
                </a>
            </li>
            <li>
                <a href="#twitter" class="twitter">
                    <img src="http://demo.harrisonstatham.com/demo/clickcard/twitter.png">
                </a>
            </li>  
            <li>
                <a href="#linkedin" class="linkedin">
                    <img src="http://demo.harrisonstatham.com/demo/clickcard/linkedin.png">
                </a>
            </li>  
        </ul>
        
        <div id="content">
            
            <div id="facebook">
            this is the facebook share box.
            </div>
            
            <div id="twitter">
            This would contain some tweets about your product, site, or blog.
            </div>
            
            <div id="linkedin">
                this is the linkedin box
            </div>
        </div>
        
    </div>

CSS

* {
    margin:0;
    padding:0;
    list-style:none;
}

body {
    margin:10px 0px;
    padding:0;
    width:500px;
    margin:auto;
    background:#ededed;   
}

#tabs {
    
    
    height:300px;
    margin-top:25px;
    
}

ul {
   float:left;  
   width:68px;    
   
}

ul li a {
    display:block;
    height:65px;
    border:thin solid transparent;
    border-right:none;
    position:relative;
    left:1px;
    
}

ul li a.active {
 
    background:white;
    border:thin solid #cecece;
    border-right:none;
    
}

.facebook img, 
.twitter img, 
.linkedin img {
    height:50px;
    width:50px;
    margin-left:10px;
    margin-top:10px;
}


#content {
    float:left;
    height:auto;
    width:350px;
    background:white;
    border:thin solid #cecece;
    
}

#content div {
    width:300px;
    margin:15px auto;
}

#twitter, #linkedin {
    display:none;   
}

#facebook {

    height:250px;
}

#twitter {
    height:500px;
}

#linkedin {
    height:250px;
}

JavaScript

(function($){
    
    var links = $('#tabs ul li a');
    var divs = $('#tabs #content div');
    
    var socialTabs = {
    
        init: function( elem ) {
            
            this.elem = elem;
            this.attr = this.elem.attr('href');
            this.cycle();
        },
        
        links: function() {
            
            links.not(this.elem).removeClass('active');
            this.elem.addClass('active');
        },
        
        show: function() {
            
            divs.not(this.elem).hide();
            $(this.attr).show();
        },
        
        cycle: function() {
            
            this.links();
            this.show();
        }

    };

    links.on('click', function(e) {
    
        e.preventDefault();
        
        socialTabs.init($(this));
    
    });


}(jQuery));