JSFiddle - React, Tailwind, and code Playground

by littleguga

HTML

<script src="https://cdn.jsdelivr.net/jquery.goodshare.js/3.1/goodshare.min.js"></script>
<h1>My page with goodshare.js</h1>
<p>Useful jQuery plugin that will help your website visitors share a link on social networks and microblogs.<br />Easy to install and configuring on any of your website!</p>
<div>
    <a href="#" class="goodshare" data-type="fb">Facebook <span data-counter="fb"></span></a> 
    <a href="#" class="goodshare" data-type="ok">Одноклассники <span data-counter="ok"></span></a> 
    <a href="#" class="goodshare" data-type="mr">Мой Мир@Mail.Ru <span data-counter="mr"></span></a> 
    <a href="#" class="goodshare" data-type="gp">Google Plus <span data-counter="gp"></span></a> 
    <a href="#" class="goodshare" data-type="li">LinkedIn <span data-counter="li"></span></a> 
    <a href="#" class="goodshare" data-type="tw">Twitter <span data-counter="tw"></span></a> 
    <a href="#" class="goodshare" data-type="lj">LiveJournal</a> 
    <a href="#" class="goodshare" data-type="tm">tumblr <span data-counter="tm"></span></a> 
    <a href="#" class="goodshare" data-type="bl">Blogger</a> 
    <a href="#" class="goodshare" data-type="pt">Pinterest <span data-counter="pt"></span></a> 
    <a href="#" class="goodshare" data-type="di">Digg</a> 
    <a href="#" class="goodshare" data-type="en">Evernote</a> 
    <a href="#" class="goodshare" data-type="rd">Reddit <span data-counter="rd"></span></a>
    <a href="#" class="goodshare" data-type="su">StumbleUpon <span data-counter="su"></span></a>
    <a href="#" class="goodshare" data-type="po">Pocket <span data-counter="po"></span></a>
    <a href="#" class="goodshare" data-type="sb">Surfingbird <span data-counter="sb"></span></a>
    <a href="#" class="goodshare" data-type="bf">Buffer <span data-counter="bf"></span></a>      
    <a href="#" class="goodshare" data-type="ra">Readability</span></a>
</div>
<p>See goodshare.js on GitHub: https://github.com/enjoyiacm/goodshare.js</p>
<div><a href="#" id="add">Add new...

CSS

html, body {font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; text-align: center;}
a {color: #ffffff; display: inline-block; width: 160px; padding: 10px; margin: 2px auto; cursor: pointer;}
a[data-type="vk"] {background: #45668e;}
a[data-type="fb"] {background: #3b5998;}
a[data-type="ok"] {background: #ed812b;}
a[data-type="mr"] {background: #168de2;}
a[data-type="gp"] {background: #dd4b39;}
a[data-type="li"] {background: #0976b4;}
a[data-type="tw"] {background: #55acee;}
a[data-type="lj"] {background: #004359;}
a[data-type="tm"] {background: #35465c;}
a[data-type="bl"] {background: #f57d00;}
a[data-type="pt"] {background: #cc2127;}
a[data-type="di"] {background: #000000;}
a[data-type="en"] {background: #7ac142;}
a[data-type="rd"] {background: #5f99cf;}
a[data-type="su"] {background: #eb4924;}
a[data-type="po"] {background: #d3505a;}
a[data-type="sb"] {background: #26B1F6;}
a[data-type="bf"] {background: #323b43;}      
a[data-type="ra"] {background: #990000;}
a#add {background: green;}

JavaScript

$(function() {
    
  // Спустя 3 секунды после загрузки страницы
  setTimeout(function() { 
      $('<a href="#" class="goodshare" data-type="vk">Вконтакте <span data-counter="vk"></span></a>').appendTo('#result_1');
  }, 3000);
    
  // При клике на кнопку
  $('#add').on('click', function(event) {
    event.preventDefault();
    $('#result_2').append('<a href="#" class="goodshare" data-type="vk">Вконтакте <span data-counter="vk"></span></a>');
      $(document).getCount();
  });
    
});