JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="top_share" role="button">
<label for="top_share" onclick="">
    <span>Share this shit!</span>
    <span>&#9829;</span>
    <span>&#8593;</span>
</label>                

<aside class="share">
    <ul>
        <li><a href="https://twitter.com/share" 
               class="twitter-share-button" 
               data-via="genelocklin"
               data-count="none">Tweet</a></li>
        <li><iframe src="http://genelocklin.github.com/github-buttons/github-btn.html?user=GeneLocklin&repo=github-buttons&type=fork"
  allowtransparency="true" frameborder="0" scrolling="0" width="53px" height="20px"></iframe></li>
        <li><div class="g-plusone" data-size="medium" data-annotation="none"></div></li>
        <li><a href="https://twitter.com/genelocklin" 
               class="twitter-follow-button" 
               data-width="133px"
               data-show-count="false">Follow @genelocklin</a></li>        
        

    </ul> 
</aside>

SCSS

/* Mixins 
-----------------------------------------------------*/
@mixin invisible { display: none; visibility: hidden; }
@mixin visible { display: block; visibility: visible; }  

@mixin invisibleAccessible { 
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important; }

@mixin cf { *zoom:1;
  &:before, &:after {
    content: ""; display: table; }
  &:after { clear: both; } }

@mixin transition { 
    -webkit-transition: .125s linear all;
    -moz-transition: .125s linear all;
    -ms-transition: .125s linear all;
    -o-transition: .125s linear all;
    transition: .125s linear all; }

/* Reset 
-----------------------------------------------------*/

* { margin: 0; padding: 0; 
    -webkit-box-sizing: border-box; 
       -moz-box-sizing: border-box; 
            box-sizing: border-box; }

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block; }

/* Base Type 
-----------------------------------------------------*/
html { font-size: 100%; }

body {
    font-size: 100%;    
    line-height: 1.5em;
    font-family: sans-serif;
}


/* Share Links 
-----------------------------------------------------*/

/*- Aside ----------*/
.share { 
    box-shadow: 0 1px rgba(0,0,0,.1);
    borddr-radius: 0 0 .25em.25em;
    @include transition;
    position: absolute;
    top: -7.5em;
    width: 90%;
    padding: 1.15em 5% 1.5em 5%;
    left: 5%;
    margin: auto;
    & ul { 
        & li { 
            display: block; 
            float: left;
            margin-left: 2%;
            &:first-of-type { 
                margin-left: 0;             
            } 
            &:last-of-type { 
                float: right;             
            }                
        }
    }
}
    
/*- Checkbox ----------*/
#top_share { @include invisibleAccessible; }

/*- Label...

JavaScript

/* 

CSS only slide down panel.

HOVER FOR EFFECT!

I was looking for an unobtrusive way to add share links to my examples e.g., Fiddles, Dabblets, etc. and this is what I came up with. 

I'm using it for share links here, but it can also be used to create something like this : http://web-kreation.com/demos/Sliding_login_panel_jquery/

Make sure that you change the share links to match the page you're sharing.


Follow @genelocklin for more hotness!

*/
































// twitter
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

// google
(function() {
  var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  po.src = 'https://apis.google.com/js/plusone.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();