JSFiddle - React, Tailwind, and code Playground

by omni5cience

HTML

<div id="button"><div id="buttontext">I'm a computer</div></div>

CSS

/*    HTML example:
    <div id="button"><div id="buttontext">Text</div></div> */

#button {
    width: 348px;
    height: 119px;
    border-radius: 62px;
    -webkit-border-radius: 62px;
    -moz-border-radius: 62px;
    border: 2px solid #5F5F5F;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #AFBCC9), color-stop(0.64, #757F8D), color-stop(1.00, #6E7786));
    background: -moz-linear-gradient(top, #AFBCC9 0.00%, #757F8D 63.57%, #6E7786 100.00%);
    box-shadow: inset -0px 3px 10px #515151;
    -webkit-box-shadow: inset -0px 3px 10px #515151;
    -moz-box-shadow: inset -0px 3px 10px #515151;
    text-align: center;
    text-indent: 0px;
    color: #FFFFFF;
    text-shadow: #515151 -0px -1px 1px;
    font: 36px/119px "Helvetica Neue";
    font-weight: 100;
}

#buttontext {
    position: relative;
    bottom: -12px;
}