xxxxxxxxxx1
<div class = "container mt-5">2
<h2 class = "center">Some tags cloud</h2>3
<p class ="center">Click on X sign to close the tag</p>4
<hr>5
<div class="row">6
<div class="col-6">7
<div class="card">8
<div class="card-body">9
<h4 class="card-title">Tags with shadows</h4>10
<div class="chip chip-md success-color white-text example z-depth-2 mr-0"><i class="fas fa-tags "></i>11
Web Design12
<i class="close white-text fas fa-times"></i>13
</div>14
<div class="chip chip-md default-color white-text example z-depth-2 mr-0"><i class="fab fa-css3-alt fa-lg"></i>15
Css Tutorial16
<i class="close white-text fas fa-times"></i>17
</div>18
19
<div class="chip chip-md secondary-color white-text example z-depth-2 mr-0"><i class="fab fa-bootstrap fa-lg"></i>20
MDBootstrap21
<i class="close white-text fas fa-times"></i>22
</div>23
24
<div class="chip chip-md red lighten-1 white-text example z-depth-2 mr-0"><i class="fab fa-angular fa-lg"></i>25
Angular26
<i class="close white-text fas fa-times"></i>27
</div>28
<div class="chip chip-md blue lighten-1 white-text example z-depth-2 mr-0" ><i class="fab fa-react fa-lg"></i>29
React30
<i class="close white-text fas fa-times"></i>31
</div>32
<div class="chip chip-md indigo darken-1 white-text example z-depth-2 mr-0"><i class="fab fa-facebook fa-lg"></i>33
Facebook34
<i class="close white-text fas fa-times"></i>35
</div>36
<div class="chip chip-md purple-gradient white-text example z-depth-2 mr-0"><i class="fas fa-headset fa-lg"></i>37
mdb-team38
<i class="close white-text fas fa-times"></i>39
</div>40
<div class="chip chip-md success-color white-text example z-depth-2 mr-0"><i class="fas fa-tags "></i>41
Web Design42
<i class="close white-text fas fa-times"></i>43
</div>44
<div class="chip chip-md default-color white-text example z-depth-2 mr-0"><i class="fab fa-css3-alt fa-lg"></i>45
Css Tutorial46
<i class="close white-text fas fa-times"></i>47
</div>48
49
<div class="chip chip-md secondary-color white-text example z-depth-2 mr-0"><i class="fab fa-bootstrap fa-lg"></i>50
MDBootstrap51
<i class="close white-text fas fa-times"></i>52
</div>53
54
<div class="chip chip-md red lighten-1 white-text example z-depth-2 mr-0"><i class="fab fa-angular fa-lg"></i>55
Angular56
<i class="close white-text fas fa-times"></i>57
</div>58
<div class="chip chip-md blue lighten-1 white-text example z-depth-2 mr-0" ><i class="fab fa-react fa-lg"></i>59
React60
<i class="close white-text fas fa-times"></i>61
</div>62
<div class="chip chip-md indigo darken-1 white-text example z-depth-2 mr-0"><i class="fab fa-facebook fa-lg"></i>63
Facebook64
<i class="close white-text fas fa-times"></i>65
</div>66
<div class="chip chip-md purple-gradient white-text example z-depth-2 mr-0"><i class="fas fa-headset fa-lg"></i>67
mdb-team68
<i class="close white-text fas fa-times"></i>69
</div>70
<div class="chip chip-md success-color white-text example z-depth-2 mr-0"><i class="fas fa-tags "></i>71
Web Design72
<i class="close white-text fas fa-times"></i>73
</div>74
<div class="chip chip-md default-color white-text example z-depth-2 mr-0"><i class="fab fa-css3-alt fa-lg"></i>75
Css Tutorial76
<i class="close white-text fas fa-times"></i>77
</div>78
79
<div class="chip chip-md secondary-color white-text example z-depth-2 mr-0"><i class="fab fa-bootstrap fa-lg"></i>80
MDBootstrap81
<i class="close white-text fas fa-times"></i>82
</div>83
84
<div class="chip chip-md red lighten-1 white-text example z-depth-2 mr-0"><i class="fab fa-angular fa-lg"></i>85
Angular86
<i class="close white-text fas fa-times"></i>87
</div>88
<div class="chip chip-md blue lighten-1 white-text example z-depth-2 mr-0" ><i class="fab fa-react fa-lg"></i>89
React90
<i class="close white-text fas fa-times"></i>91
</div>92
<div class="chip chip-md indigo darken-1 white-text example z-depth-2 mr-0"><i class="fab fa-facebook fa-lg"></i>93
Facebook94
<i class="close white-text fas fa-times"></i>95
</div>96
<div class="chip chip-md purple-gradient white-text example z-depth-2 mr-0"><i class="fas fa-headset fa-lg"></i>97
mdb-team98
<i class="close white-text fas fa-times"></i>99
</div>100
</div>101
</div>102
</div>103
<div class="col-6">104
<div class="card">105
<div class="card-body">106
<h4 class="card-title">Tags without shadows</h4>107
<div class="chip chip-md elegant-color white-text mr-0"><i class="fab fa-html5 fa-lg"></i>108
HTML109
<i class="close white-text fas fa-times"></i>110
</div><div class="chip chip-md orange lighten-2 white-text mr-0"><i class="fab fa-amazon-pay fa-lg"></i>111
Amazon pay112
<i class="close white-text fas fa-times"></i>113
</div>114
<div class="chip chip-md brown lighten-1 white-text mr-0"><i class="fas fa-code fa-lg"></i>115
Code116
<i class="close white-text fas fa-times"></i>117
</div>118
<div class="chip chip-md deep-orange lighten-1 white-text mr-0"><i class="fas fa-car-alt fa-lg"></i>119
Cars120
<i class="close white-text fas fa-times"></i>121
</div>122
<div class="chip chip-md aqua-gradient white-text mr-0"><i class="fab fa-windows fa-lg"></i>123
Windows124
<i class="close white-text fas fa-times"></i>125
</div>126
<div class="chip chip-md mdb-color lighten-1 white-text mr-0"><i class="fab fa-apple fa-lg"></i>127
Apple128
<i class="close white-text fas fa-times"></i>129
</div>130
<div class="chip chip-md peach-gradient white-text mr-0"><i class="far fa-images fa-lg"></i>131
Images132
<i class="close white-text fas fa-times"></i>133
</div>134
<div class="chip chip-md elegant-color white-text mr-0"><i class="fab fa-html5 fa-lg"></i>135
HTML136
<i class="close white-text fas fa-times"></i>137
</div><div class="chip chip-md orange lighten-2 white-text mr-0"><i class="fab fa-amazon-pay fa-lg"></i>138
Amazon pay139
<i class="close white-text fas fa-times"></i>140
</div>141
<div class="chip chip-md brown lighten-1 white-text mr-0"><i class="fas fa-code fa-lg"></i>142
Code143
<i class="close white-text fas fa-times"></i>144
</div>145
<div class="chip chip-md deep-orange lighten-1 white-text mr-0"><i class="fas fa-car-alt fa-lg"></i>146
Cars147
<i class="close white-text fas fa-times"></i>148
</div>149
<div class="chip chip-md aqua-gradient white-text mr-0"><i class="fab fa-windows fa-lg"></i>150
Windows151
<i class="close white-text fas fa-times"></i>152
</div>153
<div class="chip chip-md mdb-color lighten-1 white-text mr-0"><i class="fab fa-apple fa-lg"></i>154
Apple155
<i class="close white-text fas fa-times"></i>156
</div>157
<div class="chip chip-md peach-gradient white-text mr-0"><i class="far fa-images fa-lg"></i>158
Images159
<i class="close white-text fas fa-times"></i>160
</div>161
<div class="chip chip-md elegant-color white-text mr-0"><i class="fab fa-html5 fa-lg"></i>162
HTML163
<i class="close white-text fas fa-times"></i>164
</div><div class="chip chip-md orange lighten-2 white-text mr-0"><i class="fab fa-amazon-pay fa-lg"></i>165
Amazon pay166
<i class="close white-text fas fa-times"></i>167
</div>168
<div class="chip chip-md brown lighten-1 white-text mr-0"><i class="fas fa-code fa-lg"></i>169
Code170
<i class="close white-text fas fa-times"></i>171
</div>172
<div class="chip chip-md deep-orange lighten-1 white-text mr-0"><i class="fas fa-car-alt fa-lg"></i>173
Cars174
<i class="close white-text fas fa-times"></i>175
</div>176
<div class="chip chip-md aqua-gradient white-text mr-0"><i class="fab fa-windows fa-lg"></i>177
Windows178
<i class="close white-text fas fa-times"></i>179
</div>180
<div class="chip chip-md mdb-color lighten-1 white-text mr-0"><i class="fab fa-apple fa-lg"></i>181
Apple182
<i class="close white-text fas fa-times"></i>183
</div>184
<div class="chip chip-md peach-gradient white-text mr-0"><i class="far fa-images fa-lg"></i>185
Images186
<i class="close white-text fas fa-times"></i>187
</div>188
</div>189
</div>190
</div>191
</div>192
193
</div>xxxxxxxxxx1
.chip.chip-md {2
height: 42px;3
line-height: 42px;4
border-radius: 21px;5
}6
7
.chip.chip-md .close {8
height: 42px;9
line-height: 42px;10
border-radius: 21px;11
}12
.center {13
text-align:center;14
}1
1
Console errors: 0