JSFiddle - React, Tailwind, and code Playground

Flat Profile with Social Links

by Jennifer Perrin

HTML

<div class='all'>
  <div class='container'>
    <div class='rid'>
      <div class='int'>
        <p class='link'>
          <a href='' target='_blank' title='Book'>mywebsite.com</a>
        </p>
        <p class='twitter'>
          <a href='https://twitter.com' target='_blank' title='Twitter'>@twitter</a>
        </p>
        <p class='clock'>
          <span>00:00</span>
        </p>
      </div>
    </div>
  </div>
  <br class='clear'>
  <span class='entypo-link'></span>
  <span class='entypo-twitter'></span>
  <span class='entypo-clock'></span>
</div>

CSS

@charset "UTF-8";
@font-face {
  font-family: 'entypo';
  font-style: normal;
  font-weight: normal;
  src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot');
  src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot?#iefix') format('eot'), url('http://weloveiconfonts.com/api/fonts/entypo/entypo.woff') format('woff'), url('http://weloveiconfonts.com/api/fonts/entypo/entypo.ttf') format('truetype'), url('http://weloveiconfonts.com/api/fonts/entypo/entypo.svg#entypo') format('svg');
}
.entypo-note:before {
  content: "\266a";
}
.entypo-note-beamed:before {
  content: "\266b";
}
.entypo-music:before {
  content: "\1f3b5";
}
.entypo-search:before {
  content: "\1f50d";
}
.entypo-flashlight:before {
  content: "\1f526";
}
.entypo-mail:before {
  content: "\2709";
}
.entypo-heart:before {
  content: "\2665";
}
.entypo-heart-empty:before {
  content: "\2661";
}
.entypo-star:before {
  content: "\2605";
}
.entypo-star-empty:before {
  content: "\2606";
}
.entypo-user:before {
  content: "\1f464";
}
.entypo-users:before {
  content: "\1f465";
}
.entypo-user-add:before {
  content: "\e700";
}
.entypo-video:before {
  content: "\1f3ac";
}
.entypo-picture:before {
  content: "\1f304";
}
.entypo-camera:before {
  content: "\1f4f7";
}
.entypo-layout:before {
  content: "\268f";
}
.entypo-menu:before {
  content: "\2630";
}
.entypo-check:before {
  content: "\2713";
}
.entypo-cancel:before {
  content: "\2715";
}
.entypo-cancel-circled:before {
  content: "\2716";
}
.entypo-cancel-squared:before {
  content: "\274e";
}
.entypo-plus:before {
  content: "\2b";
}
.entypo-plus-circled:before {
  content: "\2795";
}
.entypo-plus-squared:before {
  content: "\229e";
}
.entypo-minus:before {
  content: "\2d";
}
.entypo-minus-circled:before {
  content: "\2796";
}
.entypo-minus-squared:before {
  content: "\229f";
}
.entypo-help:before {
  content: "\2753";
}
.entypo-help-circled:before {
  content: "\e704";
}
.entypo-info:before {
  content:...

JavaScript

$(document).ready(function () {
  $("[class^='entypo-']").on("click",function(){
    $('.int p').hide();
    var paragraph = $(this).attr('class').split('entypo-')[1];
    $('.'+paragraph).show();
    
    if (!$('.int').hasClass('active')){
      $('.int').animate({
        'height':'100%',
        'width':'100%',
        'top':0,
        'left':0
      },200).addClass('active');
    }
  });
});