```
<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;
}
/*******標簽********/
```
