JSFiddle - React, Tailwind, and code Playground

HTML

<div id="feedWidget">
	<div id="activeTab">
    	<!-- The name of the current tab is inserted here -->
    </div>
    
    <div class="line"></div>
    
    <div id="tabContent">
    	<!-- The feed items are inserted here -->
    </div>
</div>

CSS

#feedWidget{
	background:url(img/bg.png) repeat-x #47525c;
	border:2px solid #48535e;
	width:200px;
	padding:5px;
	position:relative;
	
	/* Remains hidden if JS is not enabled: */
	display:none;
	z-index:20;
}


#activeTab.hover,.dropDownList{
	background:url(img/drop_arrow.png) no-repeat 95% 50% #47525c;
	border:1px solid #38434d;

	margin:-1px;
	
	cursor:pointer;
	
	/* CSS3 round corners: */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	
}

#activeTab,.dropDownList div{
	color:white;
	cursor:pointer;
	font-size:20px;
	margin:0 2px 0 0;
	padding:5px;
	
	text-shadow:0 1px 1px black;
}

.line{
	height:1px;
	overflow:hidden;
	background-color:#2b353d;
	border-bottom:1px solid #687581;
	margin:10px 0;
}

.dropDownList{
	background-image:none;
	position:absolute;

	border-top:none;
	padding:5px;
	
	/* We reset the roundness of the top corners, inherited by a previous rule: */
	
	-moz-border-radius-topleft: 0;
	-moz-border-radius-topright: 0;
	-webkit-border-top-left-radius: 0;
	-webkit-border-top-right-radius: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.dropDownList div:hover{
	background-color:#505e6b;
}

#tabContent div{
	/* The feed entry divs */
	
	background-color:#EEEEEE;
	color:#555555;
	font-size:10px;
	margin-bottom:10px;
	padding:5px;
	position:relative;
	
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	
	-moz-box-shadow:0 1px 1px black;
	-webkit-box-shadow:0 1px 1px black;
	box-shadow:0 1px 1px black;
}

JavaScript

/* Configuration: */

var tabs = {
	"Google" : {
		"feed"		: "https://news.google.com/?output=rss",
		"function"	: rss
	},
	
	"Latest Tutorials": {
		"feed"		: "http://feeds.feedburner.com/Tutorialzine",
		"function"	: rss
	},
	
	"Smashing Mag": {
		"feed"		: "http://rss1.smashingmagazine.com/feed/",
		"function"	: rss
	},
	
	"Script & Style" : {
		"feed"		: "http://feeds2.feedburner.com/ScriptAndStyle",
		"function"	: rss
	},
	
	"TC @ Buzz"	: {
		"feed"		: "http://buzz.googleapis.com/feeds/102216607668541950594/public/posted",
		"function"	: buzz
	}
}

var totalTabs;
$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */
	
	/* Counting the tabs */
	totalTabs=0;
	$.each(tabs,function(){totalTabs++;})
	

	$('#feedWidget').show().mouseleave(function(){
		
		/* If the cursor left the widet, hide the drop down list: */
		$('.dropDownList').remove();
		$('#activeTab').removeClass('hover');

	}).mouseenter(function(){
		
		if(totalTabs>1) $('#activeTab').addClass('hover');
		
	});

	$('#activeTab').click(showDropDown);

	/* Using the live method to bind an event, because the .dropDownList does not exist yet: */
	$('.dropDownList div').live('click',function(){
		
		/* Calling the showDropDown function, when the drop down is already shown, will hide it: */
		showDropDown();
		showTab($(this).text());
	});
	
	
	/* Showing one of the tabs on load: */
	showTab('Google');
	
});


function showTab(key)
{
	var obj = tabs[key];
	if(!obj) return false;
	
	var stage = $('#tabContent');
	
	/* Forming the query: */
	var query = "select * from feed where url='"+obj.feed+"' LIMIT 5";
	
	/* Forming the URL to YQL: */
	var url = "http://query.yahooapis.com/v1/public/yql?q="+encodeURIComponent(query)+"&format=json&callback=?";
	
	$.getJSON(url,function(data){

		stage.empty();

		/* item exists in RSS and entry in ATOM feeds: */
		$.each(data.query.results.item || data.query.results.entry,function(){
			try{
				/* Trying to call the user...