JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<header id="frame">

        <p>

            <a href="https://twitter.com/share" class="twitter-share-button" data-via="visualidiot" data-lang="en" data-related="visualidiot">Tweet</a>
            <script>!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");</script>

        </p>

  <div>&nbsp;</div>
</header>

CSS

p {
        background: #fff;
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2), inset 0 -1px 1px #f4f3f2;
        -moz-box-shadow: 0 1px 1px rgba(0,0,0,.2), inset 0 -1px 1px #f4f3f2;
        box-shadow: 0 1px 1px rgba(0,0,0,.2), inset 0 -1px 1px #f4f3f2;
        border: 1px solid #bd9e36;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    padding:10px;
    padding-right:0;
        float: left;
        height: 20px;
        line-height: 20px;
        margin: 17px 0;
}

header#frame {
    height: 70px;
    position: relative;
    z-index: 1000;
background: #EDC435 url('../img/pattern.jpg') fixed;   
    -webkit-box-shadow: inset 0 -2px 1px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 -2px 1px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 -2px 1px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.1);
}

JavaScript

$(document).ready(function(){
  var oldValue = $("iframe").width();
    var newValue = oldValue - 1;
$("replies").text(newValue);
  $("p").css("width", newValue);
});