CCHub Logo CCHub Tailwind Collection
구성 요소 차트 차트 구성 요소

차트 구성 요소

회색조 색 구성표를 사용하는 어두운 모드의 전자 상거래 웹 응용 프로그램을 위해 설계된 복잡한 차트 구성 요소입니다. 이 구성 요소에는 차트, 데이터 포인트, 도구 설명 및 버튼과 같은 여러 대화형 요소가 포함되어 있으며 Tailwind CSS를 사용한 반응형 디자인이 있습니다.

미리 보기

HTML 코드 

<div class="bg-gray-900 text-gray-100 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Sales Chart</h2>
    <div class="flex items-center justify-between mb-4">
        <span class="text-lg">Last 30 Days</span>
        <button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Weekly</button>
        <button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Monthly</button>
        <button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Yearly</button>
    </div>
    <div class="relative">
        <img src="https://picsum.photos/600/300" alt="Sales Chart" class="w-full rounded-lg">
        <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 rounded-lg">
            <span class="text-xl font-semibold">$23,000</span>
            <span class="text-sm">Total Sales</span>
        </div>
    </div>
    <div class="mt-4">
        <div class="flex justify-around text-sm text-gray-400">
            <div class="text-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
                <span>User 1</span>
            </div>
            <div class="text-center">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
                <span>User 2</span>
            </div>
            <div class="text-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
                <span>User 3</span>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

Retro_Vintage_Pastel_Social_Charts_Component

파스텔 색상을 사용하여 레트로/빈티지 80년대/90년대 미학을 가미한 복잡하고 반응형 차트 구성 요소로, 소셜 미디어 플랫폼용으로 설계되었습니다. 다크 모드 지원이 포함됩니다.

열다

스큐어모픽소셜미디어차트

스큐어모픽에서 영감을 받은 소셜 미디어를 위한 간단한 차트 구성 요소로, 보색과 반응형 디자인이 특징입니다.

열다

Memphis_Marketplace_Charts_Component

Memphis Design 미학, 대담한 보색을 갖춘 복잡하고 반응이 빠른 차트 구성 요소로, 다중 공급업체 시장에 적합합니다. 다크 모드 지원 및 대화형 요소가 포함됩니다.

열다