JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<p>
    Take a trip back to the 1980s when recycling started gaining steam. School kids were informed to put their unneeded papers into boxes in the classroom. Those papers would get recycled. Bottles and glass became the next items being recycled. At the time, the focus was on keeping reusable materials out of overflowing landfills.
</p>

<p>
    Fast forward several decades. Recycling is now becoming a new problem because it’s costing cities more to recycle than they’re getting back in fees and sales of reusable materials. In Dayton, Ohio, authorities are taking an extreme measure to educate the public about recycling.
</p>

<h3>
    What’s Happening in Dayton?
</h3>

<p>
    Every year, approximately 9.6 million tons of waste is thrown out in Ohio. Ohioans dispose of almost 2.3 million tons of organic matter like food and yard waste. Paper makes up just over 2 million tons. Plastics account for just over 1.5 million tons. Recycling programs exist to reduce the amount of waste going to landfills.
</p>

<p>
    Recycling used to be a profitable industry. Ohio’s solid waste facilities like Dayton’s Rumpke used to make some profit on recycled materials. When China stopped purchasing items like plastic and cardboard from the U.S., it started costing waste districts more to process recyclables than it was selling them for. Rumpke officials said it can cost up to $100 per ton to process recyclables they’re only making about $40 per ton. That $60 loss has to come from someone, so the waste district started charging cities to use their facility.
</p>

<p>
    Dayton, Ohio, offers free curbside recycling to its residents. The goal is to reduce unnecessary waste from reaching landfills. However, people aren’t recycling correctly. Putting trash in the recycling containers drives up costs as a new truck is dispatched to pick up the items as trash. Those items that could have been recycled end up in the landfill adding to the waste that will sit and decompose for months,...

CSS

.impact-widget {
    width: 100%;
    max-width: 308px;
}

.impact-widget__header {
    background-color: #007acc;
    text-align: center;
    padding: 10px 0 0 0;
}

.impact-widget__header img {
    width: 100%;
    max-width: 132px;
    margin: 0 auto -12px auto;
}

.impact-widget__content {
    border: 2px solid #efeff0;
    border-top: none;
    padding: 16px;
}

.impact-widget__content > p:first-child {
    margin-top: 0;
    text-align: center;
}

.impact-widget__episode-title {
    
}

JavaScript

$.getJSON("//impactpodcast.com/episode-feed-widget/", function(data){
	var widgetLatestEpisodes = [];
    var widgetFeaturedEpisodes = [];
    
	$.each(data, function(index, value){
    	if (value.featured !== true) {
        	widgetLatestEpisodes.push(
                '<div class="widget-episode">' +
                '<a href="' + value.contentURL + '" target="_blank">' +
                '<div class="widget-episode__image-wrapper">' +
                '<img src="' + value.imageURL +'">' +
                '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M8 5v14l11-7zm0 0"></path></svg>' +
                '</div>' +
                '<div class="widget-episode__date">' + value.date + '</div>' +
                '<div class="widget-episode__title">' + value.title + '</div>' +
                '</a>' +
                '</div>'
            );
        }
        
    	if (value.featured === true) {
        	widgetFeaturedEpisodes.push(
                '<div class="widget-episode">' +
                '<a href="' + value.contentURL + '" target="_blank">' +
                '<div class="widget-episode__image-wrapper">' +
                '<img src="' + value.imageURL +'">' +
                '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M8 5v14l11-7zm0 0"></path></svg>' +
                '</div>' +
                '<div class="widget-episode__date">' + value.date + '</div>' +
                '<div class="widget-episode__title">' + value.title + '</div>' +
                '</a>' +
                '</div>'
            );
        }
    });
    
    var impactWidgetHTML =
    	'<div class="impact-widget">' +
        '<div class="impact-widget__header">' +
        '<img src="//impactpodcast.com/wp-content/themes/impact/assets/img/logo-white.svg">' +
        '</div>' +
        '<div class="impact-widget__content">' +
        '<p>Listen along to the latest episodes of <em>Impact! with John...