JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  

  <title></title>

  <link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/base/base.css" type="text/css">

  <style type="text/css" media="screen">

   a{

   color:red;

   }

   a:hover{

   text-decoration:none;

    color:#FFFFFF;

    background:orange;

    }

    li{list-style:none; }

  </style>

</head>

<body>

<h1><a href="http://motyar.blogspot.com">My Blog</a></h1>

  <ul id="feeds">

    

  </ul>

<script type="text/javascript" charset="utf-8">

  var x = document.getElementById('feeds');

 

  if(x){



    url = "http://motyar.blogspot.com";



    var yql = 'SELECT title,link,description FROM feed where url in                                                                    (select href from html where url in ("'+url+'") and xpath="//link[contains(@type,\'rss\')][1]")';



    var api = 'http://query.yahooapis.com/v1/public/yql?q='+encodeURIComponent(yql)+'&format=json&callback=showresults';



    var s = document.createElement('script');

    s.setAttribute('src',api);

    document.getElementsByTagName('head')[0].appendChild(s);

  }



  function showresults(o){

    var items = o.query.results.item;

    var c = 0;

    var out = '';

    for(var i=0,j=items.length;i<j;i++){



      out += '<li><a href="'+items[i].link+'">'+items[i].title+'</a>';

      out += '</li>';



    }

    

    x.innerHTML = out;

 

  }

  

</script>

</body>

</html>