JSFiddle - React, Tailwind, and code Playground

by bogdan_vq

HTML

<script src="https://rawgit.com/kriskowal/q/v1/q.js"></script>
<div class="line"></div>
<div class="header">
    <div class="avatar"> </div>
    <div class="fallow">
        <div><div class="bk-1">Followers</div><div class="bk-2" id="followers"></div></div>
        <div><div class="bk-1">Following</div><div  class="bk-2" id="following"></div></div>
    </div>
    
</div>

<div class="content">
    <ul id="repo">
    </ul>
    
    
</div>

<div class="footer">
    
</div>

CSS

.line {
    top: 0px;
    left: 0px;
    width: 100%;
    height : 3px;
    background-color: #F4B400;
    position: absolute;
    
}
.header .avatar {
    width: 90px;
    height: 90px;
    background-size: 100%;
    display: inline-block;
}

.header .fallow {
    display: inline-block;
    width : 400px;
    font-size: 15px;
    border-bottom: 1px solid #ccc;
    padding-left: 20px;
}
.header .fallow .bk-1,
.header .fallow .bk-2 {
    display: inline-block;
    padding-right: 12px;
}


.header .avatar {
    
}

JavaScript

var jqxhr = $.ajax({
    url: "https://api.github.com/users/volosincu",
    method : 'get',
    headers : {'Accept': 'application/vnd.github.v3+json'} }
);
var r = null;
Q.when(jqxhr, function (profile) {
    console.log(profile);
    $("#followers").text(profile.followers);
    $("#following").text(profile.following);
    $('.avatar').css({'background-image' : "url('"+ profile['avatar_url'] +"')"});
    r = profile.repos;
    var $repo = $('#repo');
    $.each(repos, function(i, r){
        console.log(r);
       //$repo.append('<li>' + )
    });
}, function (error) {
});