Data Visualization Components 구성 요소
복잡하고 미니멀한 예약/예약 구성 요소로, 네온/일렉트릭 색상 구성표가 있으며, 달력 및 시간대 선택기와 같은 데이터 시각화 요소가 특징입니다. 다크 모드 지원으로 완벽하게 반응합니다.
HTML 코드
<div class="min-h-screen bg-gray-100 p-4 dark:bg-gray-900 md:p-8 lg:p-12 font-sans text-gray-800 dark:text-gray-200">
<div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden backdrop-blur-sm bg-opacity-90 dark:bg-opacity-90 border border-gray-200 dark:border-gray-700">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 p-6 lg:p-10">
<!-- Left Section: Calendar and Summary -->
<div class="lg:col-span-2 flex flex-col space-y-8">
<h2 class="text-4xl font-extrabold text-indigo-600 dark:text-fuchsia-500 mb-6 tracking-tight">Book Your Spot</h2>
<!-- Monthly Calendar -->
<div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600 relative group">
<h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Select Date</h3>
<div class="flex justify-between items-center mb-4">
<button class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-violet-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg></button>
<span class="text-xl font-semibold text-gray-900 dark:text-gray-100">October 2023</span>
<button class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-violet-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></button>
</div>
<div class="grid grid-cols-7 gap-2 text-center text-sm">
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Sun</div>
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Mon</div>
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Tue</div>
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Wed</div>
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Thu</div>
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Fri</div>
<div class="text-xs font-bold text-violet-500 dark:text-fuchsia-400 uppercase">Sat</div>
<!-- Example days -->
<div class="py-2 text-gray-400">27</div>
<div class="py-2 text-gray-400">28</div>
<div class="py-2 text-gray-400">29</div>
<div class="py-2 text-gray-400">30</div>
<div class="py-2 text-gray-400">1</div>
<div class="py-2 text-gray-900 dark:text-gray-100">2</div>
<div class="py-2 text-gray-900 dark:text-gray-100">3</div>
<div class="py-2 text-gray-900 dark:text-gray-100">4</div>
<div class="py-2 text-gray-900 dark:text-gray-100">5</div>
<div class="py-2 text-gray-900 dark:text-gray-100">6</div>
<div class="py-2 text-gray-900 dark:text-gray-100 relative group selected-date">
7<span class="absolute inset-0 border-2 border-fuchsia-500 dark:border-cyan-400 rounded-full scale-0 group-hover:scale-105 transition-all duration-300"></span>
</div>
<div class="py-2 text-gray-900 dark:text-gray-100">8</div>
<div class="py-2 rounded-full bg-fuchsia-100 dark:bg-cyan-900 text-fuchsia-700 dark:text-cyan-300 font-semibold border-2 border-fuchsia-400 dark:border-cyan-600 shadow-inner">9</div>
<div class="py-2 text-gray-900 dark:text-gray-100">10</div>
<div class="py-2 text-gray-900 dark:text-gray-100">11</div>
<div class="py-2 text-gray-900 dark:text-gray-100">12</div>
<div class="py-2 text-gray-900 dark:text-gray-100">13</div>
<div class="py-2 text-gray-900 dark:text-gray-100">14</div>
<div class="py-2 text-gray-900 dark:text-gray-100">15</div>
<div class="py-2 text-gray-900 dark:text-gray-100">16</div>
<div class="py-2 text-gray-900 dark:text-gray-100">17</div>
<div class="py-2 text-gray-900 dark:text-gray-100">18</div>
<div class="py-2 text-gray-900 dark:text-gray-100">19</div>
<div class="py-2 text-gray-900 dark:text-gray-100">20</div>
<div class="py-2 text-gray-900 dark:text-gray-100">21</div>
<div class="py-2 text-gray-900 dark:text-gray-100">22</div>
<div class="py-2 text-gray-900 dark:text-gray-100">23</div>
<div class="py-2 text-gray-900 dark:text-gray-100">24</div>
<div class="py-2 text-gray-900 dark:text-gray-100">25</div>
<div class="py-2 text-gray-900 dark:text-gray-100">26</div>
<div class="py-2 text-gray-900 dark:text-gray-100">27</div>
<div class="py-2 text-gray-900 dark:text-gray-100">28</div>
<div class="py-2 text-gray-900 dark:text-gray-100">29</div>
<div class="py-2 text-gray-900 dark:text-gray-100">30</div>
<div class="py-2 text-gray-900 dark:text-gray-100">31</div>
<div class="py-2 text-gray-400">1</div>
<div class="py-2 text-gray-400">2</div>
<div class="py-2 text-gray-400">3</div>
<div class="py-2 text-gray-400">4</div>
</div>
</div>
<!-- Time Slot Selection -->
<div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
<h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Select Time Slot</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
<span class="text-lg font-medium">09:00 AM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
<span class="text-lg font-medium">10:00 AM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
<span class="text-lg font-medium">11:00 AM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
<span class="text-lg font-medium">12:00 PM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-fuchsia-500 dark:border-cyan-400 bg-fuchsia-200 dark:bg-cyan-800 text-fuchsia-800 dark:text-cyan-200 font-bold shadow-md transform scale-105 relative ring-2 ring-fuchsia-500 dark:ring-cyan-400 transition-all duration-300 group">
<span class="text-lg">01:00 PM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200 opacity-60 cursor-not-allowed">
<span class="text-lg font-medium">02:00 PM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
<span class="text-lg font-medium">03:00 PM</span>
</button>
<button class="flex items-center justify-center p-3 rounded-lg border border-violet-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 hover:bg-violet-200 hover:border-violet-500 dark:hover:bg-gray-600 dark:hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-cyan-400 transition-all duration-200">
<span class="text-lg font-medium">04:00 PM</span>
</button>
</div>
</div>
<!-- Additional Booking Info/Charts -->
<div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
<h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Availability Overview</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex items-center space-x-3">
<div class="w-4 h-4 rounded-full bg-fuchsia-500 dark:bg-cyan-400 animate-pulse"></div>
<span class="text-md text-gray-700 dark:text-gray-300">Few Spots Left</span>
</div>
<div class="flex items-center space-x-3">
<div class="w-4 h-4 rounded-full bg-lime-500"></div>
<span class="text-md text-gray-700 dark:text-gray-300">Highly Available</span>
</div>
<div class="flex items-center space-x-3">
<div class="w-4 h-4 rounded-full bg-red-500 opacity-60"></div>
<span class="text-md text-gray-700 dark:text-gray-300">Fully Booked</span>
</div>
<div class="flex items-center space-x-3">
<div class="w-4 h-4 rounded-full bg-gray-400 dark:bg-gray-500"></div>
<span class="text-md text-gray-700 dark:text-gray-300">Not Available</span>
</div>
</div>
<div class="mt-6">
<h4 class="text-xl font-semibold mb-3 text-gray-800 dark:text-gray-200">Daily Slot Trends</h4>
<!-- Placeholder for a simple bar chart or sparkline: SVG or image -->
<div class="w-full h-32 bg-gradient-to-r from-lime-300 via-fuchsia-300 to-red-300 dark:from-lime-800 dark:via-fuchsia-800 dark:to-red-800 rounded-md p-2 relative overflow-hidden">
<div class="absolute bottom-0 left-0 w-full flex items-end justify-around h-full">
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 80%; animation-delay: 0s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 60%; animation-delay: 0.1s;"></div>
<div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 40%; animation-delay: 0.2s;"></div>
<div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 20%; animation-delay: 0.3s;"></div>
<div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 50%; animation-delay: 0.4s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 70%; animation-delay: 0.5s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 90%; animation-delay: 0.6s;"></div>
<div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 30%; animation-delay: 0.7s;"></div>
<div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 15%; animation-delay: 0.8s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 65%; animation-delay: 0.9s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 75%; animation-delay: 1s;"></div>
<div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 45%; animation-delay: 1.1s;"></div>
<div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 25%; animation-delay: 1.2s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 85%; animation-delay: 1.3s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 55%; animation-delay: 1.4s;"></div>
<div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 35%; animation-delay: 1.5s;"></div>
<div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 10%; animation-delay: 1.6s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 95%; animation-delay: 1.7s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 50%; animation-delay: 1.8s;"></div>
<div class="w-2 md:w-3 bg-fuchsia-500 dark:bg-fuchsia-400 rounded-t-sm animate-rise" style="height: 70%; animation-delay: 1.9s;"></div>
<div class="w-2 md:w-3 bg-red-500 dark:bg-red-400 rounded-t-sm animate-rise" style="height: 30%; animation-delay: 2s;"></div>
<div class="w-2 md:w-3 bg-lime-500 dark:bg-lime-400 rounded-t-sm animate-rise" style="height: 80%; animation-delay: 2.1s;"></div>
</div>
</div>
<p class="text-xs text-center text-gray-500 dark:text-gray-400 mt-2">Scroll to see more days</p>
</div>
</div>
</div>
<!-- Right Section: Booking Summary & User Info -->
<div class="lg:col-span-1 flex flex-col space-y-8">
<!-- Booking Summary -->
<div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-xl border border-violet-100 dark:border-gray-600 relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-fuchsia-400/20 to-cyan-400/20 dark:from-fuchsia-700/20 dark:to-cyan-700/20 opacity-30"></div>
<h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400 relative z-10">Your Booking Summary</h3>
<div class="space-y-4 relative z-10">
<div class="flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-300 font-medium">Service:</span>
<span class="text-gray-900 dark:text-gray-100 font-semibold">Premium Consultation</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-300 font-medium">Date:</span>
<span class="text-gray-900 dark:text-gray-100 font-semibold text-fuchsia-600 dark:text-cyan-300">Oct 9, 2023</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-300 font-medium">Time:</span>
<span class="text-gray-900 dark:text-gray-100 font-semibold text-fuchsia-600 dark:text-cyan-300">01:00 PM</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-300 font-medium">Duration:</span>
<span class="text-gray-900 dark:text-gray-100 font-semibold">60 minutes</span>
</div>
<div class="flex justify-between mb-4 pt-4 border-t border-violet-200 dark:border-gray-600">
<span class="text-xl font-bold text-gray-900 dark:text-gray-100">Total:</span>
<span class="text-xl font-bold text-indigo-700 dark:text-lime-400">$120.00</span>
</div>
</div>
<button class="w-full flex items-center justify-center py-3 px-6 bg-gradient-to-r from-fuchsia-500 to-cyan-500 text-white font-extrabold rounded-lg shadow-lg hover:from-fuchsia-600 hover:to-cyan-600 focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-cyan-600 transform transition-all duration-300 ease-out sm:text-lg lg:text-xl relative overflow-hidden group">
<span class="relative z-10">Confirm Booking</span>
<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
<svg class="ml-2 w-6 h-6 text-white absolute right-4 opacity-0 group-hover:opacity-100 translate-x-4 group-hover:translate-x-0 transition-all duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</div>
<!-- Consultant/Service Provider Info -->
<div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
<h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Your Consultant</h3>
<div class="flex items-center space-x-4">
<img class="w-20 h-20 rounded-full object-cover border-4 border-fuchsia-400 dark:border-cyan-500 shadow-md" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Consultant John Doe">
<div>
<p class="text-xl font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Senior Business Analyst</p>
<div class="flex items-center mt-1 text-sm text-gray-500 dark:text-gray-400">
<svg class="w-4 h-4 mr-1 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
4.9 (245 reviews)
</div>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mt-4 text-sm">John specializes in digital transformation and has helped numerous clients achieve their strategic goals.</p>
</div>
<!-- Customer Support Card -->
<div class="bg-violet-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-violet-100 dark:border-gray-600">
<h3 class="text-2xl font-bold mb-4 text-violet-700 dark:text-cyan-400">Need Help?</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">Our support team is ready to assist you with any questions or issues.</p>
<a href="#" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-indigo-500 to-blue-500 text-white font-semibold rounded-md shadow hover:from-indigo-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-blue-400 transition-all duration-300">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
Contact Support
</a>
</div>
</div>
</div>
</div>
</div>
<style>
/* Adding a simple bounce/rise animation for chart bars */
@keyframes rise {
0% { transform: scaleY(0); opacity: 0; }
100% { transform: scaleY(1); opacity: 1; }
}
.animate-rise {
animation: rise 0.5s ease-out forwards;
transform-origin: bottom;
}
/* Custom focus/active state for selected date */
.selected-date:focus-within .ring-2, .selected-date:hover .ring-2 {
transform: scale(1.05);
opacity: 1;
}
</style>관련 구성 요소
데이터 시각화 구성 요소
80년대와 90년대에서 영감을 받은 레트로/빈티지 미학으로 디자인된 반응형 데이터 시각화 구성 요소로, 어두운 테마를 지원하고 자리 표시자 이미지를 사용합니다.
Data Visualization Components 구성 요소
소셜 미디어를 위한 레트로 빈티지 데이터 시각화 구성 요소로, 보색과 적당한 복잡성을 특징으로 합니다. 반응형이며 Tailwind CSS를 사용하여 다크 모드를 지원합니다.
Art Deco Data Visualization 구성 요소
컨설팅 서비스를 위한 복잡하고 반응이 빠른 아르데코 스타일의 데이터 시각화 구성 요소로, 기하학적 패턴과 고급스러운 보라색/보라색 색 구성표를 특징으로 합니다. 다크 모드 지원이 포함됩니다.