```
<div class="coupon-wrapper">
<div> <span class="real-tag ">标签一</span> <span class="real-tag real-tag-success ">标签二</span> <span class="real-tag real-tag-info ">标签三</span> <span class="real-tag real-tag-warning ">标签四</span> <span class="real-tag real-tag-danger ">标签五</span>
</div>
<div> <span class="real-tag ">标签一<i class="real-icon real-icon-close"></i></span> <span class="real-tag real-tag-success ">标签二<i class="real-icon real-icon-close"></i></span> <span class="real-tag real-tag-info ">标签三<i class="real-icon real-icon-close"></i></span>
<span class="real-tag real-tag-warning ">标签四<i class="real-icon real-icon-close"></i>
</span> <span class="real-tag real-tag-danger ">标签五<i class="real-icon real-icon-close"></i></span>
</div>
<div>
<div class="real-tag-group"><span class="real-tag-group-title">Dark</span> <span class="real-tag real-tag-dark">
标签一
</span><span class="real-tag real-tag-success real-tag-dark">
标签二
</span><span class="real-tag real-tag-info real-tag-dark">
标签三
</span><span class="real-tag real-tag-danger real-tag-dark">
标签四
</span><span class="real-tag real-tag-warning real-tag-dark">
标签五
</span>
</div>
<div class="real-tag-group"><span class="real-tag-group-title">Plain</span> <span class="real-tag real-tag-plain">
标签一
</span><span class="real-tag real-tag-success real-tag-plain">
标签二
</span><span class="real-tag real-tag-info real-tag-plain">
标签三
</span><span class="real-tag real-tag-danger real-tag-plain">
标签四
</span><span class="real-tag real-tag-warning real-tag-plain">
标签五
</span>
</div>
</div>
</div>
```
**Css**
```
/******* 标签********/
.real-tag {
background-color: #ecf5ff;
display: inline-block;
height: 32px;
padding: 0 10px;
line-height: 30px;
font-size: 12px;
color: #409eff;
border: 1px solid #d9ecff;
border-radius: 4px;
box-sizing: border-box;
white-space: nowrap;
}
.real-tag {
margin-left: 10px;
}
.real-tag .real-icon {
border-radius: 50%;
text-align: center;
position: relative;
cursor: pointer;
font-size: 12px;
height: 16px;
width: 16px;
line-height: 16px;
vertical-align: middle;
top: -1px;
right: -5px;
}
.real-tag-info {
background-color: #f4f4f5;
border-color: #e9e9eb;
color: #909399;
}
.real-tag-success {
background-color: #f0f9eb;
border-color: #e1f3d8;
color: #67c23a;
}
.real-tag-warning {
background-color: #fdf6ec;
border-color: #faecd8;
color: #e6a23c;
}
.real-tag-danger {
background-color: #fef0f0;
border-color: #fde2e2;
color: #f56c6c;
}
.real-tag-dark {
background-color: #409eff;
color: #fff;
}
.real-tag-dark.real-tag-success {
background-color: #67c23a;
border-color: #67c23a;
color: #fff;
}
.real-tag-dark.real-tag-info {
background-color: #909399;
border-color: #909399;
color: #fff;
}
.real-tag-dark.real-tag-danger {
background-color: #f56c6c;
border-color: #f56c6c;
color: #fff;
}
.real-tag-dark.real-tag-warning {
background-color: #e6a23c;
border-color: #e6a23c;
color: #fff;
}
.real-tag-plain {
background-color: #fff;
border-color: #b3d8ff;
color: #409eff;
}
.real-tag-plain.real-tag-success {
background-color: #fff;
border-color: #c2e7b0;
color: #67c23a;
}
.real-tag-plain.real-tag-info {
background-color: #fff;
border-color: #d3d4d6;
color: #909399;
}
.real-tag-plain.real-tag-danger {
background-color: #fff;
border-color: #fbc4c4;
color: #f56c6c;
}
.real-tag-plain.real-tag-warning {
background-color: #fff;
border-color: #f5dab1;
color: #e6a23c;
}
/*******标签********/
```
