JSFiddle - React, Tailwind, and code Playground

by jahrichie

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script>
<a href="#" 
   class="tweet" 
   data-url="http://jsfiddle.net" 
   data-via="JoelBesada" 
   data-text="Some text to describe the link" 
   data-related="js_fiddle"
   data-hashtags="tag">        
    
       <span class="count">0</span>
       <span class="message">Tweet</span>
       
</a>

CSS

/* Automatically prefixed with -prefix-free by Lea Verou */
body {
    padding: 100px; 
    background: #31434D;   
}

.tweet {
    position: relative;
    display: inline-block;
    padding: 7px 10px;
    text-align: center;
    font: 16px Helvetica, Arial, sans-serif;
    color: white;
    text-shadow: 1px 1px 0 #021D2B;
    background: blue;
    width: auto;
    min-width: 50px;
    text-decoration: none;
    background-color: #209adb;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(0,0,0,.1) 5px, rgba(0,0,0,.1) 10px),
                      linear-gradient(top, #5ab9ed 0%,#209adb 100%);

    border: 1px solid #04141C;
    border-bottom-width: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1), 
                inset 0 1px 0 rgba(255,255,255,0.4), 
                inset 0 0 3px rgba(255,255,255,0.5);

}

/* Twitter icon */
.tweet:before {
    content: "";
    display: block;
    position: absolute;
    left: -35px;
    top: 7px;
    width: 24px;
    height: 24px;
   ...

JavaScript

var API_URL = "http://cdn.api.twitter.com/1/urls/count.json",
    TWEET_URL = "https://www.charitybuzz.com/catalog_items/362104";
    
$(".tweet").each(function() {
    var elem = $(this),
    // Use current page URL as default link
    url = encodeURIComponent(elem.attr("data-url") || document.location.href),
    // Use page title as default tweet message
    text = elem.attr("data-text") || document.title,
    via = elem.attr("data-via") || "",
    related = encodeURIComponent(elem.attr("data-related")) || "",
    hashtags = encodeURIComponent(elem.attr("data-hashtags")) || "";
    
    // Set href to tweet page
    elem.attr({
        href: TWEET_URL + "?hashtags=" + hashtags + "&original_referer=" +
                encodeURIComponent(document.location.href) + "&related=" + related +
                "&source=tweetbutton&text=" + text + "&url=" + url + "&via=" + via,
        target: "_blank"
    });
    
    // Get count and set it as the inner HTML of .count
    $.getJSON(API_URL + "?callback=?&url=" + url, function(data) {
        elem.find(".count").html(data.count);
    });
});