A CodePen by Anonymous. Twitter Card - Enter in your username and make your own card, while it lasts...! ** Because of Twitter's lame rate limiting, this demo can only handle 150 people making their own cards per hour... If you try typing your username in and it ain't working, there really isn't much I can do. Try forking this pen. *** Follow me…

index.html

<section class="input-container">
  <h2>Make your own</h2>
  <b>@</b><input  placeholder="bennettfeely" id="input" /><button id="create">Create my card</button>
</section>

<section id="card" class="card">
  <aside class="prof">
    <div class="twitter-icon"></div>
  </aside>
  <aside class="prof"></aside>
  
  <a href="https://twitter.com/bennettfeely" target="_blank" id="prof_link" class="sidebar">
    <hgroup>
      <strong id="tweets">44</strong>
      <label>Tweets</label>
    </hgroup>
    <hgroup>
      <strong id="following">103</strong>
      <label>Following</label>
    </hgroup>
    <hgroup>
      <strong id="followers_count">166</strong>
      <label>Followers</label>
    </hgroup>
  </aside>
</section>

script.js

var card = $("#card");
var name = $("#name");
var prof = $("aside.prof");
var prof_link = $("#prof_link");
var tweets = $("#tweets");
var following = $("#following");
var followers_count = $("#followers_count");

$("#input").keyup(function(){
    $("#create").show();
});

$("#create").one("click", function(){
  card.addClass("loading");
  var input_val = $("#input").val();
var ajax_url = 'http://api.twitter.com/1/users/show.json?screen_name=' + input_val;
  
  $.ajax({
  url : ajax_url,
    dataType : "jsonp",
    success : function(data){
      
      var profile_image_url = data.profile_image_url;
      var prof_img = profile_image_url.replace("_normal", "");
      var prof_href = 'https://twitter.com/' + data.screen_name;
      card.removeClass("loading");
      prof.css("background-image",'url(' + prof_img + ')');
      prof_link.attr("href",prof_href);

      tweets.text(data.statuses_count);
      following.text(data.friends_count);
      followers_count.text(data.followers_count);
    },
    error : function()
    {
        $("#input").css("border-color","red");
    },

});
  });

style.css

* { box-sizing:border-box; }

body {
  font-family:"Helvetica Neue",Arial,sans-serif;
background:url(https://si0.twimg.com/profile_background_images/662858154/ltwyuzaajfslhb21d08w.png); 
}

section { text-align:center; padding:20px; }

h2 { font-size:1.1em; padding-bottom:10px; }

b { font-size:1.3em; }

.input-container {
  background:rgba(255,255,255,.2);
  color:rgba(0,0,0,.8);
  text-shadow:1px 1px #dcdcdc;
}

input {
  display:inline-block;
  padding:10px;
  border:1px solid rgba(0,0,0,.35);
  border-radius:5px;
  margin:0 4px;
  width:110px;
}

input:focus {
  border-color:#56b4ef;
  outline:0;
  box-shadow:0 0 8px rgba(82,168,236,.6);
}

button {
  display:none;
  padding:8px 12px;
  color:#fff;
  text-shadow:0 -1px 1px rgba(0,0,0,.25);
  font-size:13px;
  font-weight:bold;
  background:-webkit-linear-gradient(#33bcef,#019ad2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  border:1px solid #057ed0;
  border-radius:4px;
  cursor:pointer;
}

.card {
  display:-webkit-flex;
  display:flex;
  padding:30px;
  position:relative;
  width:240px;
  margin:0 auto;
  transition:opacity .25s, -webkit-filter .25s, filter .25s;
}

.loading { opacity:.5; -webkit-filter:grayscale(1); }

.prof {
  position:relative;
  z-index:1;
  width:100px;
  height:200px;
 background:url(https://si0.twimg.com/profile_images/1996546926/main-thumb-569396-200-uAQ3CJBkh340648Xi2GuNaxorvCVr5tS.jpeg)  #f9f9f9;
  background-size:200% 100%;
  transform-origin:left center;
  border-radius:1em 0 0 1em;
}

.twitter-icon {
    width:16px; height:16p;
}

.prof:nth-child(2){
  background-position:100px 0;
  box-shadow:inset 100px 0 rgba(0,0,0,0);
  transition:box-shadow .4s, transform .4s;
  transform:perspective(500);
  border-radius:0 1em 1em 0;
}

section:hover .prof:nth-child(2){ transform:perspective(500) rotateY(-45deg); box-shadow:inset 100px 0 rgba(0,0,0,.2); }

.sidebar {
  display:block;
  text-decoration:none;
  -webkit-align-self:center;
  align-self:center;
  z-index:0;
  width:200px;
  text-align:right;
  transform-origin:left center;
}

hgroup {
  position:relative;
  left:-200px;
  border:1px solid rgba(0,0,0,.4);
  padding:8px 12px;
  color:#888;
  line-height:16px;
  background:#f9f9f9;
  transition:.5s;
  cursor:pointer;
  border-radius:5px;
  margin:5px 0;
  user-select:none;
  opacity:.5;
}

section:hover .sidebar hgroup { left:-120px; opacity:1; }


hgroup:nth-child(2){ transition-delay:.1s; }
hgroup:nth-child(3){ transition-delay:.2s; }


strong { display:block; color:#000; font-weight:700; font-size:14px; line-height:16px; }
label { font-size:10px; text-transform:uppercase; }

hgroup:hover, hgroup:hover strong, a:hover { color:#0084B4; }