1. Vents arrièreComponents

Tailwind Components est un assortiment open-source de modèles et d’éléments d’interface utilisateur Tailwind gratuits et premium qui peuvent être utilisés pour démarrer de nouvelles applications, initiatives et pages d’atterrissage.

Le paquet contient des listes déroulantes, des connexions, des modaux, des onglets, des entrées et des alternatives prêtes à l’emploi conçues à l’aide de Tailwind CSS, en plus d’une feuille de triche vraiment utile.

Vous pouvez également aider le rassemblement en important vos éléments pour que différentes personnes puissent les utiliser.

Pour utiliser n’importe quel élément ou modèle, cliquez simplement dessus et vous serez également envoyé sur sa page Web.

Vous pouvez le prévisualiser pour ceux qui le souhaitent, puis l’obtenir, le forker sur GitHub ou copier le code immédiatement.

2. TailBlocks

Tailblocks est un ensemble de blocs de format minimaliste 60+ qui incarnent des témoignages, des groupes, des étapes, des statistiques, des prix, des héros, des en-têtes, des galeries, des pieds de page, des fonctions et du commerce électronique.

Les éléments Tailblocks sont très superbes car ils assistent le mode sombre et vous permettront de changer les premières couleurs de l’interface.

Mert Curuken a créé et maintient le dépôt GitHub du défi, qui compte plus de 5,1 000 étoiles et a été cloné plus de 400 fois, ce qui le rend extrêmement apprécié.

Pour utiliser un bloc de format, sélectionnez-le, choisissez une couleur dans la palette de couleurs, mode foncé ou doux, cliquez sur le bouton Afficher le code, après quoi copiez-le et collez-le dans votre défi.

3. Interface utilisateur Meraki

Meraki UI est un assortiment croissant de plus de 50 magnifiques éléments CSS Tailwind qui aident les langages RTL.

Si la langue de navigateur par défaut d’un consommateur est sur le point de RTL, Meraki UI inversera chaque partie, ainsi que le contenu textuel, le défilement, les barres de progression, les boutons, etc.

Khatab Wedaa et Mosab Ibrahim ont créé cet assortiment d’éléments Tailwind, qui propose des alertes, des types de connexion, des boutons, des cartes à jouer, des listes déroulantes, une barre de navigation, une pagination et des pieds de page.

Pour utiliser n’importe quel élément, copiez-le simplement et vous pouvez également y aller.

4. TailwindToolbox

Tailwind Toolbox est une liste de plugins, instruments, turbines, kits et tutoriels qui peuvent vous aider à utiliser davantage Tailwind CSS.

Tailwind Toolbox, créé et maintenu par Amrit Nagi, propose 45 modèles de pages Web et 16 éléments, entre différents problèmes.

En cliquant sur le bouton « Recommander une ressource utile », il y a de fortes chances que vous ajoutiez à la rassemblement.

Tailwind a créé certains scripts de modèle pour les interactions JavaScript anticipées, comparables à l’ouverture et à la fermeture des modes, ainsi que le balisage HTML.

Pour utiliser des scripts, les deux obtiennent des modèles CSS ou copient le code des éléments Tailwind en cliquant sur le modèle ou l’élément.

5. TailwindTemplates

Tailwind Templates est une bibliothèque en constante expansion d’éléments d’interface utilisateur gratuits stylisés utilisant Tailwind CSS.

Il a été créé par J-hiz et comprend plus de 30 conceptions d’éléments distinctifs, comparables aux alertes, boutons, cartes à jouer, genres, entrées de recherche et modes.

Dans l’intervalle, il n’a que des éléments, mais les modèles CSS seront lancés sous peu.

Pour utiliser n’importe quel élément, choisissez d’abord la classification père ou mère, puis copiez le code du modèle de votre alternative.

6. Interface utilisateur Lofi

Lofi UI est un grand assortiment d’éléments CSS Tailwind avec une qualité minimale élevée.

La basse fidélité implique simplement que les éléments sont conçus pour être réutilisables et ont peu de types, ce qui vous permet d’ajouter votre design individuel et de personnaliser vos designs à votre style.

Dans différentes phrases, les éléments sont conçus pour être aussi respectueux de l’environnement avec HTML que potentiel tout en s’appuyant sur CSS pour les rendre efficaces.

Prenez ces éléments Tailwind comme un point de départ à partir duquel vous construirez et personnaliserez comme vous le souhaitez.

Rob Stinson a créé et maintient Lofi UI, qui fournit désormais plus de 40 éléments et mises en page d’interface utilisateur attrayants. Cliquez sur n’importe quelle carte d’élément pour l’utiliser.

Vous serez ensuite envoyé à CodePen, l’endroit où il y a de fortes chances que vous copiez et modifiiez le code ultime.

7. Kit d’interface utilisateur Kometa

Kometa UI Kit est un package CSS Tailwind qui contient plus de 130 éléments et blocs de format dans de nombreuses classes telles que la marine, les en-têtes, les options, la valeur, la FAQ, le contenu, les groupes, le blog, les statistiques et les pieds de page.

Tous les blocs de format sont entièrement réactifs, comme indiqué sur la page d’accueil, et peuvent être trouvés sous forme d’extraits HTML primaires ou d’éléments React/Vue.

Kometa maintient également un blog où il partage des concepts et des stratégies pour créer des expériences client supplémentaires attrayantes et excellentes avec Tailwind CSS.

Le groupe Kitwind a créé Kometa UI.

Pour utiliser n’importe quel élément du package d’interface utilisateur Kometa, accédez à la classe père ou mère, choisissez une variante et répliquez le code en code HTML, Vue ou React.

8. Vent arrière matériel

Material Tailwind est une bibliothèque d’éléments facile pour Tailwind CSS qui utilise la conception de matériaux de Google.

Il contient de nombreux éléments React et HTML qui peuvent tous être construits à l’aide de leçons CSS Tailwind et correspondre aux conseils de conception de matériaux.

Matériaux Tailwind signifie que vous pouvez simplement personnaliser vos éléments CSS Tailwind en modifiant les couleurs, les polices, la mode et le reste à votre style.

Matériaux Tailwind est polyvalent avec certains frameworks, néanmoins, il n’aide pour le moment que les éléments React et HTML.

Différents cadres, comparables à Vue et Angular, doivent être pris en charge rapidement.

9. Flowbite

Flowbite est une bibliothèque d’éléments open-source qui crée des éléments en utilisant les leçons utilitaires CSS Tailwind.

Il offre plus de 400 éléments et options interactives, en plus de l’assistance pour le mode sombre et le système de conception Figma.

Cela fonctionne vraiment avec un grand nombre de cadres de croissance frontaux actuels, ainsi que React, Vue, Svelte, Laravel et Rails.

Flowbite est un package professionnel qui comprend un système de conception Figma basé principalement sur les leçons d’utilité Tailwind CSS, en plus de tout un tas de pages développées et d’éléments comparables à l’interface utilisateur utilitaire, à l’interface utilisateur publicitaire et aux mises en page de commerce électronique.

10. Interface utilisateur en série

DaisyUI est une bibliothèque d’éléments CSS Tailwind très appréciée qui pourrait être une source gratuite. Il a gagné plus de 10 000 étoiles Github et a eu plus de 800 000 téléchargements npm. DaisyUI étend Tailwind CSS avec des leçons comme btn, card et autres pour tous les éléments d’interface utilisateur répandus. Cela nous permet de prêter attention à une option très puissante de chaque défi plutôt que d’avoir à créer des composants élémentaires pour chacun. Les éléments Tailwind de DaisyUI ont une faible spécificité CSS, il y a donc de fortes chances que vous personnalisiez chaque partie avec des leçons d’utilité CSS Tailwind.

DaisyUI convient à de nombreux frameworks frontaux, ainsi qu’à React, Nextjs, Nuxt, Vue, Solidjs, Svelte, Remix, Angular et extra.

Top 10 des ensembles de composants et de modèles CSS Tailwind