Interaction States
Swipe um das Menü anzuzeigen
Tailwind provides utility classes to style elements based on user interaction.
Hover State
<button className="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">
Hover me
</button>
hover:bg-blue-700: changes background on hover.
Focus State
<input className="border p-2 focus:border-blue-500 outline-none" />
focus:border-blue-500: changes border when focused.
Disabled State
<button className="bg-gray-400 text-white px-4 py-2 rounded disabled:opacity-50" disabled>
Disabled
</button>
disabled:opacity-50: reduces opacity when disabled.
Use state prefixes like hover:, focus:, and disabled: to style interactive elements.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Interaction States
Tailwind provides utility classes to style elements based on user interaction.
Hover State
<button className="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">
Hover me
</button>
hover:bg-blue-700: changes background on hover.
Focus State
<input className="border p-2 focus:border-blue-500 outline-none" />
focus:border-blue-500: changes border when focused.
Disabled State
<button className="bg-gray-400 text-white px-4 py-2 rounded disabled:opacity-50" disabled>
Disabled
</button>
disabled:opacity-50: reduces opacity when disabled.
Use state prefixes like hover:, focus:, and disabled: to style interactive elements.
Danke für Ihr Feedback!
