ニューモーフィックチャートコンポーネント
ニューモーフィックなデザインスタイルと類似の配色を備えた複雑で応答性の高いチャートコンポーネントで、作業や製品を紹介するポートフォリオに適しています。ダークモードのサポートが含まれています。
HTMLコード
<div class="min-h-screen p-6 bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-sans text-gray-800 dark:text-gray-200 flex items-center justify-center">
<div class="container mx-auto px-4 py-8 max-w-6xl">
<!-- Main Neumorphic Card Container -->
<div class="bg-purple-100 dark:bg-gray-850 p-8 rounded-3xl shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-500 ease-in-out">
<header class="mb-10 text-center">
<h1 class="text-4xl font-extrabold text-indigo-700 dark:text-indigo-400 mb-4 tracking-tight">Portfolio Performance Overview</h1>
<p class="text-lg text-purple-700 dark:text-purple-300">Visualize your progress with interactive, soft UI charts.</p>
</header>
<!-- Analytics Cards Section -->
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
<!-- Card 1 -->
<div class="group bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center">
<div class="w-16 h-16 bg-gradient-to-br from-pink-300 to-red-300 dark:from-pink-600 dark:to-red-600 rounded-full flex items-center justify-center mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white text-3xl font-bold">
<i class="w-8 h-8 opacity-75" style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%222%22 stroke=%22currentColor%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.594l2.25-1.5m-6.003.468L18.75 7.5h-1.091c-.389 0-.711-.29-.757-.679A9.795 9.795 0 0014.25 2.25H6.05a4.5 4.5 0 00-4.5 4.5v11.751m12 0a4.5 4.5 0 00-4.5 4.5v.525A.75.75 0 0110.125 22.5h3.75a.75.75 0 01.75-.75V21a4.5 4.5 0 00-4.5-4.5h-.75%22 /%3E%3C/svg%3E'); display: inline-block; background-size: contain; background-repeat: no-repeat;"></i>
</div>
<h3 class="text-3xl font-bold text-red-600 dark:text-red-400 mb-2">+12.5%</h3>
<p class="text-md text-red-500 dark:text-red-300 group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors">Total Growth</p>
</div>
<!-- Card 2 -->
<div class="group bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center">
<div class="w-16 h-16 bg-gradient-to-br from-indigo-300 to-purple-300 dark:from-indigo-600 dark:to-purple-600 rounded-full flex items-center justify-center mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white text-3xl font-bold">
<i class="w-8 h-8 opacity-75" style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%222%22 stroke=%22currentColor%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182L12 12.588m-3 2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182L12 12.588m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182L12 8.588m.5 8.281V12.98c0-.5-.494-.954-.99-.954H10.99c-.494 0-.99.454-.99.954v3.291m0 0C6.183 17.11 4.5 14.773 4.5 12c0-3.14 0-5.657 0-5.657s1.517-2.333 4.5-2.333h6c2.983 0 4.5 2.333 4.5 2.333S19.5 8.86 19.5 12c0 2.773-1.683 5.11-4.5 5.991m0 0c-.863 1.096-2.094 1.761-3.497 1.761H12.5c-1.403 0-2.634-.665-3.497-1.761M12 4.5c2.983 0 4.5 2.333 4.5 2.333S16.035 7 12 7c-4.035 0-4.5-.167-4.5-.167S9.017 4.5 12 4.5zM12 19.5c-2.983 0-4.5-2.333-4.5-2.333S7.965 17 12 17c4.035 0 4.5.167 4.5.167S15.017 19.5 12 19.5z%22 /%3E%3C/svg%3E'); display: inline-block; background-size: contain; background-repeat: no-repeat;"></i>
</div>
<h3 class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 mb-2">$12,345</h3>
<p class="text-md text-indigo-500 dark:text-indigo-300 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">Revenue This Month</p>
</div>
<!-- Card 3 -->
<div class="group bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center">
<div class="w-16 h-16 bg-gradient-to-br from-purple-300 to-pink-300 dark:from-purple-600 dark:to-pink-600 rounded-full flex items-center justify-center mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white text-3xl font-bold">
<i class="w-8 h-8 opacity-75" style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%222%22 stroke=%22currentColor%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M15 19.128a9.38 9.38 0 002.668.236 9.38 9.38 0 002.668-.236l.292-.096.002-.005.002-.006c.725-.24 1.25-.948 1.25-1.745V10.5h-.005a8.775 8.775 0 01-2.903-.787m-1.298.115a9.38 9.38 0 00-2.668-.236 9.38 9.38 0 00-2.668.236l-.292.096-.002.005-.002.006c-.725.24-1.25.948-1.25 1.745v7.5a.75.75 0 00.75.75H13.5c.294 0 .584-.047.863-.129.28-.08.548-.201.797-.367s.475-.386.678-.609.356-.475.46-.757.17-.6-.17-.999a.75.75 0 00-.75-.75h-1c-.414 0-.75-.336-.75-.75V12.75a.75.75 0 01.75-.75h1.5c.414 0 .75.336.75.75v5.006c.729.088 1.393.308 1.956.637l.11.066zM13.5 12h1.5M12 12v.75m-3-2.25H7.5A.75.75 0 006.75 12v7.5c0 .806.525 1.514 1.25 1.745l.002.006.002.005.292.096c1.09.362 2.21.547 3.333.547a11.95 11.95 0 003.497-.379V12.75A.75.75 0 0113.5 12h-.75V9.75a.75.75 0 00-.75-.75h-1.5a.75.75 0 00-.75.75v2.25zM7.5 12h1.5M12 4.5a3.75 3.75 0 100 7.5 3.75 3.75 0 000-7.5zM21.75 12a9.75 9.75 0 10-19.5 0 9.75 9.75 0 0019.5 0z%22 /%3E%3C/svg%3E'); display: inline-block; background-size: contain; background-repeat: no-repeat;"></i>
</div>
<h3 class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">350+</h3>
<p class="text-md text-purple-500 dark:text-purple-300 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors">Projects Completed</p>
</div>
<!-- Card 4 -->
<div class="group bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out cursor-pointer flex flex-col items-center justify-center text-center">
<div class="w-16 h-16 bg-gradient-to-br from-red-300 to-pink-300 dark:from-red-600 dark:to-pink-600 rounded-full flex items-center justify-center mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white text-3xl font-bold">
<i class="w-8 h-8 opacity-75" style="background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%222%22 stroke=%22currentColor%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z%22 /%3E%3C/svg%3E'); display: inline-block; background-size: contain; background-repeat: no-repeat;"></i>
</div>
<h3 class="text-3xl font-bold text-pink-600 dark:text-pink-400 mb-2">98%</h3>
<p class="text-md text-pink-500 dark:text-pink-300 group-hover:text-pink-600 dark:group-hover:text-pink-400 transition-colors">Client Satisfaction</p>
</div>
</section>
<!-- Main Chart Area -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Line Chart (Placeholder) -->
<div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out">
<h2 class="text-2xl font-semibold mb-4 text-indigo-700 dark:text-indigo-400">Overall Performance Trend</h2>
<div class="aspect-w-16 aspect-h-9 w-full rounded-xl overflow-hidden shadow-neumorphic-light dark:shadow-neumorphic-dark">
<img src="https://picsum.photos/1000/600?random=1" alt="Line Chart Placeholder" class="w-full h-full object-cover rounded-xl" loading="lazy">
</div>
<div class="mt-4 flex flex-wrap gap-2 text-sm text-purple-600 dark:text-purple-300">
<button class="px-4 py-2 rounded-lg bg-purple-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">1M</button>
<button class="px-4 py-2 rounded-lg bg-purple-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">3M</button>
<button class="px-4 py-2 rounded-lg bg-pink-300 dark:bg-pink-700 text-white shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">6M</button>
<button class="px-4 py-2 rounded-lg bg-purple-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">1Y</button>
<button class="px-4 py-2 rounded-lg bg-purple-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">All</button>
</div>
</div>
<!-- Bar Chart (Placeholder) -->
<div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out">
<h2 class="text-2xl font-semibold mb-4 text-red-700 dark:text-red-400">Projects by Category</h2>
<div class="aspect-w-16 aspect-h-9 w-full rounded-xl overflow-hidden shadow-neumorphic-light dark:shadow-neumorphic-dark">
<img src="https://picsum.photos/1000/600?random=2" alt="Bar Chart Placeholder" class="w-full h-full object-cover rounded-xl" loading="lazy">
</div>
<div class="mt-4 flex flex-wrap gap-2 text-sm text-red-600 dark:text-red-300">
<button class="px-4 py-2 rounded-lg bg-red-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">Development</button>
<button class="px-4 py-2 rounded-lg bg-red-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">Design</button>
<button class="px-4 py-2 rounded-lg bg-pink-300 dark:bg-pink-700 text-white shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">Marketing</button>
<button class="px-4 py-2 rounded-lg bg-red-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition-all duration-200">Consulting</button>
</div>
</div>
</div>
<!-- Recent Activity Section -->
<section class="mt-12">
<h2 class="text-2xl font-semibold mb-6 text-pink-700 dark:text-pink-400">Recent Milestones & Activity</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Activity Item 1 -->
<div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out flex items-center">
<img src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar" class="w-14 h-14 rounded-full mr-4 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm border-2 border-purple-300 dark:border-purple-600 flex-shrink-0">
<div>
<p class="text-lg font-medium text-pink-600 dark:text-pink-300 mb-1">Achieved <span class="font-semibold text-red-600 dark:text-red-400">5-star rating</span> on 'E-commerce Redesign' project.</p>
<p class="text-sm text-purple-600 dark:text-purple-300">2 hours ago</p>
</div>
</div>
<!-- Activity Item 2 -->
<div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out flex items-center">
<img src="https://randomuser.me/api/portraits/women/8.jpg" alt="User Avatar" class="w-14 h-14 rounded-full mr-4 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm border-2 border-pink-300 dark:border-pink-600 flex-shrink-0">
<div>
<p class="text-lg font-medium text-pink-600 dark:text-pink-300 mb-1">New client inquiry for <span class="font-semibold text-indigo-600 dark:text-indigo-400">'Mobile App Development'</span>.</p>
<p class="text-sm text-purple-600 dark:text-purple-300">Yesterday</p>
</div>
</div>
<!-- Activity Item 3 -->
<div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out flex items-center">
<img src="https://randomuser.me/api/portraits/men/9.jpg" alt="User Avatar" class="w-14 h-14 rounded-full mr-4 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm border-2 border-red-300 dark:border-red-600 flex-shrink-0">
<div>
<p class="text-lg font-medium text-pink-600 dark:text-pink-300 mb-1">Released case study for <span class="font-semibold text-purple-600 dark:text-purple-400">'SaaS Platform UX improvements'</span>.</p>
<p class="text-sm text-purple-600 dark:text-purple-300">3 days ago</p>
</div>
</div>
<!-- Activity Item 4 -->
<div class="bg-purple-100 dark:bg-gray-850 p-6 rounded-2xl shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark hover:shadow-neumorphic-light dark:hover:shadow-neumorphic-dark transition-all duration-300 ease-in-out flex items-center">
<img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-14 h-14 rounded-full mr-4 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm border-2 border-indigo-300 dark:border-indigo-600 flex-shrink-0">
<div>
<p class="text-lg font-medium text-pink-600 dark:text-pink-300 mb-1">Featured in 'Top 10 Frontend Developers' article.</p>
<p class="text-sm text-purple-600 dark:text-purple-300">1 week ago</p>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<!-- Custom Styles for Neumorphism (consider adding to a CSS file for production) -->
<style>
/* Light mode shadows */
.shadow-neumorphic-light {
box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
}
.shadow-neumorphic-light-sm {
box-shadow: 4px 4px 8px #d9d9d9, -4px -4px 8px #ffffff;
}
.shadow-neumorphic-inset-light {
box-shadow: inset 5px 5px 10px #cbcecb, inset -5px -5px 10px #ffffff;
}
/* Dark mode shadows */
.dark .shadow-neumorphic-dark {
box-shadow: 8px 8px 16px #1a1b1e, -8px -8px 16px #2e3034;
}
.dark .shadow-neumorphic-dark-sm {
box-shadow: 4px 4px 8px #1a1b1e, -4px -4px 8px #2e3034;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 5px 5px 10px #1a1b1e, inset -5px -5px 10px #2e3034;
}
/* Responsive aspect ratio */
.aspect-w-16 {
position: relative;
width: 100%;
}
.aspect-h-9::before {
content: '';
display: block;
padding-bottom: 56.25%; /* 9/16 for 16:9 aspect ratio */
}
.aspect-w-16 > *, .aspect-h-9 > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Custom dark mode background color for deep neumorphism */
.dark\:bg-gray-850 {
background-color: #242629;
}
/* Custom light mode background colors for main container */
.bg-gradient-to-br.from-purple-200.via-pink-200.to-red-200 {
background-image: linear-gradient(to bottom right, #e9d5ff, #fbcfe8, #fecaca);
}
</style>関連コンポーネント
グラフ コンポーネント
パステルカラーとダークモードをサポートするシンプルで応答性の高いチャートコンポーネントで、ホバー効果による微妙なマイクロインタラクションによるブログ/コンテンツの消費向けに設計されています。JavaScript はありません。
グラフ コンポーネント
マテリアルデザインの原則に基づいて設計されたレスポンシブチャートコンポーネントで、パステルカラーの配色とポートフォリオを表示するための複雑なインタラクティブ性が特徴です。これには、Tailwind CSSクラスによるダークモードのサポートが含まれています。
RetroChartsコンポーネント
レスポンシブ効果とTailwind CSSを使用したダークテーマのサポートを備えたレトロ/ビンテージチャートコンポーネント。プレースホルダー画像が含まれています。