Maison >interface Web >tutoriel HTML >Comment créer un composant de carte en utilisant Tailwind CSS ?
Comment créer un composant de carte en utilisant Tailwind CSS ?
- WBOYavant
- 2023-08-20 11:41:161218parcourir
Le composant carte dans Tailwind CSS est un concept important dans la conception Web, particulièrement adapté aux sites Web de commerce électronique, aux sites de blogs, etc. Tailwind CSS est connu pour créer des sites Web attrayants. Cet article expliquera comment créer un composant de carte à l'aide de Tailwind CSS.
Comment ajouter un seul composant de carte dans Tailwind CSS
Tailwind CSS nous offre un moyen très pratique d'ajouter des composants de carte. Les composants de la carte peuvent également contenir d'autres sous-composants tels que la vidéo, l'audio, les images, etc. De plus, nous pouvons facilement personnaliser la conception globale en utilisant les propriétés disponibles. Vous pouvez également utiliser Tailwind CSS pour ajouter des animations et des effets de survol aux composants de la carte.
La traduction chinoise deExemple
est :Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com/"></script>
<title>Tutorials Point</title>
</head>
<body class="bg-gray-300 text-gray-600">
<section class="py-12 px-5 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="p-4 lg:w-1/3">
<div class="bg-white bg-opacity-75 rounded-lg p-8 overflow-hidden text-center relative">
<h2 class="text-xs title-font font-medium text-gray-700 mb-
1">TUTORIALS POINT</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-
900 mb-3">Elegant and Concise Tutorials</h1>
<p class="mb-3 text-justify">
Unlock the potential of limitless learning with Tutorials Point!
Our platform offers a wide range of tutorials, covering subjects
such as programming, web development, data science, and more. Our
step-by-step guides and interactive learning experiences will help
you master the concepts and skills needed to succeed in your
field. Enhance your knowledge and boost your career with Tutorials
Point today!
</p>
<img class="w-full object-cover object-center" src="https://www.tutorialspoint.com/images/logo.png"
</div>
</div>
</div>
</section>
</body>
</html>
La traduction chinoise de Explication
est :Explication
Cette section comprend : ➔ Un lien vers la bibliothèque CSS Tailwind, un framework CSS utilitaire populaire pour créer des sites Web rapides et réactifs.
Un document HTML définit une section qui contient un titre, un sous-titre, du texte descriptif et un encadré avec une image. La section 93f0f5c25f18dab9d176bd4f6de5d30e comprend un b2386ffb911b14667cb8f0f91ea547a7 et un 3f1c4e4b6b16bbbd69b2ee476dc4f83a La section 6c04bd5ca3fcae76e30b72ad730ca86d contient des classes qui définissent la couleur d'arrière-plan et la couleur du texte.
La bibliothèque CSS Tailwind ajoute des styles aux éléments HTML de manière simple et élégante. La boîte a des bordures arrondies, un remplissage, une transparence et son contenu est centré. L'image est définie sur toute la largeur et couvre la boîte, tout en conservant son rapport hauteur/largeur.
Comment ajouter plusieurs cartes ?
Vous avez peut-être remarqué que les pages Web populaires telles que les blogs, le commerce électronique, etc. contiennent plusieurs composants de cartes. Obtenir le même effet dans Tailwind CSS est très simple. Il nous suffit d’écrire plusieurs fois le même code de carte de base. En fonction des paramètres que nous transmettons, tels que la largeur, la hauteur, etc., le navigateur placera ces cartes.
La traduction chinoise deExemple
est :Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com/"></script>
<title>Awesome Card</title>
</head>
<body class="bg-gray-300 text-gray-600">
<section class="py-12 px-5 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="p-4 lg:w-1/3">
<div class="bg-white rounded-lg p-8 shadow-lg overflow-hidden">
<img class="w-full object-cover object-center"
src="https://imgnew.outlookindia.com/uploadimage/library/16_9/16_9_5/IMAGE_1651057728.jpeg"
<h2 class="text-xs title-font font-medium text-gray-700 mb-1 mt-5">ASUS LAPTOP</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-
900 mb-3">GAMING LAPTOP</h1>
<p class="mb-3 text-justify">
ASUS laptops are designed for versatility, with features like
sleek and lightweight designs, powerful performance, and
innovative technologies. Whether you're a gamer, creative
professional, or just need a reliable device for everyday use,
ASUS has you covered.
</p>
<button class="bg-indigo-500 text-white py-2 px-4 roundedfull"> Get Started</button>
</div>
</div>
<div class="p-4 lg:w-1/3">
<div class="bg-white rounded-lg p-8 shadow-lg overflow-hidden">
<img class="w-full object-cover object-center"src="https://images.indianexpress.com/2022/08/HP_Laptop_LEAD.jpg"
<h2 class="text-xs title-font font-medium text-gray-700 mb-1 mt-5">HP LAPTOP</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">ULTRABOOK</h1>
<p class="mb-3 text-justify">
HP offers a wide range of laptops to choose from, designed to suit
every need and budget. From lightweight and portable devices perfect
for on-the-go computing, to powerful machines capable of handling
demanding tasks, HP has got you covered.
</p>
<button class="bg-indigo-500 text-white py-2 px-4 roundedfull">Get Started</button>
</div>
</div>
<div class="p-4 lg:w-1/3">
<div class="bg-white rounded-lg p-8 shadow-lg overflow-hidden">
<img class="w-full object-cover object-center"src="https://cdn.mos.cms.futurecdn.net/PZtqJj8yTeTYnw3WMjdomF.jpg"
<h2 class="text-xs title-font font-medium text-gray-700 mb-1 mt-5">DELL LAPTOP</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">ULTRABOOK</h1>
<p class="mb-3 text-justify">
Dell has a wide range of laptops to choose from, making it easy to
find one that suits your needs and budget.From entry-level
machines perfect for basic computing, to high-end gaming laptops,
Dell has something for everyone.</p>
<button class="bg-indigo-500 text-white py-2 px-4 roundedfull">Get Started</button>
</div>
</div>
</div>
</section>
</body>
</html>
Conclusion
Cet article explique comment créer un composant de carte à l'aide de Tailwind CSS. Nous avons utilisé différents éléments dans le composant de la carte comme le texte, le titre, le composant image, etc. Nous encourageons fortement les lecteurs à essayer de modifier les propriétés et les valeurs et à observer les changements.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!