JSFiddle - React, Tailwind, and code Playground

by Ritchie Zhu

HTML

<div class="content-panel card card-district">
  <a href="#" title="查看鼓楼区的所有作品"></a>
  <div class="card__cover">
    <div class="card__cover-text">鼓楼区</div>
  </div>
  <div class="card__content">
    <div class="card__content-box">
      <div class="card__stats">
        <span class="card__stats-number">265</span>
        <span class="card__stats-label">🏫 &nbsp;学校</span>
      </div>
      <div class="card__stats">
        <span class="card__stats-number">876</span>
        <span class="card__stats-label">📺 &nbsp;作品</span>
      </div>
    </div>
    <div class="card__content-box">
      <div class="card__stats">
        <span class="card__stats-number">26533</span>
        <span class="card__stats-label">👁️ &nbsp;浏览</span>
      </div>
      <div class="card__stats">
        <span class="card__stats-number">8726</span>
        <span class="card__stats-label">👏 &nbsp;投票</span>
      </div>
    </div>
  </div>
</div>

CSS

html {
  -webkit-text-size-adjust: 100%;
  font-size: 50px;
  /* 320 / 640 * 100 */
}

@media screen and (min-width: 360px) {
  html {
    font-size: 56.25px;
    /* 360 / 640 * 100 */
  }
}

@media screen and (min-width: 375px) {
  html {
    font-size: 58px;
  }
}

@media screen and (min-width: 384px) {
  html {
    font-size: 60px;
  }
}

@media screen and (min-width: 400px) {
  html {
    font-size: 62.5px;
  }
}

@media screen and (min-width: 414px) {
  html {
    font-size: 64.6875px;
  }
}

@media screen and (min-width: 480px) {
  html {
    font-size: 75px;
  }
}

@media screen and (min-width: 640px) {
  html {
    font-size: 100px;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 120px;
  }
}

.content-panel {
  margin: .16rem .1rem;
  background: #fff;
  border-radius: .08rem;
  box-shadow: 0 0 .13rem rgba(0, 0, 0, .05);
  box-sizing: border-box;
  padding: 0 .16rem;
}

.content-panel.card {
  display: flex;
  padding: .16rem 0;
}

.content-panel.card.card-district {
  padding: 0;
  position: relative;
}

.card-district a {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  text-decoration: none;
}

.card__cover {
  flex: 3;
  position: relative;
  z-index: 0;
  background: url(http://pan.xici.com/group5/M01/FC/D5/rBABqFm2Od6ENYnzAAAAAIdMZ7g864.jpg) no-repeat;
  background-size: cover;
  border-radius: .08rem 0 0 .08rem;
}

.card__cover-text {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -.4rem;
  margin-left: -.8rem;
  width: 1.6rem;
  height: .8rem;
  line-height: .8rem;
  border: 2px dashed white;
  border-radius: 5px;
  box-shadow: 0 0 0 4px rgba(254, 85, 78, .62);
  color: white;
  background-color: rgba(254, 85, 78, .62);
  font-size: .32rem;
  text-align: center;
}

.card__content {
  flex: 4;
  z-index: 0;
  text-align: center;
}

.card__content-box {
  display: flex;
}

.card__content-box + .card__content-box {
  border-top: 1px dashed...