JSFiddle - React, Tailwind, and code Playground

HTML

<div id=foo class=shared>some content with shadow</div>
<div id=bar class=shared>some content below shadow</div>

<div id="foz" class=shared>some content with border</div>
<div id="baz" class="shared">some content below border</div>

CSS

body {
    background: url('http://i.imgur.com/pr86mh.jpg');
}

.shared {
  margin-left: 30px;
  padding: 8px;
  width: 200px;
  border-radius: 5px;
}

#foo {
  margin-top: 30px;
  background: #ddd;
  box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.5);
}

#bar {
  margin-top: 4px;
  background-color: green;
}

#foz {
  margin-top: 30px;
  background-color: #ddd;
  border-bottom: 8px solid rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}

#baz {
  margin-top: 4px;
  background-color: green;
}