JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript:(function(b,d){if(b.a){delete b.a;d.body.onkeydown=null;var e=d.getElementById('wtf-overlay');e.parentNode.removeChild(e)}else{b.a={c:'ohmygodmyfuckingkeyboardisbroken'.split(''),position:0,body:d.body,b:!1};var f=function(c){var a=d.getElementById('wtf-overlay');null===a&&(a=d.createElement('div'),a.setAttribute('id','wtf-overlay'),b.a.body.appendChild(a),a.style.position='absolute',a.style.top='200px',a.style.left='50%',a.style.opacity='0',a.style.fontFamily='Arial,sans-serif',a.style.fontSize='400px',a.style.color='#555555',a.style.color='rgba(0,0,0,0.6)',a.style.webkitTransition='opacity .5s');a.innerHTML=c;a.style.marginLeft='-'+a.offsetWidth/2+'px';a.style.opacity='1';b.a.b&&clearTimeout(b.a.b);b.a.b=setTimeout(function(){a.style.opacity='0';b.a.b=!1},500)};b.a.body.onkeydown=function(c){if(64<=c.keyCode&&90>=c.keyCode&&!c.ctrlKey&&!c.altKey){c.preventDefault();var a=b.a.c[b.a.position];c.shiftKey&&(a=a.toUpperCase());if('TEXTAREA'===c.target.tagName||'INPUT'===c.target.tagName)c.target.value+=a;f(a);++b.a.position>b.a.c.length-1&&(b.a.position=0)}}}})(window,document);" id="bookmark"><span>One Month Of Code [Input]</span></a>

<p>Bookmarklet - Drag into bookmarks and click on any side!<br>by Raphael Rauwolf <a href="https://twitter.com/RaphiRau">@raphirau</a></p>
    
<textarea></textarea>

CSS

#bookmark{
    width: 200px;
    height: 70px;
    display: table-cell;
    border-radius: 10px;
    background-color: rgba(0,176,255,0.8);
    text-align: center;
    vertical-align: middle;
    color: #FFFFFF;
    text-decoration: none;
    font-family: Arial,sans-serif;
    font-size: 35px;
    font-weight: bold;
}
p{
    font-family: Arial,sans-serif;
    font-size: 30px;
    margin: 20px 0;
    
}

textarea{
    height : 200px;
    margin: 50px;
    width : 200px;
    
}