Status Tag

jitesh208
Jan 28, 2026 2
Live Preview

Live Editor

<div class="card">

  <!-- Header -->
  <div class="header">
    🏷️ Tags
  </div>

  <!-- Tags -->
  <div class="tags">
    <div class="tag pending">⚠ Pending</div>
    <div class="tag progress">⟳ In progress</div>
    <div class="tag submitted">✈ Submitted</div>
    <div class="tag review">☺ In review</div>
    <div class="tag success">✔ Success</div>
    <div class="tag failed">✖ Failed</div>
    <div class="tag expired">⏱ Expired</div>
  </div>

</div>
*{
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
}

body{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:#0b0b0b;
}

/* Card */
.card{
  width:400px;
  height:300px;
  background:#121212;
  border-radius:22px;
  padding:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  border:1px solid #1f1f1f;
  display:flex;
  flex-direction:column;
}

/* Header */
.header{
  display:flex;
  align-items:center;
  gap:10px;
  color:#d1d5db;
  font-size:18px;
  font-weight:500;
  padding-bottom:14px;
  border-bottom:1px solid #1f1f1f;
}

/* Tags container */
.tags{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* Base tag */
.tag{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  font-size:14px;
  font-weight:500;
  background:#1a1a1a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  white-space:nowrap;
}

/* Status colors */
.pending{
  color:#fbbf24;
  background:rgba(251,191,36,.12);
}

.progress{
  color:#60a5fa;
  background:rgba(96,165,250,.12);
}

.submitted{
  color:#a78bfa;
  background:rgba(167,139,250,.12);
}

.review{
  color:#facc15;
  background:rgba(250,204,21,.12);
}

.success{
  color:#22c55e;
  background:rgba(34,197,94,.12);
}

.failed{
  color:#ef4444;
  background:rgba(239,68,68,.12);
}

.expired{
  color:#9ca3af;
  background:rgba(156,163,175,.12);
}
Categories

Status Tag

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
