JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <input />
</section>

CSS

section {
    background: url(//regretless.com/images/woodBk.png) no-repeat;
    width: 400px;
    height: 400px;
    padding: 20px;
}
input {
    background: rgba(0,0,0,.1);
    width: 200px;
    height: 30px;
    border-radius: 15px;
    border: 0;
    box-shadow: 1px 1px 5px rgba(0,0,0,.3) inset,
                    0 -1px 2px rgba(255,255,255,1) inset;
    padding: 0 10px;
    color: #f9e1c5;
}
input:focus {
    outline:none;
}