Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Utmaning: Skapa Formulär | Bygga Grundläggande Komponenter
Tailwind CSS för webbutveckling

bookUtmaning: Skapa Formulär

Uppgift

Använd Tailwind CSS för att färdigställa utseendet på ett formulär med inmatningsfält, textområden, radioknappar och en switch.

Fyll i de tomma fälten med lämpliga Tailwind CSS-klasser för att uppnå önskad stil.

  • Inmatningsfält och textområden:
    • Ljusgrå ram (border-gray-300);
    • Medelrunda hörn (rounded-md);
    • Fokusläge med blå ring (focus:ring-2 och focus:ring-blue-500).
  • Skicka-knapp:
    • Primär blå bakgrund (bg-blue-500);
    • Mörkare blå vid hovring (hover:bg-blue-700);
    • Rundade hörn (rounded);
    • Fokusläge med ring (focus:outline-none, focus:ring-2 och focus:ring-blue-500).
index.html

index.html

copy
  1. Kantfärg: Använd border-gray-300 för en ljusgrå kant;
  2. Rundade hörn: Använd rounded-md för medelrunda hörn;
  3. Fokusring: Använd focus:ring-2 för att lägga till en ring vid fokus och focus:ring-blue-500 för blå färg.
  4. Skicka-knapp vid hovring: Använd hover:bg-blue-700 för en mörkare blå färg vid hovring;
  5. Skicka-knappens ring: Använd focus:outline-none för att ta bort standardfokus, focus:ring-2 för att lägga till en ring vid fokus och focus:ring-blue-500 för att ange ringens färg.
index.html

index.html

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 6

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

What are the exact Tailwind classes I should use for each form element?

Can you show an example of a fully styled form using these Tailwind classes?

How do I apply these styles to radio buttons and switches with Tailwind?

Awesome!

Completion rate improved to 3.57

bookUtmaning: Skapa Formulär

Svep för att visa menyn

Uppgift

Använd Tailwind CSS för att färdigställa utseendet på ett formulär med inmatningsfält, textområden, radioknappar och en switch.

Fyll i de tomma fälten med lämpliga Tailwind CSS-klasser för att uppnå önskad stil.

  • Inmatningsfält och textområden:
    • Ljusgrå ram (border-gray-300);
    • Medelrunda hörn (rounded-md);
    • Fokusläge med blå ring (focus:ring-2 och focus:ring-blue-500).
  • Skicka-knapp:
    • Primär blå bakgrund (bg-blue-500);
    • Mörkare blå vid hovring (hover:bg-blue-700);
    • Rundade hörn (rounded);
    • Fokusläge med ring (focus:outline-none, focus:ring-2 och focus:ring-blue-500).
index.html

index.html

copy
  1. Kantfärg: Använd border-gray-300 för en ljusgrå kant;
  2. Rundade hörn: Använd rounded-md för medelrunda hörn;
  3. Fokusring: Använd focus:ring-2 för att lägga till en ring vid fokus och focus:ring-blue-500 för blå färg.
  4. Skicka-knapp vid hovring: Använd hover:bg-blue-700 för en mörkare blå färg vid hovring;
  5. Skicka-knappens ring: Använd focus:outline-none för att ta bort standardfokus, focus:ring-2 för att lägga till en ring vid fokus och focus:ring-blue-500 för att ange ringens färg.
index.html

index.html

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 6
some-alt