怎么用css和html实现这个效果啊

这个效果我现在用text有出来，但没办法调样式，还有其他办法可以实现嘛？

img

img

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .tag {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 12px;
    }
    .tag.warning-tag {
      background-color: #ffe4de;
      color: #ff9983;
    }
    .tag.info-tag {
      background-color: #ddebfb;
      color: #4692e7;
    }
  </style>
</head>
<body>
  <div class="tag warning-tag">当前值：10000</div>
  <div class="tag info-tag">设定值：10000</div>
</body>
</html>

css 就能实现 。一个div 设置圆角 里面的文字 垂直居中 。不能调样式 ？ 那得根据具体 情况看了

  <div class="tag value">当前值：10000</div>
  <div class="tag target">设定值：10000</div>

    .tag {
      width: 'max-content';
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
    }
    .tag .value {
      background-color: #ffe4de;
      color: #ff9983;
    }
    .tag .target {
      background-color: #ddebfb;
      color: #4692e7;
    }