JSFiddle - React, Tailwind, and code Playground

HTML

<div id="theBox"></div>

CSS

body {
    padding: 10px;
}

#theBox {
    border: 1px solid black;        
    width: 100px;
    height: 100px;
    background:
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAABkCAIAAADBpW1NAAAACXBIWXMAAAsTAAALEwEAmpwYAAABZElEQVQ4y3VUSxbDQAgC9f5Xpgs/4yRpFn0vHYOIDASE9YQ7JJCAICLcVgERdFAA6zfcL4RwAwAIICCEWX4IEUz8u58dcAlhz3MHVB3IxnvxTfyrH7pfc0k+wzf5Zf8q0cxLUBA++Fh16n6PczOwXwRE+CVw0ECektaD9cHhCwHW8134S97sxy7hW9/kk+LrQ//Rg5x9NBkePEE2eqr1TPz0iwBq8WXyee5r+Nz4Tz0e807D3hfrz9JrKoIGY0tY+vc8AIKOw0iIGH9tv9777mG+/GCtFzX9sPXxsy3hEx+bn0XVl//c/vTD6P0X79O/vtzJ5Z/bH4IIe/rrsZ/CT6ZZdfHV2U9f0eavm6+2H9dx488V6fk2H2Hdp/IXypLvefyIB771nX2L6z52QmX+4VA6+df67fk1+nQgvfWxPqx8872e0UN9n9y+9jmRfftr9nvnEStfhM7zKYmwO68u/5x86pofiXKXg4PtNz0AAAAASUVORK5CYII=) left no-repeat,
        -webkit-gradient(linear, left top, left bottom, from(#333), to(#999));
}