JSFiddle - React, Tailwind, and code Playground

Cool Big Social Counter Button With Bootstrap

by Cristiano Oliveira

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
    <div class="row social">

        <div class="col-md-3">
            <a href="http://www.jquery2dotnet.com">
                <div class="panel panel-default android">
                    <div class="panel-body">
                        <i class="fa fa-android"></i>
                        <small class="social-title">Disponível para</small>
                        <h3 class="name">Android</h3>
                        
                    </div>
                </div>
            </a>
        </div>

        <div class="col-md-3">
            <a href="http://www.jquery2dotnet.com">
                <div class="panel panel-default iphone">
                    <div class="panel-body">
                        <i class="fa fa-apple"></i>
                        <small class="social-title">Disponível para</small>
                        <h3 class="name">iPhone</h3>
                        
                    </div>
                </div>
            </a>
        </div>



        <div class="col-md-3">
            <a href="http://www.jquery2dotnet.com">
                <div class="panel panel-default pwa">
                    <div class="panel-body">
                        <i class="fa fa-windows"></i>
                        <small class="social-title">Disponível para</small>
                        <h3 class="name">Windows</h3>
                        
                    </div>
                </div>
            </a>
        </div>




<div class="col-md-3">
            <a href="http://www.jquery2dotnet.com">
                <div class="panel panel-default twitter">
                    <div class="panel-body">
                        <i class="fa fa-twitter"></i>
                        <small class="social-title">Twitter</small>
                ...

CSS

body { 
margin-top:20px; 
}
.social-title {
  text-transform: uppercase;
  letter-spacing: 1px;
}
.name { 
font-size: 27px;
margin-top: 0;
margin-bottom: 0;
text-align: right;
}
.count { 
font-size: 27px;
margin-top: 0;
margin-bottom: 0;
text-align: right;
}
.fa {
  font-size: 50px;
  text-align: right;
  position: absolute;
  top: 17px;
  left: 37px;
  outline: none; 
}
.social .panel { 
color:#fff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
text-align: right;
}
.social a { 
text-decoration:none; 
}
.pwa {
  background-color:#000000;
}
.iphone {
  background-color: #0096AB;
}
.android {
  background-color:#B3CB39;
}
.twitter { 
background-color:#00acee; 
}
.google-plus { 
background-color:#dd4b39; 
}
.facebook-like { 
background-color:#3b5998; 
}
.visitor { 
background-color:#eb6d20; 
}

JavaScript

// Animate the element's value from x to y:
$({ someValue: 0 }).animate({ someValue: Math.floor(Math.random() * 3000) }, {
    duration: 3000,
    easing: 'swing', // can be anything
    step: function () { // called on every step
        // Update the element's text with rounded-up value:
        $('.count').text(commaSeparateNumber(Math.round(this.someValue)));
    }
});

function commaSeparateNumber(val) {
    while (/(\d+)(\d{3})/.test(val.toString())) {
        val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
    }
    return val;
}