JSFiddle - React, Tailwind, and code Playground
HTML
<div id="foo"></div>
<div id="bar"></div>
CSS
.follow_box_widget{overflow: hidden; padding-left: 5px; padding-right: 5px; padding-top: 5px; background-color: #fff transparent; position: relative; margin: auto;}
.follow_box{font-size: 11px; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; color: #333; line-height: 1.28; text-align: left; direction: ltr;}
.follow_box .follow_top{padding: 5px 10px 0px 5px; margin-bottom: 8px; min-width: 230px; overflow: hidden;}
.follow_box .profileimage{float: left; width: 40px; height: 40px; padding: 0px; margin: 0 10px 4px 0;}
.follow_box img{border: 0;}
.follow_box a{cursor: pointer; color: #3B5998; text-decoration: none;}
.follow_box a:hover{text-decoration: underline;}
.follow_action{padding: 0 0 0 8px;}
.follow_box .follow_action .name{line-height: 15px; font-size: 14px; font-weight: bold;}
.follow_box .follow_button{margin: 5px 0 0;}
.follow_box .total{min-width: 230px; overflow: hidden; display: block;}
.follow_box .connections{padding: 5px 0 4px 0px; border-top: solid 1px #D8DFEA; border-bottom: 1px solid #CCC; min-height: 150px;}
.follow_box .connections .connections_grid{padding-top: 5px; overflow: hidden;}
.follow_box .clearfix{zoom: 1;}
.follow_box .connections .connections_grid .grid_item{float: left; margin:0px; margin-right: 5px; margin-bottom: 8px; overflow: hidden; width: 50px;}
.follow_box .connections .connections_grid .grid_item .name{font-size: 9px; color: gray; overflow: hidden; padding-top: 2px; text-align: center; white-space: nowrap;}
.follow_box .connections .connections_grid .grid_item img{width: 48px; height: 48px;}
.follow_box .follow_widget_footer{ cursor: default; width: 100%; min-width: 230px; overflow: hidden;}
.follow_box .footer_border{ margin-top: 5px;}
.follow_box .uiImageBlock{line-height: 14px;}
.follow_box .follow_widget_footer .footer_logo{float: left; margin-right: 5px;}
.follow_box .follow_widget_footer .footer_text{cursor: default; color: #808080; font-size: 9px; float: left;}
.follow_box .follow_widget_footer...
JavaScript
/*
* Twitter Follow Box jQuery Plugin
* http://jobyj.in/twitter-follow-box-widget/
*
* Copyright 2012, Joby Joseph
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
*/
(function($) {
$.fn.followbox = function(options) {
var element=$(this);
//change this file path if the tiny twitter logo is not showing
var twitter_logo_path='https://twitter.com/phoenix/favicon.ico';
var settings = $.extend( {
'user' : 'jobysblog',
'width' : 292,
'height' : 252,
'theme' : 'light',
'border_color' : '#AAA',
'bg_color' : '#fff',
'bg_image' : '',
'title_color' : '#3B5998',
'total_count_color' : '#333',
'follower_name_color' : '#BBB'
}, options);
//twitter user lookup
$.ajax({
url: 'https://api.twitter.com/1/users/lookup.json?screen_name='+settings.user+'&include_entities=true',
dataType: 'jsonp',
success: function(data) {
var widget_width=settings.width-2;
var widget_height=settings.height-2;
var grid_container_height=settings.height-115;
var number_images_row=parseInt(settings.width / 55);
var number_images_col=parseInt(grid_container_height / 69)+1;
var total_followers=number_images_row*number_images_col;
element.html('<div class="follow_box_main" style="border: 1px solid #bbb; width: '+widget_width+'px; height: '+widget_height+'px;"><div class="follow_box_widget"><div class="follow_box"><div><div class="follow_top clearfix"><a href="http://www.twitter.com/'+settings.user+'" target="_blank"><img class="profileimage img" src="'+data[0].profile_image_url_https+'" alt="'+data[0].name+'"></a><div class="follow_action"><div class="name_block"><a href="http://www.twitter.com/'+settings.user+'"...