Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

/* ── src/styles/components.css ─────────────────────── */

/* Button component extracted with @apply */
.btn {
    @apply inline-flex items-center justify-center gap-2
           px-4 py-2 rounded-lg font-medium text-sm
           transition-colors duration-200
           focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply btn bg-blue-600 text-white
           hover:bg-blue-700
           focus:ring-blue-500;
}

.btn-secondary {
    @apply btn bg-white text-gray-700
           border border-gray-300
           hover:bg-gray-50
           focus:ring-gray-400;
}

.btn-danger {
    @apply btn bg-red-600 text-white
           hover:bg-red-700
           focus:ring-red-500;
}

/* Form input component */
.form-input {
    @apply w-full px-3 py-2
           border border-gray-300 rounded-lg
           text-gray-900 placeholder-gray-400
           bg-white
           focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200
           disabled:opacity-50 disabled:cursor-not-allowed;
}

/* Badge variants */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5
           rounded-full text-xs font-semibold;
}

.badge-blue   { @apply badge bg-blue-100   text-blue-800; }
.badge-green  { @apply badge bg-green-100  text-green-800; }
.badge-red    { @apply badge bg-red-100    text-red-800; }
.badge-yellow { @apply badge bg-yellow-100 text-yellow-800; }