Design e Recursos

Tab Pills CSS Gerador

Gerar rounded tab pill CSS.

Mais de Design e Recursos

Entrada

Tab Pills CSS Gerador

tabssegmented controlcssui

Saída

Tab Pills CSS Generator

.tab-pills {
  display: inline-flex;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  background: #e0f2fe;
}

.tab-pills .tab {
  padding: 8px 16px;
  border-radius: 8px;
  color: #2563eb;
}

.tab-pills .tab.active {
  background: #2563eb;
  color: #e0f2fe;
}

Live preview

Live canvas

Ferramentas relacionadas

Pill Badge CSS Gerador

Gerar pill badge CSS style.

Accordion CSS Gerador

Gerar accordion panel CSS.

Avatar Stack CSS Gerador

Gerar overlapping avatar stack CSS.

Border Radius Gerador

Gerar border-radius CSS de corner values.

Floating Label Input CSS Gerador

Gerar floating label input CSS.

Focus Ring CSS Gerador

Gerar accessible focus-ring CSS.