JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Atoms</h1>

<a href="#" class="button">ボタン</a>
<p>なんらかの文章</p>
<div class="frame"></div>

<h1>Molecules</h1>

<div class="frame">
  <p>なんらかの文章</p>  
  <a href="#" class="button">ボタン</a>
</div>

CSS

.button {
  display: inline-block;
  padding: 10px 30px;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
  background-image: linear-gradient(to bottom, #505050 0, #131313 50%, #0f0f0f 50%, #202020 100%);
}

.frame {
  padding: 10px;
  border: 1px solid #000;
  margin-top: 10px;
}