JSFiddle - React, Tailwind, and code Playground

by jack zhao

HTML

<div class="attr" hook="user">hook="user"</div>
<div class="attr" hook="user-vip">hook="user-vip"</div>

<div class="attr" hook="user child">hook="user child"</div>
<div class="attr" hook="child">hook="user child"</div>

CSS

body {
  font-family: "微软雅黑", Serif;
  margin: 0 auto;
  max-width: 500px;
}
.attr {
  height: 30px;
  line-height: 30px;
  color: white;
  margin: 5px;
  text-align: center;
  background: gray;
}
.attr[hook|=user] {
  background: blue;
}
.attr[hook~=child] {
  background: yellow;
  color: black;
}