JSFiddle - React, Tailwind, and code Playground

by sc0rp10

HTML

<div class="wrapper">
    <div class="test"></div>
</div>

CSS

.wrapper {
    background: url(http://24ways.org/img/body.gif) repeat;
    padding:40px;
}
.test {
    width:500px;
    height:500px;
    background-color:#ddd;
    border: 20px solid rgba(255, 255, 255, 0.5);
    -moz-background-clip: border;     /* Firefox 3.6 */
    -webkit-background-clip: border;  /* Safari 4? Chrome 6? */
    background-clip: border-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */

    -moz-background-clip: padding;     /* Firefox 3.6 */
    -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
    background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */

    -moz-background-clip: content;     /* Firefox 3.6 */
    -webkit-background-clip: content;  /* Safari 4? Chrome 6? */
    background-clip: content-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}