JSFiddle - React, Tailwind, and code Playground

by David Underwood

HTML

<div id="Container">
  <div id="RSSBlock">
    <div id="RSSContent" class="loading"></div>
  </div>
  
  <div id="Content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing...</p>
  </div>
</div>

CSS

body { font-family: Verdana, Sans-Serif; font-size: 12px; text-align: justify; }

a { font-weight: bold; font-size: 14px; }

ul { padding: 5px; list-style-type: none; margin: 0px; }

li { margin-bottom: 5px; }

#Container { width: 800px; margin: 0 auto; }

#RSSBlock 
{
  float: right;
  border: 2px solid black;
  width: 350px;
  height: 300px;
  margin: 0 0 10px 10px;
  overflow-y: auto;
  overflow-x: hidden;
}  

#RSSContent { width: 100%; height: 100%; }

.loading { background: url('http://www.aeshield.com/images/progress-indicator.gif') no-repeat center; }

JavaScript

$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "https://api.constantcontact.com/v2/eventspot/events?limit=50&api_key=z6b93rfkz6aqadwwvbfa7p5n",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    beforeSend: function(xhr){xhr.setRequestHeader('Authorization', 'Bearer 257fd126-e90b-43a5-8d4b-2b9992112a69');},
    success: function(msg) {
      // Hide the fake progress indicator graphic.
      $('#RSSContent').removeClass('loading');
 
      // Insert the returned HTML into the <div>.
      $('#RSSContent').html(msg.results);
    }
  });
});