Combinazione dei componenti in un’interfaccia
Assembli pulsanti, card e badge in un elenco di prodotti o in un widget di dashboard per esercitarsi nella composizione dei componenti.
Combinazione dei componenti in un’interfaccia è una lezione Tailwind CSS Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Tailwind CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Perché è importante la composizione dei componenti
La composizione dei componenti consiste nell'assemblare piccoli elementi UI specializzati — pulsanti, card, badge — in interfacce più grandi e funzionali. Una singola card ben realizzata è utile, ma una pagina di elenco prodotti che combina card, pulsanti, badge e un layout a griglia è ciò che gli utenti vedono e con cui interagiscono realmente.
Tailwind rende naturale la composizione perché tutti i componenti condividono lo stesso vocabolario di utility. Non c'è alcun incapsulamento degli stili che possa creare problemi: le classi dei diversi componenti non entrano mai in conflitto.
Card prodotto con tutti e tre i componenti
Una card per l'elenco dei prodotti è l'esempio ideale per combinare pulsanti, card e badge. La card fornisce la superficie e il layout; un badge nell'angolo superiore contrassegna l'elemento come Sale o New; e un pulsante primario nel footer avvia l'azione di acquisto.
Questa composizione di tre componenti è uno degli schemi più comuni nelle interfacce utente per prodotti e-commerce e SaaS.
<div class="relative bg-white rounded-xl shadow-md overflow-hidden max-w-xs">
<!-- Sale badge -->
<span class="absolute top-3 left-3 z-10 px-2 py-0.5 rounded-full text-xs font-bold bg-red-500 text-white">SALE</span>
<!-- Product image -->
<img src="product.jpg" alt="Product" class="w-full h-48 object-cover" />
<!-- Card body -->
<div class="p-5">
<h3 class="text-base font-bold text-gray-900">Wireless Headphones</h3>
<div class="mt-1 flex items-center gap-2">
<span class="text-lg font-bold text-gray-900">$49.99</span>
<span class="text-sm line-through text-gray-400">$79.99</span>
</div>
</div>
<!-- Card footer with button -->
<div class="px-5 pb-5">
<button class="w-full py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors">
Add to Cart
</button>
</div>
</div>Layout a griglia dell'elenco prodotti
Racchiuda più card prodotto in una griglia responsiva per creare una pagina di elenco completa. Utilizzi grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6, così il layout passa da una sola colonna sugli smartphone a quattro colonne sugli schermi grandi.
Aggiunga sopra la griglia un titolo di pagina e una barra dei filtri, usando flex items-center justify-between mb-6 per creare un'intestazione dell'elenco dall'aspetto professionale.
<div class="max-w-7xl mx-auto px-4 py-8">
<!-- Page header -->
<div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-900">Featured Products</h1>
<span class="text-sm text-gray-500">24 items</span>
</div>
<!-- Product grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Cards go here -->
</div>
</div>Widget della dashboard che combina componenti
Un widget della dashboard è un altro ottimo esempio di composizione. Crei una superficie a card che contenga un valore statistico, un badge colorato di tendenza e un pulsante di azione composto solo da testo nel footer.
Il badge comunica se la metrica è in aumento o in diminuzione, il numero ne indica il valore e il pulsante conduce a una vista dettagliata: tre componenti distinti che collaborano come un unico widget coerente.
<div class="bg-white rounded-xl shadow-md p-5">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-gray-500">Monthly Revenue</p>
<span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800">
+12.5%
</span>
</div>
<p class="mt-3 text-3xl font-bold text-gray-900">$24,890</p>
<div class="mt-4 border-t border-gray-100 pt-4">
<button class="text-sm font-semibold text-blue-600 hover:text-blue-700">View full report →</button>
</div>
</div>Riga di tabella utenti con badge e pulsanti
In una tabella di dati, ogni riga combina spesso un avatar utente, un nome, un badge di stato e pulsanti per le azioni, tutti disposti in un'unica riga orizzontale. Utilizzi flex items-center gap-3 per il lato sinistro e flex gap-2 per i pulsanti delle azioni a destra.
Questo schema è comune nei pannelli di amministrazione, nelle dashboard CRM e in qualsiasi interfaccia di gestione in cui sia necessario esaminare rapidamente più record.
<div class="flex items-center justify-between px-4 py-3 bg-white border-b border-gray-100">
<!-- User info -->
<div class="flex items-center gap-3">
<img src="avatar.jpg" alt="" class="w-8 h-8 rounded-full object-cover" />
<div>
<p class="text-sm font-semibold text-gray-900">Sarah Mitchell</p>
<p class="text-xs text-gray-400">sarah@example.com</p>
</div>
</div>
<!-- Status badge -->
<span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
<!-- Actions -->
<div class="flex gap-2">
<button class="px-3 py-1 text-xs font-medium text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50">
Edit
</button>
<button class="px-3 py-1 text-xs font-medium text-white bg-red-600 rounded-md hover:bg-red-700">
Remove
</button>
</div>
</div>Composizione di un feed di notifiche
Un feed di notifiche combina immagini degli avatar, badge con l'indicazione dell'orario e pulsanti per ignorare le notifiche in un elenco scorrevole. Racchiuda ogni notifica in un contenitore flex gap-3 p-4, aggiunga a sinistra uno sfondo circolare per l'icona con rounded-full e chiuda la riga con un pulsante per ignorare la notifica all'estrema destra.
Utilizzi divide-y divide-gray-100 sul contenitore dell'elenco per aggiungere automaticamente le linee di separazione tra gli elementi, senza dover aggiungere classi per i bordi a ciascun elemento.
<div class="bg-white rounded-xl shadow-md divide-y divide-gray-100">
<div class="flex gap-3 p-4">
<div class="flex-shrink-0 w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center">
<svg class="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
</svg>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-700"><strong>John</strong> viewed your profile.</p>
<p class="text-xs text-gray-400 mt-0.5">2 minutes ago</p>
</div>
<button class="flex-shrink-0 text-gray-400 hover:text-gray-600">×</button>
</div>
</div>Scheda dei prezzi con elenco delle funzionalità
Una scheda dei prezzi combina la struttura della scheda, un badge in evidenza (per il piano consigliato), la visualizzazione del prezzo, un elenco delle funzionalità e un pulsante CTA, diventando così una delle composizioni di componenti più ricche nel design delle UI.
Utilizzi ring-2 ring-blue-600 sulla scheda del piano consigliato per metterla in evidenza senza aggiungere margini o spaziature interne che comprometterebbero l'allineamento della griglia.
<div class="bg-white rounded-xl shadow-md ring-2 ring-blue-600 p-6">
<div class="flex justify-between items-start">
<h3 class="text-lg font-bold text-gray-900">Pro Plan</h3>
<span class="px-2.5 py-0.5 rounded-full text-xs font-bold bg-blue-600 text-white">Popular</span>
</div>
<p class="mt-4 text-4xl font-bold text-gray-900">$29<span class="text-base font-normal text-gray-500">/mo</span></p>
<ul class="mt-6 space-y-3">
<li class="flex items-center gap-2 text-sm text-gray-600">
<svg class="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Unlimited projects
</li>
<li class="flex items-center gap-2 text-sm text-gray-600">
<svg class="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Priority support
</li>
</ul>
<button class="mt-6 w-full py-2.5 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors">
Get Started
</button>
</div>Stato vuoto con pulsante
Uno stato vuoto viene mostrato quando un elenco o una griglia non contiene elementi. Combina un'illustrazione o un'icona, un'intestazione, una descrizione e un pulsante di invito all'azione, tutti centrati nello spazio disponibile.
Utilizzi text-center py-16 sul contenitore, un'icona grande racchiusa in un cerchio colorato e un pulsante principale per guidare gli utenti verso l'azione successiva. È una composizione semplice ma importante, che migliora sensibilmente la UX.
<div class="text-center py-16">
<div class="mx-auto w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center">
<svg class="w-8 h-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
</svg>
</div>
<h3 class="mt-4 text-base font-semibold text-gray-900">No products yet</h3>
<p class="mt-1 text-sm text-gray-500">Get started by adding your first product.</p>
<button class="mt-6 px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">
Add Product
</button>
</div>Banner di avviso con icona e pulsante
Un banner di avviso combina uno sfondo colorato, un'icona di stato, un messaggio e un pulsante opzionale per ignorare l'avviso. Utilizzi flex items-start gap-3 p-4 rounded-lg per la disposizione e utility per lo sfondo come bg-yellow-50 border border-yellow-200 per la variante di avviso.
Il pulsante per ignorare l'avviso a destra utilizza ml-auto flex-shrink-0 per spingersi fino all'estremità della riga flex, indipendentemente dalla lunghezza del messaggio.
<div class="flex items-start gap-3 p-4 rounded-lg bg-yellow-50 border border-yellow-200">
<svg class="flex-shrink-0 w-5 h-5 text-yellow-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
</svg>
<p class="flex-1 text-sm text-yellow-800">
Your free trial ends in <strong>3 days</strong>. Upgrade to keep access.
</p>
<button class="ml-auto flex-shrink-0 px-3 py-1 text-xs font-semibold text-yellow-800 border border-yellow-400 rounded-md hover:bg-yellow-100">
Upgrade
</button>
</div>Best practice per spaziatura e allineamento
Quando assembla interfacce composte, una spaziatura coerente è ciò che distingue un design curato da uno disordinato. Segua queste regole: utilizzi gap-* all'interno dei contenitori flex e grid invece dei singoli margini; utilizzi space-y-* per le disposizioni verticali; riservi p-* alla spaziatura interna delle superfici dei componenti.
Mantenga i valori di spaziatura sulla scala Tailwind (multipli di 4px). Eviti di mescolare valori arbitrari e valori della scala: scelga un approccio per componente e lo mantenga.
<!-- Use gap inside flex/grid containers -->
<div class="flex gap-4">
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg">Save</button>
<button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg">Cancel</button>
</div>
<!-- Use space-y for stacked components -->
<div class="space-y-4">
<div class="bg-white rounded-xl shadow-md p-5">Widget 1</div>
<div class="bg-white rounded-xl shadow-md p-5">Widget 2</div>
<div class="bg-white rounded-xl shadow-md p-5">Widget 3</div>
</div>Verifica rapida
Verifichi la Sua comprensione dei concetti di Tailwind CSS Mastery trattati in questa lezione.
Riepilogo della lezione
In questa lezione ha imparato che: le schede prodotto combinano la struttura della scheda con badge di stato e pulsanti CTA in un unico componente coerente; i widget delle dashboard e le righe delle tabelle di dati dispongono orizzontalmente più componenti all'interno di contenitori flex; e le best practice per la spaziatura utilizzano gap-* all'interno di flex/grid e space-y-* per le disposizioni verticali, così da mantenere coerenti le composizioni. Prossimamente costruiremo una navbar responsive.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Combinazione dei componenti in un’interfaccia» è gratuita?
Sì — il testo completo di «Combinazione dei componenti in un’interfaccia» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Tailwind CSS Academy, passa a CoddyKit PRO. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Combinazione dei componenti in un’interfaccia»?
Assembli pulsanti, card e badge in un elenco di prodotti o in un widget di dashboard per esercitarsi nella composizione dei componenti. Eserciti Tailwind CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Tailwind CSS Academy?
Non è richiesta alcuna esperienza precedente. Tailwind CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Combinazione dei componenti in un’interfaccia»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Tailwind CSS Academy?
Sì. Ogni lezione Tailwind CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Varianti e stati dei pulsanti
- Pattern per i componenti card
- Componenti badge e tag
- Combinazione dei componenti in un’interfaccia