JSFiddle - React, Tailwind, and code Playground

HTML

<!--
Answer by Arttronics for SO Question: http://stackoverflow.com/q/13796859/1195891

Console.log messages are provided, please active the browsers console.

Important information for Pinterest data scraping:
The URL used in the main getLinkMeta(); function does not contain any regional subdomain location (if that exisits). Using regional subdomain when located outside that region might cause script not to work as expected.

-->

<div id="results"></div>

CSS

html {
  font-family: "arial";
  font-size: 20px;
}

JavaScript

/**
 * Create a Facebook-style Link Preview
 * Using YQL for cross domain data scraping
 *
 * http://ninjagirl.com/posts/2012/02/create-facebook-style-link-preview-using-jquery-yql
 * @author Jocelyn (@jsfwd / ninjagirl.com)
 */

//  WARNING: This original script is modifed for Stackoverflow Pinterest Answer. The above link provides tutorial and unaltered source.
//           There are a lot of console log messeages to help understand what's going on... turn on the browsers console.
//           The modified sections I've done include the word "jsFiddle MOD" when something differs from the original script.
//           Comments that do not have "jsFiddle MOD" are authors original script comments.


(function($) {

    $(document).ready(function() {


        // jsFiddle MOD:
        // The original script used an interactive input box with button and simple format checking, along with supporting HTML in body section.
        // This jsFiddle will instead invoke the "getLinkMeta()" function directly and will include a supplied Pinterest Pinned URL.
        // Ideally, you will use some type of automatic process since it's likely you will process more than 1 datascrape image per webpage.
        // The invoke process for getLinkMeta(); is done towards the end of this script.

        
        /**
         * Using a supplied url, fetch the title, description and image to display
         * as a preview
         *
         * @param url        assume this is a valid url
         */

        function getLinkMeta(url) {
            // SELECT * FROM html WHERE url="http://mashable.com/2012/01/25/get-old-facebook-back" and xpath="//title|//head/meta"
            // can't use xpath to select meta 'property' attributes (ex./ og:image)
            // YQL's html data table run through HTML Tidy which strips as it thinks invalid
            // create the yql query (encoded!) with the url provided
            //
            // jsFiddle MOD: Just a comment that the following YQL...