Interaction States
Stryg for at vise menuen
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.
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
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.
Tak for dine kommentarer!
