JSFiddle - React, Tailwind, and code Playground

HTML

<!-- 

  SO Question: http://stackoverflow.com/q/11312923/1195891
  
  These are all the custom jsFiddles for this Question.
  jsFiddle Text-Link method:             http://jsfiddle.net/hUAh8/1/
  jsFiddle Custom Logo method:           http://jsfiddle.net/hUAh8/2/
  jsFiddle Custom Logo and Image method: http://jsfiddle.net/hUAh8/3/   
  
-->

<p>Random sports image from image placeholder service.</p>

<div id="pin1">

<a href="javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());">
    
  <!-- Here's a Photograph that is enabled for Pinterest pinning! -->
  <!-- Optional: Multiple images can be placed here -->
  <img src="http://lorempixel.com/400/200/sports/" alt="img" title="Pin this image @ Pinterest!" style="width:400px; height:200px;" />

</a>
    
<!-- This anchor with text-link will activate the above Pinterest image. -->
<a href="#" id="pin1click" class="pin1clickText">Pin on Pinterest Demo Link</a>

</div>


<!--

Reference URL for this method:
    
http://www.brandaiddesignco.com/blog/add-a-custom-pinterest-pin-it-button-to-your-website/375/

-->

CSS

/* Optional simple styling of the Pinterest div wrapper */
#pin1{
  margin-top: 25px;
  margin-left: 50px;
}


/*  This Required CSS selector prevents viewing of the Pinterest image(s). */
#pin1 a img{
  position: absolute;
  margin-left: -5000px;
}

JavaScript

$(document).ready(function() {

    // Simple click event for text-link anchor with Pinterest image.
    $('#pin1click').click(function() {

        $('#pin1 a img').click();

    });

});