JSFiddle - React, Tailwind, and code Playground

by karimkhan

HTML

<input type="text" id="text" name="sent" contenteditable="true"  style=" text-align: left; height: 30px; width:512px; " placeholder="Enter URL ..."/></input>
<button id="b1" style="display:none" > Get Sentiment </button>

CSS

button {
         font-family: Georgia;
         color: #ffffff;
         font-size: 23px;
         padding-top: 16px;
         padding-right: 37px;
         padding-bottom: 16px;
         padding-left: 37px;
         text-decoration: none;
         -webkit-border-radius: 28px;
         -moz-border-radius: 28px;
         border-radius: 28px;
         -webkit-box-shadow: 0px 1px 3px #666666;
         -moz-box-shadow: 0px 1px 3px #666666;
         box-shadow: 0px 1px 3px #666666;
         left: 538px; 
         top: 290px;
         text-shadow: 0px 2px 23px #666666;
         border: solid #d91c71 2px;
         background: -webkit-gradient(linear, 0 0, 0 100%, from(#F70247), to(#F70247));
         background: -moz-linear-gradient(top, #F70247, #F70247);
         -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F70247, endColorStr=#F70247);
         filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F70247, endColorStr=#F70247);
         display:inline-block; /* IE is so silly */
         }
         button:hover {
         background: #F70247;
         }
         ect: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
         /* iOS */
         -webkit-appearance: none; /* 1 */
         /* IE6/7 hacks */
         *overflow: visible; /* 2 */
         *display: inline; /* 3 */
         *zoom: 1; /* 3 */
         }
         .uibutton,
         .uibutton:visited {
         position: relative;
         z-index: 1;
         overflow: visible;
         display: inline-block;
         padding: 0.5em 0.8em 0.5em;
         padding-left:5em;
         border: 1px solid #999;
         border-bottom-color: #888;
         margin: 0;
         text-decoration: none;
         text-align: center;
         font: bold 13px/normal 'lucida grande', tahoma, verdana, arial, sans-serif;
         white-space: nowrap;
         cursor: pointer;
         /* outline: none; */
         color: #333;
        ...

JavaScript

$(document).ready( function() {
    $("#text").bind("keypress", function( e ) {
    document.getElementById("b1").style.display = "block";
    });
});