Kort er allsidige UI-komponenter som kan vise ulike typer innhold, slik som bilder, tekst og interaktive elementer som knapper. Tailwind CSS tilbyr et utvalg av verktøy som gjør det enkelt å lage og style kortkomponenter.

Kortstruktur

En grunnleggende kortkomponent inkluderer vanligvis følgende elementer: et bilde, en tittel, beskrivende tekst og handlingsknapper.

Vi kjenner allerede til de enkelte elementene i denne komponenten, så la oss samle all kunnskapen vår i ett komplett kort.

Forklaring

1. max-w-sm: Angir maksimal bredde på elementet til liten størrelse (24rem eller 384px);
2. rounded: Legger til små avrundede hjørner på elementet;
3. overflow-hidden: Sikrer at alt innhold som går utenfor elementets grenser blir skjult;
4. shadow-lg: Legger til en stor skygge rundt elementet.

1. w-full: Angir at bildet skal ha 100% bredde av sin beholder;
2. px-6: Legger til horisontal polstring på 1.5rem (24px) på både venstre og høyre side;
3. py-4: Legger til vertikal polstring på 1rem (16px) på både topp og bunn;
4. font-bold: Bruker fet skriftvekt;
5. text-xl: Angir skriftstørrelse til xl (1.25rem eller 20px);
6. mb-2: Legger til bunnmarg på 0.5rem (8px);
7. text-gray-700: Angir tekstfargen til en middels grå;
8. text-base: Angir skriftstørrelse til base (1rem eller 16px).

1. px-6: Legger til horisontal polstring på 1.5rem (24px) på både venstre og høyre side;
2. pt-4: Legger til topp-polstring på 1rem (16px);
3. pb-2: Legger til bunn-polstring på 0.5rem (8px);
4. bg-blue-500: Angir bakgrunnsfargen til en blånyanse;
5. hover:bg-blue-700: Endrer bakgrunnsfargen til en mørkere blånyanse ved hover;
6. text-white: Angir tekstfargen til hvit;
7. font-bold: Bruker fet skriftvekt;
8. py-2: Legger til vertikal polstring på 0.5rem (8px);
9. px-4: Legger til horisontal polstring på 1rem (16px);
10. rounded: Bruker små avrundede hjørner på knappen;
11. bg-gray-500: Angir bakgrunnsfargen til en grånyanse;
12. hover:bg-gray-700: Endrer bakgrunnsfargen til en mørkere grånyanse ved hover;
13. text-white: Angir tekstfargen til hvit;
14. font-bold: Bruker fet skriftvekt;
15. py-2: Legger til vertikal polstring på 0.5rem (8px);
16. px-4: Legger til horisontal polstring på 1rem (16px);
17. rounded: Bruker små avrundede hjørner på knappen;
18. ml-2: Legger til venstre marg på 0.5rem (8px).

Som du ser, er alle hjelpeklasser allerede tatt i betraktning. Nå kombinerer vi alt i én kortkomponent.

Vi legger til én seksjon til i det forrige eksempelet, som vil være merker.

Forklaring - Merker

1. px-6: Legger til horisontal polstring på 1.5rem (24px) på både venstre og høyre side;
2. pt-4: Legger til toppolstring på 1rem (16px);
3. pb-2: Legger til bunnpolstring på 0.5rem (8px);
4. inline-block: Viser elementet som en inline-nivå blokkbeholder;
5. bg-gray-200: Setter bakgrunnsfargen til lys grå;
6. rounded-full: Gir elementet helt avrundede hjørner;
7. px-3: Legger til horisontal polstring på 0.75rem (12px) på både venstre og høyre side;
8. py-1: Legger til vertikal polstring på 0.25rem (4px) på både topp og bunn;
9. text-sm: Setter skriftstørrelsen til liten (0.875rem eller 14px);
10. font-semibold: Bruker halvfet skriftvekt;
11. text-gray-700: Setter tekstfargen til middels grå;
12. mr-2: Legger til høyremarg på 0.5rem (8px);
13. mb-2: Legger til bunnmarg på 0.5rem (8px).

Merk

All inngående informasjon om Card-komponenten finnes her.