Course_Grid_Layout_Component
Un composant de mise en page de grille réactif et visuellement attrayant pour les plates-formes éducatives, avec des cartes de cours avec des tons chauds de coucher de soleil, des ombres Material Design et la prise en charge du mode sombre.
HTML Code
<div class="bg-gradient-to-br from-orange-50 to-amber-100 py-12 dark:from-gray-900 dark:to-gray-800 transition-colors duration-500 min-h-screen">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-4xl font-extrabold text-orange-800 mb-8 text-center dark:text-amber-300">
Explore Our Courses
</h2>
<p class="text-lg text-orange-700 mb-12 text-center max-w-2xl mx-auto dark:text-gray-300">
Dive into a world of knowledge with our expertly curated courses. From foundational concepts to advanced topics, there's always something new to learn.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
<!-- Course Card 1 -->
<div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
<img src="https://picsum.photos/400/250?random=1" alt="Course thumbnail - Web Development Basics" class="rounded-t-xl object-cover h-48 w-full">
<div class="p-6 flex-grow flex flex-col">
<h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Web Development Fundamentals</h3>
<p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Learn the essentials of HTML, CSS, and JavaScript to build your first websites. Perfect for beginners!</p>
<div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
<svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<span>4.8 (1,234 reviews)</span>
</div>
<div class="flex items-center mb-4">
<img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Instructor avatar">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">John Doe</span>
</div>
<a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
View Course
</a>
</div>
</div>
<!-- Course Card 2 -->
<div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
<img src="https://picsum.photos/400/250?random=2" alt="Course thumbnail - Data Science Essentials" class="rounded-t-xl object-cover h-48 w-full">
<div class="p-6 flex-grow flex flex-col">
<h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Data Science Essentials</h3>
<p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Uncover the power of data analysis, statistics, and machine learning algorithms using Python.</p>
<div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
<svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<span>4.9 (987 reviews)</span>
</div>
<div class="flex items-center mb-4">
<img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/8.jpg" alt="Instructor avatar">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Jane Smith</span>
</div>
<a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
View Course
</a>
</div>
</div>
<!-- Course Card 3 -->
<div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
<img src="https://picsum.photos/400/250?random=3" alt="Course thumbnail - Mobile App Development" class="rounded-t-xl object-cover h-48 w-full">
<div class="p-6 flex-grow flex flex-col">
<h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Mobile App Development with React Native</h3>
<p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Build cross-platform mobile applications for iOS and Android using a single codebase.</p>
<div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
<svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<span>4.7 (765 reviews)</span>
</div>
<div class="flex items-center mb-4">
<img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/9.jpg" alt="Instructor avatar">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Emily White</span>
</div>
<a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
View Course
</a>
</div>
</div>
<!-- Course Card 4 -->
<div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
<img src="https://picsum.photos/400/250?random=4" alt="Course thumbnail - Digital Marketing Strategy" class="rounded-t-xl object-cover h-48 w-full">
<div class="p-6 flex-grow flex flex-col">
<h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Digital Marketing Strategy</h3>
<p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Master SEO, social media, content marketing, and paid advertising to boost online presence.</p>
<div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
<svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<span>4.6 (1,012 reviews)</span>
</div>
<div class="flex items-center mb-4">
<img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Instructor avatar">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">David Lee</span>
</div>
<a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
View Course
</a>
</div>
</div>
<!-- Course Card 5 -->
<div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
<img src="https://picsum.photos/400/250?random=5" alt="Course thumbnail - UI/UX Design Fundamentals" class="rounded-t-xl object-cover h-48 w-full">
<div class="p-6 flex-grow flex flex-col">
<h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">UI/UX Design Fundamentals</h3>
<p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Craft intuitive and beautiful user interfaces and experiences with design principles.</p>
<div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
<svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<span>4.9 (890 reviews)</span>
</div>
<div class="flex items-center mb-4">
<img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/11.jpg" alt="Instructor avatar">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Chris Green</span>
</div>
<a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
View Course
</a>
</div>
</div>
<!-- Course Card 6 -->
<div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
<img src="https://picsum.photos/400/250?random=6" alt="Course thumbnail - Cloud Computing Basics" class="rounded-t-xl object-cover h-48 w-full">
<div class="p-6 flex-grow flex flex-col">
<h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Cloud Computing Fundamentals</h3>
<p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Get started with cloud platforms like AWS, Azure, and Google Cloud, covering core services.</p>
<div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
<svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<span>4.7 (654 reviews)</span>
</div>
<div class="flex items-center mb-4">
<img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Instructor avatar">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Olivia Brown</span>
</div>
<a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
View Course
</a>
</div>
</div>
<!-- Course Card 7 -->
<div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
<img src="https://picsum.photos/400/250?random=7" alt="Course thumbnail - Cybersecurity Introduction" class="rounded-t-xl object-cover h-48 w-full">
<div class="p-6 flex-grow flex flex-col">
<h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Cybersecurity Intro</h3>
<p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Understand common cyber threats and how to protect systems and data from attacks.</p>
<div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
<svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<span>4.5 (501 reviews)</span>
</div>
<div class="flex items-center mb-4">
<img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/13.jpg" alt="Instructor avatar">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Robert Hall</span>
</div>
<a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
View Course
</a>
</div>
</div>
<!-- Course Card 8 -->
<div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
<img src="https://picsum.photos/400/250?random=8" alt="Course thumbnail - Project Management Basics" class="rounded-t-xl object-cover h-48 w-full">
<div class="p-6 flex-grow flex flex-col">
<h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Project Management PMBOK</h3>
<p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Learn agile methodologies, project planning, execution, and risk management.</p>
<div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
<svg class="w-4 h-4 mr-1 text-orange-500 dark:text-orange-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<span>4.8 (1,500 reviews)</span>
</div>
<div class="flex items-center mb-4">
<img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/14.jpg" alt="Instructor avatar">
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Sophia Clark</span>
</div>
<a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
View Course
</a>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant de mise en page de grille pastel skeuomorphe
Mise en page de grille pastel skeuomorphe pour blog/contenu, simple avec mode sombre
Grille de soins de santé vibrante inspirée du papier
Un composant de mise en page de grille simple, inspiré du papier/de l’impression avec des couleurs vives, conçu pour les applications médicales/de santé. Il est entièrement réactif, inclut la prise en charge du mode sombre et utilise le HTML sémantique.
Composant de mise en page de grille
Un composant de mise en page de grille minimaliste pour le commerce électronique avec une palette de couleurs triadique et la prise en charge du mode sombre, conçu pour les expériences d’achat en ligne.