Korttikomponenttien mallit
Rakentakaa kortteja, joissa on kuvan otsake, sisältöosa ja toimintojen alatunniste, käyttämällä flex- ja grid-asetteluja pyöristetyssä ja varjostetussa säiliössä.
Korttikomponenttien mallit on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Tailwind CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mikä tekee korttikomponentin
Kortti on itsenäinen suorakulmainen pinta, joka ryhmittelee toisiinsa liittyvää sisältöä. Kortissa on yleensä kolme aluetta: ylätunniste (usein kuva tai värillinen kaistale), runko (otsikko, kuvaus ja metatiedot) sekä valinnainen (toimintopainikkeet).
Tailwindissa kortin perusrakenne käyttää luokkia bg-white rounded-xl shadow-md overflow-hidden valkoisen pinnan, pyöristettyjen kulmien, syvyyttä luovan varjon ja sisäkuvien kulmien leikkaamisen toteuttamiseen.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
<!-- Card content goes here -->
</div>Kuvaotsakkeellinen kortti
Yleisin korttirakenne sisältää kuvaotsakkeen, joka ulottuu koko kortin leveydelle sisällön yläpuolella. Käytä <img>-tagissa luokkia w-full h-48 object-cover täyttämään leveys ja rajaamaan korkeus yhdenmukaisesti kuvan alkuperäisistä mitoista riippumatta.
Näin kaikki ruudukon kortit näyttävät yhdenmukaisilta, vaikka lähdekuvien kuvasuhteet vaihtelevat.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
<img
src="photo.jpg"
alt="Mountain landscape"
class="w-full h-48 object-cover"
/>
<div class="p-5">
<h3 class="text-lg font-semibold text-gray-900">Card Title</h3>
<p class="mt-1 text-sm text-gray-500">Short description of the card content.</p>
</div>
</div>Kortin leipätekstin typografinen hierarkia
Luo kortin runkoon selkeä typografinen hierarkia ohjaamaan lukijan katsetta. Lihavoitu otsikko luokilla text-lg font-bold text-gray-900 kiinnittää huomion, kun taas alaotsikossa käytetään luokkia text-sm text-gray-500 toissijaisille tiedoille.
Käytä elementtien välissä mt-2-luokkaa yhdenmukaisen pystysuuntaisen rytmin säilyttämiseksi ja typography-laajennuksen line-clamp-2-luokkaa pitkien kuvausten rajaamiseen täsmälleen kahdelle riville. Näin korttien korkeudet pysyvät ruudukossa yhdenmukaisina.
<div class="p-5">
<span class="text-xs font-semibold uppercase tracking-wide text-blue-600">Tutorial</span>
<h3 class="mt-1 text-xl font-bold text-gray-900">Getting Started with Tailwind</h3>
<p class="mt-2 text-sm text-gray-600 line-clamp-2">
Learn how to set up Tailwind CSS and build your first responsive layout using utility classes.
</p>
</div>Toimintopainikkeilla varustettu kortin alatunniste
Kortin alatunniste sisältää toimintopainikkeita tai metatietoja, kuten tekijän ja päivämäärän. Käyttäkää luokkaa border-t border-gray-100 erottelemaan alatunniste visuaalisesti sisällöstä ja luokkia flex items-center justify-between px-5 py-3 sisällön vaakasuuntaiseen asetteluun.
Tämä kolmialueinen rakenne (kuva, sisältö, alatunniste) muodostaa tuotekorttien, blogikirjoituskorttien ja hallintapaneelin pienoisosioiden perustan.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
<img src="photo.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900">Card Title</h3>
<p class="mt-2 text-sm text-gray-600">A brief description of this card's content.</p>
</div>
<div class="border-t border-gray-100 flex items-center justify-between px-5 py-3">
<span class="text-xs text-gray-400">June 2026</span>
<button class="text-sm font-semibold text-blue-600 hover:text-blue-700">Read More</button>
</div>
</div>Vaakasuuntainen korttiasettelu
Leveämmissä sisältöalueissa vaakasuuntainen kortti sijoittaa kuvan vasemmalle ja sisällön oikealle. Käyttäkää kortin säilössä luokkaa flex ja kuvan kääreessä luokkia w-40 flex-shrink-0, jotta kuvan leveys pysyy kiinteänä sisällön laajentuessa.
Tämä rakenne sopii erinomaisesti blogikirjoitusluetteloihin, hakutuloksiin ja ilmoitusvirtoihin.
<div class="flex bg-white rounded-xl shadow-md overflow-hidden">
<div class="flex-shrink-0">
<img src="photo.jpg" alt="" class="w-40 h-full object-cover" />
</div>
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900">Horizontal Card</h3>
<p class="mt-2 text-sm text-gray-600">Image on the left, content expanding on the right.</p>
<button class="mt-3 text-sm font-semibold text-blue-600 hover:underline">View Article</button>
</div>
</div>Kortin hover-tehosteet
Hover-tehosteen lisääminen korttiin viestii vuorovaikutteisuudesta ja parantaa käyttökokemusta. Yleinen tapa on nostaa korttia suuremman varjon avulla hover-tilassa käyttäen luokkaa hover:shadow-xl ja yhdistää siihen tasainen ylöspäin suuntautuva siirtymä luokalla hover:-translate-y-1.
Luokka transition-all duration-200 varmistaa, että sekä varjo että muunnos animoituvat tasaisesti. Lisätkää cursor-pointer korostamaan, että korttia voi napsauttaa.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm
cursor-pointer transition-all duration-200
hover:shadow-xl hover:-translate-y-1">
<img src="photo.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900">Hoverable Card</h3>
<p class="mt-2 text-sm text-gray-600">Hover over me to see the lift effect.</p>
</div>
</div>Korttiruudukon asettelu
Kortit näkyvät lähes aina ruudukoissa. Käyttäkää kääre-elementissä luokkia grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 responsiivisen ruudukon luomiseen: mobiililaitteissa yksi sarake, tableteissa kaksi ja työpöydällä kolme.
Apuohjelma gap-6 lisää korttien väliin tasaisen välistyksen ilman yksittäisten korttien marginaaleja, jotka rikkoisivat ruudukon kohdistuksen.
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<img src="a.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="font-bold text-gray-900">Card One</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<img src="b.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="font-bold text-gray-900">Card Two</h3>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<img src="c.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="font-bold text-gray-900">Card Three</h3>
</div>
</div>
</div>Profiili- ja avatar-kortit
Profiilikortissa avatar, nimi, rooli ja sosiaalisen median linkit keskitetään. Käyttäkää värillistä ylätunnistenauhaa luokilla h-24 bg-gradient-to-r from-blue-500 to-purple-600 ja sijoittakaa avatar nauhan päälle negatiivisen yläreunamarginaalin avulla: käyttäkää pyöreässä kuvassa luokkia -mt-12 mx-auto.
Tämä siirtymätekniikka luo kerroksellisen visuaalisen vaikutelman ilman absoluuttista asemointia.
<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-xs text-center">
<div class="h-24 bg-gradient-to-r from-blue-500 to-purple-600"></div>
<div class="px-5 pb-5">
<img
src="avatar.jpg"
alt="Profile"
class="w-20 h-20 rounded-full border-4 border-white -mt-10 mx-auto object-cover"
/>
<h3 class="mt-2 text-lg font-bold text-gray-900">Jane Doe</h3>
<p class="text-sm text-gray-500">Frontend Developer</p>
<button class="mt-4 px-6 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700">
Follow
</button>
</div>
</div>Tilasto- ja metriikkakortit
Tilastokortit näyttävät yhden keskeisen metriikan, johon kuuluvat kuvake, luku ja selite. Pitäkää kortit tiiviinä käyttämällä täytteenä p-5 ja sijoittakaa kuvake oikealle ja tilasto vasemmalle luokilla flex items-center justify-between.
Erotelkaa metriikat toisistaan yhdellä silmäyksellä värittämällä kuvakkeen tausta. Vihreä kuvake liikevaihdolle, sininen käyttäjille ja oranssi konversioille tekee hallintapaneelista heti helposti silmäiltävän.
<div class="bg-white rounded-xl shadow-md p-5 flex items-center justify-between">
<div>
<p class="text-sm text-gray-500 font-medium">Total Users</p>
<p class="mt-1 text-3xl font-bold text-gray-900">12,489</p>
<p class="mt-1 text-sm text-green-600 font-medium">+8.2% this month</p>
</div>
<div class="p-3 bg-blue-100 rounded-xl">
<svg class="w-7 h-7 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0"/>
</svg>
</div>
</div>Kortin tyylittely tummassa tilassa
Tummassa tilassa korttien taustat on käännettävä ja tekstivärejä säädettävä. Käyttäkää dark:bg-gray-800-luokkaa bg-white-luokan sijaan, otsikoille dark:text-white ja toissijaiselle tekstille dark:text-gray-400.
Myös reunuksiin perustuvat erottimet on säädettävä: dark:border-gray-700 korvaa luokan border-gray-100. Käyttäkää kaikkia tumman tilan muunnelmia vaaleiden vastineidensa rinnalla, jotta kortti näyttää hyvältä molemmissa teemoissa.
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden max-w-sm">
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900 dark:text-white">Dark-Mode Ready</h3>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
This card adapts automatically to the user's preferred color scheme.
</p>
</div>
<div class="border-t border-gray-100 dark:border-gray-700 px-5 py-3 flex justify-end">
<button class="text-sm font-semibold text-blue-500 hover:text-blue-400">Action</button>
</div>
</div>Napsautettava kortti linkkinä
Koko kortin kääriminen <a>-tunnisteeseen tekee koko pinnasta napsautettavan. Yhdistäkää block kortin tyyleihin, jotta ankkuri toimii lohkoelementtinä. Käyttäkää ankkurissa luokkaa group mahdollistaaksenne alielementtien hover-tehosteet — esimerkiksi otsikon group-hover:text-blue-600 muuttaa väriä, kun hiiri viedään minkä tahansa kortin kohdan päälle.
Tämä rakenne välttää sisäkkäiset vuorovaikutteiset elementit (painikkeet linkkien sisällä) ja pitää kortin saavutettavana yhtenä kohdistettavana kokonaisuutena.
<a href="/post/tailwind-tips" class="group block bg-white rounded-xl shadow-md overflow-hidden
hover:shadow-xl transition-shadow duration-200">
<img src="photo.jpg" alt="" class="w-full h-48 object-cover" />
<div class="p-5">
<h3 class="text-lg font-bold text-gray-900 group-hover:text-blue-600 transition-colors">
Tailwind Tips and Tricks
</h3>
<p class="mt-2 text-sm text-gray-500">Click anywhere on this card to navigate.</p>
</div>
</a>Pikatarkistus
Testatkaa, kuinka hyvin ymmärrätte tämän oppitunnin Tailwind CSS Mastery -käsitteet.
Oppitunnin yhteenveto
Tässä oppitunnissa opitte: kolmialueisen korttirakenteen (kuvaylätunniste, sisältö, alatunniste), joka rakennetaan pyöristetyillä kulmilla ja varjoapuohjelmilla; hover-tilan nostotehosteet, joissa yhdistyvät hover:shadow-xl hover:-translate-y-1 transition-all; sekä responsiiviset korttiruudukot, joissa käytetään luokkia grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6. Seuraavaksi tutustumme merkki- ja tunnistekomponentteihin.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Korttikomponenttien mallit” ilmainen?
Kyllä – oppitunnin ”Korttikomponenttien mallit” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Tailwind CSS Academy-kurssin, päivitä CoddyKit PROhon. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Korttikomponenttien mallit”?
Rakentakaa kortteja, joissa on kuvan otsake, sisältöosa ja toimintojen alatunniste, käyttämällä flex- ja grid-asetteluja pyöristetyssä ja varjostetussa säiliössä. Harjoittelet Tailwind CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Tailwind CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Tailwind CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Korttikomponenttien mallit”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Tailwind CSS Academy-oppitunnilla?
Kyllä. Jokainen Tailwind CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Painikkeiden muunnelmat ja tilat
- Korttikomponenttien mallit
- Badge- ja tag-komponentit
- Komponenttien yhdistäminen käyttöliittymässä