JSFiddle - React, Tailwind, and code Playground

by Patrick Hund

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
        <div>

          <!-- Nav tabs -->
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#topHeadlines" aria-controls="topHeadlines" role="tab" data-toggle="tab" onclick="">Top Headlines</a></li>
            <li role="presentation"><a href="#topMDHeadlines" aria-controls="topMDHeadlines" role="tab" data-toggle="tab">Top Maryland Headlines</a></li>
            <li role="presentation"><a href="#topBusinessHeadlines" aria-controls="topBusinessHeadlines" role="tab" data-toggle="tab">Top Business Headlines</a></li>
            <li role="presentation"><a href="#topSportsHeadlines" aria-controls="topSportsHeadlines" role="tab" data-toggle="tab">Top Sports Headlines</a></li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content">
            <div id="topHeadlines" role="tabpanel" class="tab-pane fade in active"></div>
            <div role="tabpanel" class="tab-pane fade" id="topMDHeadlines">...</div>
            <div role="tabpanel" class="tab-pane fade" id="topBusinessHeadlines">...</div>
            <div role="tabpanel" class="tab-pane fade" id="topSportsHeadlines">...</div>
          </div>

        </div>
        
        
        
        <div id="yahooId"><a href="https://www.yahoo.com/?ilc=401" target="_blank"> <img src="https://poweredby.yahoo.com/purple.png" width="92" height="19"/> </a></div>
<div style="clear:both;"></div>

</body>

CSS

/*
**  CSS to clean up Google News RSS Feed
*/

.rssBody table tr td:first-of-type,
.rssBody table tr td:last-of-type a, 
.rssBody table tr td:last-of-type nobr,
.rssBody table tr td:last-of-type .p {
	display: none !important;	
}

.rssHeader {
    padding: 15px 0px 15px 0px;
}

.rssBody table tr td:last-of-type {
	padding: 0;
	margin: 0;	
}

.rssBody table tr td:last-of-type div.lh font {
	display: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;	
}

.rssBody table tr td:last-of-type div.lh font:nth-of-type(2) {
	display: block;	
}

.rssBody table tr td:last-of-type div.lh {
	margin: -83px 0px -8px 20px;	
	max-height: 95px;
}


#yahooId {
	float: right;	
	padding-top: 30px;
}

JavaScript

/*
        ** Google News RSS Feed: To replace MNT RSS feed when working again.
        ** http://news.google.com/news?pz=1&cf=all&ned=us&hl=en&q=Medical&output=rss
        */
        
        $(document).ready(function(){
        //RSS feed url, RSS feed name, options
            $('#topHeadlines').rssFeedTopic("topHeadlines");
            $('#topMDHeadlines').rssFeedTopic("topMDHeadlines");
            $('#topBusinessHeadlines').rssFeedTopic("topBusinessHeadlines");
            $('#topSportsHeadlines').rssFeedTopic("topSportsHeadlines");
            
            
      });

        /* RSS Feed Code
        ** API: YQL */
        (function($) {
            var current = null;
            $.fn.rssfeed = function(url, news, options) {
                var defaults={limit:10,header:true,titletag:'h4',date:true,content:true,snippet:true,showerror:true,errormsg:'',key:null};
                var options=$.extend(defaults,options);
                url = encodeURIComponent(url);

                return this.each(function(i, e) {
                    var $e = $(e);
                    if(!$e.hasClass('rssFeed')) {
                        $e.addClass('rssFeed');
                    }

                    if(url == null) {
                        return false;
                    }
                    var api = "https://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20feed%20WHERE%20url%3D%22" + url;

                    if(options.limit !== null) {
                        api += "%22%20%7C%20truncate(count%3D" + options.limit + ")";
                    };

                    api += "&format=json&diagnostics=true&callback=?";//*/


                    $.getJSON(api, function(data) {
                        if(data.query.count > 0) {
                            _callback(e, data.query.results.item, options, news);
                        } else {
                            if(options.showerror) {
                                if(options.errormsg != '') {
          ...