コーポレート/プロフェッショナルギャラリーコンポーネント
フォレスト/グリーンのカラーパレットを使用した、企業/プロフェッショナルな美学を備えたレスポンシブで用途の広い画像ギャラリーコンポーネント。教育プラットフォーム向けに設計されており、ダークモードをサポートするクリーンで信頼できるインターフェイスを提供します。
HTMLコード
<section class="py-8 sm:py-12 bg-gray-50 dark:bg-gray-900 font-sans">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10 sm:mb-16">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white capitalize leading-tight mb-4">
Explore Our Learning Resources
</h2>
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
Dive into our extensive collection of educational materials, designed to enhance your learning journey.
</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">
<!-- Gallery Item 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
<div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
<img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/10/600/400" alt="Course thumbnail depicting a calm lake with mountains">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Web Development</span>
</div>
</div>
<div class="p-5 sm:p-6">
<h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
<a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Foundations of Modern Web Design</a>
</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
Master the core principles of responsive web design using HTML5, CSS3, and modern frameworks.
</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Instructor avatar">
<span class="text-sm text-gray-700 dark:text-gray-200">John Doe</span>
</div>
<span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$49.99</span>
</div>
</div>
</div>
<!-- Gallery Item 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
<div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
<img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1015/600/400" alt="Course thumbnail depicting a camera and coffee">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Digital Marketing</span>
</div>
</div>
<div class="p-5 sm:p-6">
<h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
<a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Advanced SEO Strategies for Growth</a>
</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
Learn to boost your online visibility and drive organic traffic with proven SEO tactics.
</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Instructor avatar">
<span class="text-sm text-gray-700 dark:text-gray-200">Jane Smith</span>
</div>
<span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$69.99</span>
</div>
</div>
</div>
<!-- Gallery Item 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
<div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
<img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1/600/400" alt="Course thumbnail depicting office supplies and a laptop">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Business & Finance</span>
</div>
</div>
<div class="p-5 sm:p-6">
<h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
<a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Financial Modeling & Analysis</a>
</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
Build robust financial models and make informed decisions with this comprehensive course.
</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Instructor avatar">
<span class="text-sm text-gray-700 dark:text-gray-200">Robert Johnson</span>
</div>
<span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$89.99</span>
</div>
</div>
</div>
<!-- Gallery Item 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
<div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
<img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/20/600/400" alt="Course thumbnail depicting a network hub">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">IT & Software</span>
</div>
</div>
<div class="p-5 sm:p-6">
<h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
<a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Cybersecurity Fundamentals</a>
</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
Understand the threats and learn to protect digital systems and networks from attacks.
</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/55.jpg" alt="Instructor avatar">
<span class="text-sm text-gray-700 dark:text-gray-200">Emily White</span>
</div>
<span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$79.99</span>
</div>
</div>
</div>
<!-- Gallery Item 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
<div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
<img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/29/600/400" alt="Course thumbnail depicting a book and coffee">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Personal Development</span>
</div>
</div>
<div class="p-5 sm:p-6">
<h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
<a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Effective Communication Skills</a>
</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
Enhance your interpersonal skills and learn to communicate clearly and persuasively.
</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Instructor avatar">
<span class="text-sm text-gray-700 dark:text-gray-200">Michael Green</span>
</div>
<span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$39.99</span>
</div>
</div>
</div>
<!-- Gallery Item 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
<div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
<img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/30/600/400" alt="Course thumbnail depicting painting supplies">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Arts & Crafts</span>
</div>
</div>
<div class="p-5 sm:p-6">
<h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
<a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Introduction to Digital Painting</a>
</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
Unlock your creativity and learn the techniques of digital painting using popular software.
</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Instructor avatar">
<span class="text-sm text-gray-700 dark:text-gray-200">Sophia Lee</span>
</div>
<span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$59.99</span>
</div>
</div>
</div>
<!-- Gallery Item 7 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
<div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
<img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1005/600/400" alt="Course thumbnail depicting a forest and lake">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Nature & Environment</span>
</div>
</div>
<div class="p-5 sm:p-6">
<h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
<a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Sustainable Living Practices</a>
</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
Discover eco-friendly habits and contribute to a healthier planet.
</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/5.jpg" alt="Instructor avatar">
<span class="text-sm text-gray-700 dark:text-gray-200">David Clark</span>
</div>
<span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">Free</span>
</div>
</div>
</div>
<!-- Gallery Item 8 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
<div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
<img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1041/600/400" alt="Course thumbnail depicting a brain scan">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Science & Health</span>
</div>
</div>
<div class="p-5 sm:p-6">
<h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
<a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Introduction to Neuroscience</a>
</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
Explore the complexities of the human brain and nervous system in this introductory course.
</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/9.jpg" alt="Instructor avatar">
<span class="text-sm text-gray-700 dark:text-gray-200">Olivia Brown</span>
</div>
<span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$74.99</span>
</div>
</div>
</div>
</div>
<!-- Call to action / Category filter below the grid -->
<div class="mt-10 sm:mt-16 text-center">
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 dark:focus:ring-offset-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors duration-200">
View All Courses
<svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</section>関連コンポーネント
Event_Gallery_Component
イベントや会議の Web サイト向けのレスポンシブ ギャラリー コンポーネントで、ジュエル トーン、カラー グラデーション、スムーズなトランジション、ダーク モードのサポートが特徴です。イベントのハイライトやスピーカーの画像を視覚的に魅力的なグリッドで紹介します。
企業/プロのファッション/美容ギャラリー
企業のファッションおよび美容ブランドに適した、クリーンで信頼性が高く、応答性の高い画像ギャラリー コンポーネントで、トライアド カラー スキームとダーク モードのサポートが特徴です。
ギャラリー コンポーネント
ブログ/コンテンツの目的でアースカラーのNeumorphismスタイルのギャラリーコンポーネント。このコンポーネントは、複数のインタラクティブ要素、レスポンシブデザイン、およびダークテーマのサポートを備えた豊富なインターフェイスを備えています。