JSFiddle - React, Tailwind, and code Playground

by gonchuki

HTML

<div class="item_with_rgba_border"></div>
<div class="gradient_overlay"></div>

CSS

.item_with_rgba_border {
    border: 2px solid rgba(0,0,0,0.5);
    background-color: #cfa;
    width: 100px;
    height: 100px;
}

.gradient_overlay {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #d6d6d6));
    background: -moz-linear-gradient(center top, #fff 0%, #d6d6d6 100%);
    position: absolute;
    width: 100px;
    height: 100px;
    top: 25px;
    left: 55px;
}

body, html {
 background-color: #eeb;   
}