VibrantGlassmorphismChart
블로그 및 콘텐츠 사이트에 적합한 생생한 색상의 간단한 Glassmorphism 차트 구성 요소입니다. 구성 요소는 반응형이며 Tailwind CSS를 사용하는 어두운 테마 지원을 포함합니다.
HTML 코드
<div class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-20">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Sales Overview</h3>
<div class="relative h-40">
<canvas id="myChart"></canvas>
</div>
<div class="flex justify-around mt-4 text-gray-700 dark:text-gray-300 text-sm">
<div class="text-center">
<p class="font-semibold text-teal-500 dark:text-teal-400">January</p>
<p>$5,200</p>
</div>
<div class="text-center">
<p class="font-semibold text-rose-500 dark:text-rose-400">February</p>
<p>$6,100</p>
</div>
<div class="text-center">
<p class="font-semibold text-fuchsia-500 dark:text-fuchsia-400">March</p>
<p>$5,500</p>
</div>
</div>
</div>관련 구성 요소
Memphis_Finance_Charts_Component
멤피스 디자인(Memphis Design)에서 영감을 받은 복잡한 금융 차트 구성 요소로, 대담한 색상, 기하학적 모양, 네온/일렉트릭 색상 구성표가 특징입니다. 완벽하게 반응하고 다크 모드를 지원하며 금융/뱅킹 인터페이스에 적합합니다.
차트 구성 요소
머티리얼 디자인 원칙에 따라 설계된 반응형 차트 구성 요소로, 파스텔 색조 구성표와 복잡한 상호 작용성을 특징으로 하여 포트폴리오를 보여줍니다. 여기에는 Tailwind CSS 클래스를 사용한 다크 모드 지원이 포함됩니다.