JSFiddle - React, Tailwind, and code Playground

by jcak

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<footer id="footer-container">
    <section id="footer1">
        <div id="col" class="col2">
        <h1>Contacts</h1>
            <ul>
                <li class="telefone"><i class="fa fa-phone"></i>&nbsp;&nbsp;00103003</li>
                <li class="telefone"><i class="fa fa-fax"></i>&nbsp;&nbsp;4335353></li>
                <li class="email"><i class="fa fa-envelope-o"></i>&nbsp;&nbsp;email@email.com</li>
                <li class="email email2">email@email.com</li>
            </ul>
        </div> 
         <div id="col" class="col2">
        <h1>Contacts</h1>
            <ul>
                <li class="telefone"><i class="fa fa-phone"></i>&nbsp;&nbsp;00103003</li>
                <li class="telefone"><i class="fa fa-fax"></i>&nbsp;&nbsp;4335353></li>
                <li class="email"><i class="fa fa-envelope-o"></i>&nbsp;&nbsp;email@email.com</li>
                <li class="email email2">email@email.com</li>
            </ul>
        </div> 
        <div id="col" class="col2">
        <h1>Contacts</h1>
            <ul>
                <li class="telefone"><i class="fa fa-phone"></i>&nbsp;&nbsp;00103003</li>
                <li class="telefone"><i class="fa fa-fax"></i>&nbsp;&nbsp;4335353></li>
                <li class="email"><i class="fa fa-envelope-o"></i>&nbsp;&nbsp;email@email.com</li>
                <li class="email email2">email@email.com</li>
            </ul>
        </div> 
        
        <div id="col" class="col4" style="margin-right:0;">
            <h1>LINKS</h1>
            <ul id="list1">                
                <li><a href="#"><span>Link 0</span></a></li>
                <li><a href="#"><span>Link 1</span></a></li>
                <li><a href="#"><span>Link 2</span></a></li>
                <li><a href="#"><span>Link 3</span></a></li>
                <li><a href="#"><span>Link 4</span></a></li>    
                <li><a...

CSS

*{margin:0; padding:0;}

#list2{display:none;}

#footer-container{
	width:100%;
	height:auto;
	float:left; 
	border-top: 3px solid #ccc;
	background:#2F3083;	
}

#footer1{
	width:300px;
	margin:0 auto;
}

#footer1 ul {
	list-style:none;
	margin:0;
}

#footer1 ul li{
	margin:0 0 7px 0;
	color:#ccc;
	font-size:14px;
	background:red;
}

#footer1 ul .mapa {
	margin-bottom:0;
}

#footer1 ul .email2 {
	margin-bottom:0;
}

#footer1 ul .ultimo_link {
	margin-bottom:0px;
}

#col.col4{
	margin-bottom:10px;
}

#footer1 ul li a {	
	color:#ccc;
	font-size:14px;
	text-decoration:none;background:red;
}

#rodape1 ul li a:hover{
	color:#ccc;
}
	
#col{
	float:left;
	margin-bottom:0;
	background:yellow;
}
#col h1{
	border-bottom:1px dashed #ccc;
	color:#fff; 
	font-size:16px;
	font-weight:bold; 
	margin:10px auto;	
	width:300px;
	background:red;
}
  

#footer2-container
{
	width:100%;	
	float:left;
	background:#ECECEA;
}

#footer2
{
	width:300px;
	margin:10px auto 10px auto;
	background:#ECECEA;	
}


#footer2 a
{	
	text-align:center;
	color:#2f3083; 
	font-size:14px; 
	padding:5px; 
	outline:none;
	text-decoration:none;
	font-weight:bold;
}

JavaScript

$('#col.col4').height(function(_,v){ return v; });

$('.toggle').click(function () {
    $('#list1,#list2').slideToggle();
});;

$('#change_links1').click(function(e) {
    e.preventDefault();
});

$('#change_links2').click(function(e) {
    e.preventDefault();
});