JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <div id="app">
    <div class="mui-row" v-for="item in list">
      <div class="span-title-main">
        <span class="span-title">{{item.name}}</span>
      </div>
      <br>
      <ul>

        <li>
          <div class="mui-col" v-for="(items,index) in item.goods">
            <span class="span-name">{{items.name}}</span>
            <div class="addspan" v-if='item.gift || index !== item.goods.length-1'>+</div>
          </div>

          <div class="mui-col" v-for="itemss in item.gift">
            <span class="span-name">{{itemss.name}}</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",
      }]
    }]
  }
})