JSFiddle - React, Tailwind, and code Playground

by zhouyulong

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <!-- A -->
  <div class="mui-row">
    <div class="span-title-main">
      <span class="span-title">A</span>
    </div>
    <br>
    <ul>
      <li>
        <div class="mui-col">
          <span class="span-name">goods_a1</span>
        </div>
        <div class="addspan">+</div>
        <div class="mui-col">
          <span class="span-name">gift_a1</span>
        </div>

      </li>
    </ul>
  </div>

  <!-- B -->
  <div class="mui-row">
    <div class="span-title-main">
      <span class="span-title">B</span>
    </div>
    <br>
    <ul>
      <li>
        <div class="mui-col">
          <span class="span-name">goods_b1</span>
        </div>
        <div class="addspan">+</div>
        <div class="mui-col">
          <span class="span-name">goods_b2</span>
        </div>
      </li>
    </ul>
  </div>

  <!-- C -->
  <div class="mui-row">
    <div class="span-title-main">
      <span class="span-title">C</span>
    </div>
    <br>
    <ul>
      <li>
        <div class="mui-col">
          <span class="span-name">goods_c1</span>
        </div>
        <div class="addspan">+</div>
        <div class="mui-col">
          <span class="span-name">goods_c2</span>
        </div>
        <div class="addspan">+</div>
        <div class="mui-col">
          <span class="span-name">goods_c3</span>
        </div>
        <div class="addspan">+</div>
        <div class="mui-col">
          <span class="span-name">gift_c1</span>
        </div>
      </li>
    </ul>
  </div>

</div>

CSS

.mui-row {
  text-align: center;
}

ul {
  position: relative;
  bottom: 20px;
  margin: 5px;
  padding: 10px;
  border: 1px dashed red;
}

ul>li {
  list-style-type: none
}

.span-title {
  background: #1874CD;
  color: #fff;
  padding: 2px;
}

.addspan {
  margin: 0 auto;
  width: 20px;
  height: 20px;
  line-height: 15px;
  border-radius: 50%;
  background: #FF6347;
  color: #fff;
}

span.span-name {
  color: #363636
}

.mui-col {
  margin-top: 5px;
}

JavaScript

var app = new Vue({
  el: "#app",
  data: {
    list: [{
      id: 1,
      name: 'A',
      goods: [{
        name: "goods_a1"
      }],
      gift: [{
        name: "gift_a1",
      }]
    }, {
      id: 2,
      name: 'B',
      goods: [{
        name: "goods_b1"
      }, {
        name: "goods_b2"
      }],
    }, {
      id: 3,
      name: 'C',
      goods: [{
        name: "goods_c1"
      }, {
        name: "goods_c2"
      }, {
        name: "goods_c3"
      }],
      gift: [{
        name: "gift_c1",
      }]
    }]
  }
})