JSFiddle - React, Tailwind, and code Playground

HTML

<blockquote>デフォルト</blockquote>

<blockquote class="red">色クラス</blockquote>

<blockquote class="bq_red">クラスのみで表現</blockquote>

<blockquote class="bq red blue">クラス組み合わせ</blockquote>

<blockquote class="bq red blue bgblack">クラス組み合わせ2</blockquote>

CSS

blockquote {
    background: none repeat scroll 0 0 rgba(245, 245, 245, 0.8);
    border: 1px solid #FFFFFF;
    margin: 1em 0;
    padding: 20px 55px;
    position: relative;
}

blockquote::before,
blockquote::after {
  color: #C8C8C8;
  font-family: serif;
  font-size: 600%;
  line-height: 1em;
}

blockquote::before {
    content: "“";
    position: absolute;
    top: 0;
    left: 0;   
}

blockquote::after {
    content: "”";
    position: absolute;
    right: 0;
    bottom: -16px;
    line-height: 0;
}

blockquote.red::before,
blockquote.red::after {
  color: red;
}

.bq_red::before,
.bq_red::after {
  color: red;
}

.bgblack {
  background-color: #111;
  color: #fff;
}

.bq.red.blue::before {
  color: red;
}
.bq.red.blue::after {
  color: blue;
}