CCHub Logo CCHub Tailwind Collection
구성 요소 미디어 구성 요소 미디어 컴포넌트 컴포넌트

미디어 컴포넌트 컴포넌트

브루탈리즘 디자인, 생생한 색상, 대시보드의 복잡한 레이아웃을 갖춘 반응형 미디어 구성 요소 구성 요소로, 어두운 테마를 지원하고 JavaScript를 사용하지 않습니다. 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.

미리 보기

HTML 코드 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-8 font-mono">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Media Card 1 -->
        <div class="bg-purple-400 dark:bg-purple-700 p-6 shadow-2xl border-4 border-black dark:border-white transform skew-x-3 hover:skew-x-0 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=1" alt="Media 1" class="w-full h-48 object-cover mb-4 border-2 border-black dark:border-white">
            <h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">Data Stream Alpha</h3>
            <p class="text-black dark:text-white text-sm mb-4">Real-time analytics and visualization of sensor data from industrial machinery.</p>
            <div class="flex justify-between items-center">
                <span class="text-xs text-black dark:text-white bg-yellow-300 dark:bg-yellow-500 px-3 py-1 border-2 border-black dark:border-white">Live</span>
                <a href="#" class="text-black dark:text-white bg-red-500 dark:bg-red-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-red-600 dark:hover:bg-red-800 transition-colors duration-200">View Dashboard</a>
            </div>
        </div>

        <!-- Media Card 2 -->
        <div class="bg-green-400 dark:bg-green-700 p-6 shadow-2xl border-4 border-black dark:border-white transform -skew-y-3 hover:skew-y-0 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=2" alt="Media 2" class="w-full h-48 object-cover mb-4 border-2 border-black dark:border-white">
            <h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">System Health Monitor</h3>
            <p class="text-black dark:text-white text-sm mb-4">Overview of server health, network latency, and application performance metrics.</p>
            <div class="flex justify-between items-center">
                <span class="text-xs text-black dark:text-white bg-blue-300 dark:bg-blue-500 px-3 py-1 border-2 border-black dark:border-white">Warning</span>
                <a href="#" class="text-black dark:text-white bg-purple-500 dark:bg-purple-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-purple-600 dark:hover:bg-purple-800 transition-colors duration-200">Inspect Logs</a>
            </div>
        </div>

        <!-- Media Card 3 -->
        <div class="bg-red-400 dark:bg-red-700 p-6 shadow-2xl border-4 border-black dark:border-white transform rotate-3 hover:rotate-0 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=3" alt="Media 3" class="w-full h-48 object-cover mb-4 border-2 border-black dark:border-white">
            <h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">User Activity Log</h3>
            <p class="text-black dark:text-white text-sm mb-4">Detailed records of user interactions and system events across the platform.</p>
            <div class="flex justify-between items-center">
                <span class="text-xs text-black dark:text-white bg-red-300 dark:bg-red-500 px-3 py-1 border-2 border-black dark:border-white">Critical</span>
                <a href="#" class="text-black dark:text-white bg-green-500 dark:bg-green-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-green-600 dark:hover:bg-green-800 transition-colors duration-200">Review Incidents</a>
            </div>
        </div>

        <!-- Media Card 4 with Avatar -->
        <div class="bg-blue-400 dark:bg-blue-700 p-6 shadow-2xl border-4 border-black dark:border-white transform -skew-x-6 hover:skew-x-0 transition-transform duration-300">
            <div class="flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-16 h-16 rounded-full object-cover border-2 border-black dark:border-white mr-4">
                <div>
                    <h3 class="text-2xl font-bold text-black dark:text-white uppercase">Team Collaboration</h3>
                    <p class="text-black dark:text-white text-sm">Updates from the development team.</p>
                </div>
            </div>
            <p class="text-black dark:text-white text-sm mb-4">Latest sprint review and upcoming feature discussions. Track progress.</p>
            <div class="flex justify-between items-center">
                <span class="text-xs text-black dark:text-white bg-orange-300 dark:bg-orange-500 px-3 py-1 border-2 border-black dark:border-white">Update</span>
                <a href="#" class="text-black dark:text-white bg-yellow-500 dark:bg-yellow-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-yellow-600 dark:hover:bg-yellow-800 transition-colors duration-200">Join Meeting</a>
            </div>
        </div>

        <!-- Media Card 5 - Chart Placeholder -->
        <div class="bg-orange-400 dark:bg-orange-700 p-6 shadow-2xl border-4 border-black dark:border-white transform skew-y-6 hover:skew-y-0 transition-transform duration-300">
            <div class="w-full h-48 bg-gray-300 dark:bg-gray-600 flex items-center justify-center mb-4 border-2 border-black dark:border-white">
                <p class="text-black dark:text-white text-lg font-bold">Chart Placeholder</p>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">Traffic Overview</h3>
            <p class="text-black dark:text-white text-sm mb-4">Visual representation of website traffic and user engagement.</p>
            <div class="flex justify-between items-center">
                <span class="text-xs text-black dark:text-white bg-purple-300 dark:bg-purple-500 px-3 py-1 border-2 border-black dark:border-white">Metrics</span>
                <a href="#" class="text-black dark:text-white bg-blue-500 dark:bg-blue-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-blue-600 dark:hover:bg-blue-800 transition-colors duration-200">Full Report</a>
            </div>
        </div>

        <!-- Media Card 6 - Text Only -->
        <div class="bg-teal-400 dark:bg-teal-700 p-6 shadow-2xl border-4 border-black dark:border-white transform -rotate-6 hover:rotate-0 transition-transform duration-300">
            <h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">Security Alerts</h3>
            <p class="text-black dark:text-white text-sm mb-4">Immediate notifications on potential security breaches and vulnerabilities.</p>
            <ul class="list-disc list-inside mb-4 text-black dark:text-white text-sm">
                <li>Intrusion detected in server 1</li>
                <li>Unauthorized access attempt blocked</li>
                <li>Malware scan initiated</li>
            </ul>
            <div class="flex justify-between items-center">
                <span class="text-xs text-black dark:text-white bg-red-300 dark:bg-red-500 px-3 py-1 border-2 border-black dark:border-white">Urgent</span>
                <a href="#" class="text-black dark:text-white bg-orange-500 dark:bg-orange-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-orange-600 dark:hover:bg-orange-800 transition-colors duration-200">Resolve</a>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

미디어 컴포넌트 컴포넌트

금융/은행 인터페이스를 위해 설계된 복잡하고 반응성이 뛰어난 미디어 구성 요소로, Ocean/Blue 색 구성표와 기본 다크 모드 지원을 특징으로 합니다.

열다

Glassmorphic 미디어 컴포넌트

Tailwind CSS로 제작된 glassmorphism 디자인(젖빛 유리 효과)이 있는 반응형 미디어 카드 구성 요소입니다. 호버로 표시되는 재생 아이콘이 있는 이미지 자리 표시자(picsum.photos), 텍스트 콘텐츠, 아바타가 있는 작성자 섹션(randomuser.me 에서) 및 작업 버튼이 있습니다. 이 구성 요소는 Tailwind CSS 'dark:' 변형을 사용하여 다크 모드를 지원하며 다양한 화면 크기에 반응합니다. JavaScript가 필요하지 않습니다. 최적의 시각 효과를 얻으려면 이 구성 요소를 대비되는 배경에 배치하십시오. 다크 모드 기능은 적절한 Tailwind CSS 구성(예: tailwind.config.js의 'darkMode: "class"')을 가정합니다.

열다

미디어 컴포넌트 컴포넌트

문서/위키 사이트를 위한 복잡한 다크 모드 UI 미디어 구성 요소로, 그라데이션 무지개 색 구성표를 특징으로 합니다. 여기에는 비디오, 오디오 및 자세한 정보와 대화형 요소가 포함된 이미지와 같은 다양한 미디어 유형이 포함되며 모두 반응형이며 시맨틱 HTML을 사용합니다.

열다