검색 구성 요소

카테고리

탭

동일한 영역 내에서 다른 콘텐츠 간 전환

Luxury_Tabs_Component

마켓플레이스에서 사용할 수 있도록 설계된 단순하고 우아하며 반응이 빠른 탭 구성 요소로, 보색 구성표와 다크 모드 지원으로 고급스러움/프리미엄 미학을 특징으로 합니다.

                <div class="p-4 dark:bg-gray-900 bg-white min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-xl overflow-hidden">
    <div class="flex border-b border-gray-200 dark:border-gray-700 p-2">
      <button class="flex-1 px-4 py-3 text-lg font-medium text-purple-700 dark:text-purple-400 border-b-2 border-purple-700 dark:border-purple-400 transition-colors duration-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none">
        <span class="block">New Arrivals</span>
      </button>
      <button class="flex-1 px-4 py-3 text-lg font-medium text-gray-600 dark:text-gray-300 border-b-2 border-transparent transition-colors duration-300 hover:text-purple-700 dark:hover:text-purple-400 hover:border-purple-700/50 dark:hover:border-purple-400/50 focus:outline-none">
        <span class="block">Best Sellers</span>
      </button>
      <button class="flex-1 px-4 py-3 text-lg font-medium text-gray-600 dark:text-gray-300 border-b-2 border-transparent transition-colors duration-300 hover:text-purple-700 dark:hover:text-purple-400 hover:border-purple-700/50 dark:hover:border-purple-400/50 focus:outline-none">
        <span class="block">On Sale</span>
      </button>
    </div>

    <div class="p-6 md:p-8">
      <!-- Tab Content 1: New Arrivals -->
      <div class="space-y-6">
        <h2 class="text-3xl font-serif text-gray-900 dark:text-gray-100 mb-4">Discover Our Latest Collection</h2>
        <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
          Explore hand-picked items from top sellers, meticulously selected for their quality and unique appeal. Elevate your style with our exquisite new arrivals.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/item1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Elegant Leather Bag</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$299.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Handcrafted with premium leather.</p>
            </div>
          </div>
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/item2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Artisan Silver Necklace</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$149.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Unique design, pure sterling silver.</p>
            </div>
          </div>
        </div>
        <div class="md:flex items-center justify-between py-4 border-t border-gray-200 dark:border-gray-700 mt-6">
            <div class="flex -space-x-2 overflow-hidden mb-4 md:mb-0 justify-center md:justify-start">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Customer Avatar">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Customer Avatar">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Customer Avatar">
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-400 text-center md:text-right">Trusted by over 10,000 discerning customers.</p>
        </div>
      </div>

      <!-- Tab Content 2: Best Sellers (hidden by default, for demonstration) -->
      <!-- Add 'hidden' class to hide, remove to show -->
      <!-- <div class="hidden space-y-6">
        <h2 class="text-3xl font-serif text-gray-900 dark:text-gray-100 mb-4">Our Most Popular Choices</h2>
        <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
          See what everyone else is loving! These items consistently receive top ratings and fly off our shelves. Don't miss out on these customer favorites.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/best1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Vintage Swiss Watch</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$899.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Timeless elegance, precise mechanics.</p>
            </div>
          </div>
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/best2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Silk Scarf Collection</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$75.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Luxurious feel, vibrant patterns.</p>
            </div>
          </div>
        </div>
      </div> -->

      <!-- Tab Content 3: On Sale (hidden by default, for demonstration) -->
      <!-- <div class="hidden space-y-6">
        <h2 class="text-3xl font-serif text-gray-900 dark:text-gray-100 mb-4">Limited-Time Offers</h2>
        <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
          Grab these incredible deals before they're gone! Premium items at unbeatable prices, available for a short period only.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/sale1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Designer Handbag</h3>
              <p class="text-gray-500 dark:text-gray-400 line-through text-md">$450.00</p>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$225.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">50% off! Limited stock.</p>
            </div>
          </div>
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/sale2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Luxury Scented Candle Set</h3>
              <p class="text-gray-500 dark:text-gray-400 line-through text-md">$90.00</p>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$60.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">30% off! Perfect gift.</p>
            </div>
          </div>
        </div>
      </div> -->

    </div>
  </div>
</div>

Industrial_Monochromatic_Tabs_Component_Booking_Reservation

산업적, 단색 미학을 가진 단순하고 반응이 빠른 탭 구성 요소로, 예약 및 예약 시스템을 위해 설계되었습니다. 다크 모드를 지원하며 원자재와 노출된 요소를 사용하여 실용주의적인 매력을 선사합니다.

열다 미리 보기

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen flex items-start justify-center">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="flex border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
      <input type="radio" name="tab" id="tab1" class="hidden" checked>
      <label for="tab1" class="flex-1 text-center py-4 px-6 text-sm sm:text-base font-semibold uppercase tracking-wide cursor-pointer select-none border-r border-gray-200 dark:border-gray-700 transition-colors duration-200 
                    text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 
                    peer-checked:text-gray-900 peer-checked:dark:text-white peer-checked:bg-gray-200 peer-checked:dark:bg-gray-900 peer-checked:border-b-2 peer-checked:border-gray-900 peer-checked:dark:border-gray-100 peer-active:outline-none focus:outline-none">
        Appointment
      </label>
      <input type="radio" name="tab" id="tab2" class="hidden">
      <label for="tab2" class="flex-1 text-center py-4 px-6 text-sm sm:text-base font-semibold uppercase tracking-wide cursor-pointer select-none border-r border-gray-200 dark:border-gray-700 transition-colors duration-200 
                    text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 
                    peer-checked:text-gray-900 peer-checked:dark:text-white peer-checked:bg-gray-200 peer-checked:dark:bg-gray-900 peer-checked:border-b-2 peer-checked:border-gray-900 peer-checked:dark:border-gray-100 peer-active:outline-none focus:outline-none">
        Reservation
      </label>
      <input type="radio" name="tab" id="tab3" class="hidden">
      <label for="tab3" class="flex-1 text-center py-4 px-6 text-sm sm:text-base font-semibold uppercase tracking-wide cursor-pointer select-none transition-colors duration-200 
                    text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 
                    peer-checked:text-gray-900 peer-checked:dark:text-white peer-checked:bg-gray-200 peer-checked:dark:bg-gray-900 peer-checked:border-b-2 peer-checked:border-gray-900 peer-checked:dark:border-gray-100 peer-active:outline-none focus:outline-none">
        History
      </label>
    </div>

    <div class="p-6 sm:p-8">
      <!-- Tab Content 1: Appointment -->
      <div id="content1" class="tab-content" data-tab="tab1">
        <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100">Schedule Your Appointment</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Please select a service, date, and time for your appointment. Our team will confirm your booking within 24 hours.</p>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label for="service" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Service Type</label>
            <select id="service" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
              <option value="">Select a Service</option>
              <option value="consultation">Technical Consultation</option>
              <option value="maintenance">Equipment Maintenance</option>
              <option value="installation">New System Installation</option>
              <option value="repair">Emergency Repair</option>
            </select>
          </div>
          <div>
            <label for="date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Preferred Date</label>
            <input type="date" id="date" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
          </div>
          <div>
            <label for="time" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Preferred Time Slot</label>
            <input type="time" id="time" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
          </div>
          <div>
            <label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Additional Notes (Optional)</label>
            <textarea id="notes" rows="3" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none resize-y"></textarea>
          </div>
        </div>
        <button class="mt-8 w-full py-3 px-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-semibold rounded-md shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">Book Appointment</button>
      </div>

      <!-- Tab Content 2: Reservation -->
      <div id="content2" class="tab-content hidden" data-tab="tab2">
        <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100">Make a Resource Reservation</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Reserve our specialized equipment or facilities. Provide details about your project to ensure availability and suitability.</p>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label for="resource" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Resource Type</label>
            <select id="resource" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
              <option value="">Select a Resource</option>
              <option value="lab">Testing Lab Area</option>
              <option value="equipment">Heavy Lifting Equipment</option>
              <option value="conference">Conference Room 1</option>
              <option value="workshop">Large Workshop Space</option>
            </select>
          </div>
          <div>
            <label for="start-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Start Date</label>
            <input type="date" id="start-date" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
          </div>
          <div>
            <label for="end-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">End Date</label>
            <input type="date" id="end-date" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
          </div>
          <div>
            <label for="project-details" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Project Details</label>
            <textarea id="project-details" rows="3" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none resize-y"></textarea>
          </div>
        </div>
        <button class="mt-8 w-full py-3 px-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-semibold rounded-md shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">Submit Reservation</button>
      </div>

      <!-- Tab Content 3: History -->
      <div id="content3" class="tab-content hidden" data-tab="tab3">
        <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100">Your Booking History</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Review your past appointments and reservations. You can also cancel or reschedule upcoming bookings here.</p>
        
        <div class="space-y-4">
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-200 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start sm:items-center">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100">Equipment Maintenance</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Date: 2023-10-26, Time: 10:00 AM</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Status: <span class="text-green-600 dark:text-green-400 font-medium">Confirmed</span></p>
            </div>
            <div class="mt-3 sm:mt-0 flex space-x-2">
              <button class="px-4 py-2 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Details</button>
              <button class="px-4 py-2 text-sm bg-red-600 text-white rounded-md hover:bg-red-700 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">Cancel</button>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-200 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start sm:items-center">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100">Testing Lab Area Reservation</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">From: 2023-10-20 to 2023-10-22</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Status: <span class="text-blue-600 dark:text-blue-400 font-medium">Completed</span></p>
            </div>
            <div class="mt-3 sm:mt-0 flex space-x-2">
              <button class="px-4 py-2 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Details</button>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-200 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start sm:items-center">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100">Emergency Repair Service</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Date: 2023-09-15, Time: 02:30 PM</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Status: <span class="text-red-600 dark:text-red-400 font-medium">Cancelled</span></p>
            </div>
            <div class="mt-3 sm:mt-0 flex space-x-2">
              <button class="px-4 py-2 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Details</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is a workaround for pure HTML/CSS tab functionality using radio buttons */
  /* In a real application, JavaScript would be used for better accessibility and dynamic content */
  .tab-content {
    display: none;
  }
  
  #tab1:checked ~ .flex + .p-6 #content1,
  #tab2:checked ~ .flex + .p-6 #content2,
  #tab3:checked ~ .flex + .p-6 #content3 {
    display: block;
  }

  /* Styles for the labels to act as interactive tabs */
  #tab1:checked + label {
    background-color: var(--checked-bg-color-light, #e5e7eb) !important; /* gray-200 */
    border-bottom: 2px solid var(--checked-border-color-light, #1f2937) !important; /* gray-900 */
    color: var(--checked-text-color-light, #1f2937) !important; /* gray-900 */
  }
  .dark #tab1:checked + label {
    background-color: var(--checked-bg-color-dark, #111827) !important; /* gray-900 */
    border-bottom: 2px solid var(--checked-border-color-dark, #f9fafb) !important; /* gray-100 */
    color: var(--checked-text-color-dark, #f9fafb) !important; /* white */
  }

  #tab2:checked + label {
    background-color: var(--checked-bg-color-light, #e5e7eb) !important;
    border-bottom: 2px solid var(--checked-border-color-light, #1f2937) !important;
    color: var(--checked-text-color-light, #1f2937) !important;
  }
  .dark #tab2:checked + label {
    background-color: var(--checked-bg-color-dark, #111827) !important;
    border-bottom: 2px solid var(--checked-border-color-dark, #f9fafb) !important;
    color: var(--checked-text-color-dark, #f9fafb) !important;
  }

  #tab3:checked + label {
    background-color: var(--checked-bg-color-light, #e5e7eb) !important;
    border-bottom: 2px solid var(--checked-border-color-light, #1f2937) !important;
    color: var(--checked-text-color-light, #1f2937) !important;
  }
  .dark #tab3:checked + label {
    background-color: var(--checked-bg-color-dark, #111827) !important;
    border-bottom: 2px solid var(--checked-border-color-dark, #f9fafb) !important;
    color: var(--checked-text-color-dark, #f9fafb) !important;
  }
</style>

Manufacturing_Industrial_Grayscale_Paper_Tabs

종이/인쇄에서 영감을 받은 디자인과 회색조 색 구성표를 갖춘 간단하고 반응이 빠른 탭 구성 요소로 제조 및 산업 응용 분야에 적합합니다. 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <div class="font-sans bg-gray-100 text-gray-800 p-4 sm:p-6 md:p-8 dark:bg-gray-900 dark:text-gray-200 min-h-screen">

  <div class="max-w-4xl mx-auto bg-white shadow-xl rounded-lg overflow-hidden dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
    
    <div class="border-b border-gray-200 dark:border-gray-700 px-4 pt-4 sm:px-6 sm:pt-6 md:px-8 md:pt-8">
      <nav class="-mb-px flex space-x-4 sm:space-x-6 md:space-x-8 overflow-x-auto pb-4 custom-scrollbar" aria-label="Tabs">
        <a href="#" class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm sm:text-base text-gray-500 hover:text-gray-700 border-transparent hover:border-gray-300 transition-colors duration-200 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-600 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 focus:ring-offset-white dark:focus:ring-offset-gray-800" aria-current="page">
          Production Overview
        </a>
        <a href="#" class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm sm:text-base text-gray-700 border-gray-500 dark:text-gray-200 dark:border-gray-400 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 focus:ring-offset-white dark:focus:ring-offset-gray-800">
          Inventory Status
        </a>
        <a href="#" class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm sm:text-base text-gray-500 hover:text-gray-700 border-transparent hover:border-gray-300 transition-colors duration-200 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-600 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 focus:ring-offset-white dark:focus:ring-offset-gray-800">
          Quality Control
        </a>
        <a href="#" class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm sm:text-base text-gray-500 hover:text-gray-700 border-transparent hover:border-gray-300 transition-colors duration-200 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-600 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 focus:ring-offset-white dark:focus:ring-offset-gray-800">
          Maintenance Logs
        </a>
      </nav>
    </div>

    <div class="p-4 sm:p-6 md:p-8">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 dark:text-gray-100">Inventory Status</h2>
      <div class="prose prose-sm sm:prose dark:prose-invert max-w-none">
        <p class="mb-4 text-gray-700 dark:text-gray-300">Current stock levels and replenishment forecasts are critical for uninterrupted manufacturing processes. Below is a summary of key components and finished goods in our warehouses.</p>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
          <div class="bg-gray-50 p-4 rounded-md border border-gray-200 dark:bg-gray-700 dark:border-gray-600">
            <p class="text-lg font-semibold text-gray-900 dark:text-gray-100">Raw Materials</p>
            <ul class="list-none p-0 mt-2 space-y-1 text-gray-700 dark:text-gray-300">
                <li>Steel Coils: <span class="font-bold">1200 tons</span> (Capacity: 1500 tons)</li>
                <li>Aluminum Sheets: <span class="font-bold">850 units</span> (Capacity: 1000 units)</li>
                <li>Circuit Boards: <span class="font-bold">3500 units</span> (Capacity: 4000 units)</li>
            </ul>
          </div>
          <div class="bg-gray-50 p-4 rounded-md border border-gray-200 dark:bg-gray-700 dark:border-gray-600">
            <p class="text-lg font-semibold text-gray-900 dark:text-gray-100">Finished Products</p>
            <ul class="list-none p-0 mt-2 space-y-1 text-gray-700 dark:text-gray-300">
                <li>Industrial Pumps (Model X): <span class="font-bold">45 units</span> (Order: 50)</li>
                <li>Precision Robotics (Series Y): <span class="font-bold">18 units</span> (Order: 20)</li>
                <li>Heavy Duty Connectors: <span class="font-bold">980 units</span> (Order: 1000)</li>
            </ul>
          </div>
        </div>

        <figure class="mt-6 mb-4">
          <img src="https://picsum.photos/800/450?random=10" alt="Industrial inventory warehouse" class="w-full h-auto rounded-lg shadow-md border border-gray-200 dark:border-gray-700 object-cover">
          <figcaption class="text-sm text-gray-500 mt-2 text-center dark:text-gray-400">Visual representation of current inventory levels in automated warehouse system.</figcaption>
        </figure>

        <h3 class="text-lg sm:text-xl font-semibold mt-6 mb-2 dark:text-gray-100">Next Delivery Schedule</h3>
        <ul class="list-disc list-inside space-y-1 text-gray-700 dark:text-gray-300">
          <li>Steel Coils: <span class="font-semibold">Expected Oct 25, 2023</span> from Supplier A (PO# 12345)</li>
          <li>Circuit Boards: <span class="font-semibold">Expected Oct 28, 2023</span> from Supplier B (PO# 67890)</li>
          <li>Packaging Material: <span class="font-semibold">Expected Nov 01, 2023</span> from Supplier C (PO# 54321)</li>
        </ul>

      </div>
    </div>

  </div>

  <style>
  /* Custom scrollbar for better appearance */
  .custom-scrollbar::-webkit-scrollbar {
    height: 6px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #e0e0e0; /* Light gray for scrollbar track */
    border-radius: 3px;
  }
  .dark .custom-scrollbar::-webkit-scrollbar-track {
    background: #4a4a4a; /* Darker gray for dark mode */
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #a0a0a0; /* Medium gray for scrollbar thumb */
    border-radius: 3px;
  }
  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #6b6b6b; /* Slightly lighter gray for dark mode */
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #888; /* Darker gray on hover */
  }
  .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #808080;
  }
  </style>
</div>

산업VibrantTabs

복잡하고 생동감 넘치는 산업 테마의 탭 구성 요소로, 다중 공급업체 마켓플레이스에 적합하며, 노출된 요소, 원료 미학 및 높은 채도의 색상을 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다 미리 보기

                <div class="relative bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-8 lg:p-12 font-sans overflow-hidden">

  <!-- Background Grids/Patterns for Industrial Feel -->
  <div class="absolute inset-0 z-0 overflow-hidden opacity-5 dark:opacity-10">
    <div class="absolute -top-1/4 -left-1/4 w-1/2 h-1/2 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob dark:from-sky-700 dark:to-blue-900"></div>
    <div class="absolute -bottom-1/4 -right-1/4 w-1/2 h-1/2 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000 dark:from-fuchsia-700 dark:to-pink-900"></div>
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1/4 h-1/4 bg-gradient-to-br from-orange-400 to-red-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000 dark:from-amber-600 dark:to-red-800"></div>
  </div>
  <div class="absolute inset-0 z-0 pointer-events-none opacity-5 dark:opacity-10">
    <svg class="absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="grid-pattern" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 L 0 40" fill="none" stroke="#a0a0a0" stroke-width="0.5" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#grid-pattern)" />
    </svg>
  </div>
  <!-- End Background -->

  <div class="relative z-10 max-w-7xl mx-auto bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-xl rounded-lg p-4 sm:p-6 lg:p-8">

    <!-- Component Header -->
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-4 sm:mb-6 leading-tight tracking-tight drop-shadow-lg">
      <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-cyan-400 dark:to-fuchsia-500">Marketplace Insights</span>
      <span class="block text-base sm:text-lg font-medium text-gray-600 dark:text-gray-400 mt-2 sm:mt-4">Manage your vendor activities and product listings.</span>
    </h2>

    <!-- Tabs Navigation -->
    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 mb-6 sm:mb-8 border-b-2 border-dashed border-gray-300 dark:border-gray-700 pb-4 overflow-x-auto scrollbar-hidden">

      <button class="flex-shrink-0 px-5 py-3 rounded-xl text-lg font-bold transition-all duration-300 ease-in-out
                     bg-blue-600 text-white shadow-lg shadow-blue-500/50 dark:bg-sky-500 dark:shadow-sky-500/50
                     hover:bg-blue-700 dark:hover:bg-sky-600 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-sky-300
                     border-2 border-blue-700 dark:border-sky-600 whitespace-nowrap">
        <i class="fas fa-boxes mr-2"></i> Product Catalog
      </button>

      <button class="flex-shrink-0 px-5 py-3 rounded-xl text-lg font-medium transition-all duration-300 ease-in-out
                     text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700
                     hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600
                     border-2 border-gray-300 dark:border-gray-600 whitespace-nowrap">
        <i class="fas fa-shipping-fast mr-2"></i> Order Management
      </button>

      <button class="flex-shrink-0 px-5 py-3 rounded-xl text-lg font-medium transition-all duration-300 ease-in-out
                     text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700
                     hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600
                     border-2 border-gray-300 dark:border-gray-600 whitespace-nowrap">
        <i class="fas fa-chart-line mr-2"></i> Sales Analytics
      </button>

      <button class="flex-shrink-0 px-5 py-3 rounded-xl text-lg font-medium transition-all duration-300 ease-in-out
                     text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700
                     hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600
                     border-2 border-gray-300 dark:border-gray-600 whitespace-nowrap">
        <i class="fas fa-user-friends mr-2"></i> Vendor Network
      </button>

    </div>

    <!-- Tabs Content (Active Tab: Product Catalog) -->
    <div>
      <!-- Product Catalog Tab Content -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

        <!-- Product Card 1 -->
        <div class="bg-white dark:bg-gray-900 border border-t-4 border-l-4 border-gray-200 dark:border-gray-700 border-t-red-500 dark:border-t-rose-600 rounded-lg shadow-md p-5 pb- lg:p-6 relative overflow-hidden group">
          <div class="absolute -top-3 -right-3 w-16 h-16 bg-red-500 dark:bg-rose-600 transform rotate-45 group-hover:scale-110 transition-transform duration-300 ease-out"></div>
          <p class="absolute top-2 right-2 text-white text-xs font-bold transform rotate-45 z-10">HOT</p>

            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/id/1018/80/80" alt="Product 1" class="w-20 h-20 object-cover rounded-md border-2 border-red-400 dark:border-rose-500 mr-4 shadow-sm">
                <div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">Heavy Duty Wrench Set</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">SKU: HDWS-V001</p>
                </div>
            </div>
            <div class="text-gray-700 dark:text-gray-300 text-sm mb-4">
                <p class="mb-2"><strong class="text-gray-900 dark:text-white">Vendor:</strong> <span class="text-blue-600 dark:text-sky-400 font-semibold">ToolCrafters Inc.</span></p>
                <p class="mb-2"><strong class="text-gray-900 dark:text-white">Price:</strong> <span class="text-green-600 dark:text-green-400 font-bold text-lg">$129.99</span></p>
                <p class="flex items-center text-yellow-500"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i> <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">(4.5/5)</span></p>
            </div>
            <button class="w-full bg-red-600 dark:bg-rose-700 text-white py-2 rounded-lg font-semibold hover:bg-red-700 dark:hover:bg-rose-800 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-red-400 dark:focus:ring-rose-500 border-b-4 border-red-800 dark:border-rose-900 shadow-md">
              <i class="fas fa-eye mr-2"></i> View Details
            </button>
        </div>

        <!-- Product Card 2 -->
        <div class="bg-white dark:bg-gray-900 border border-t-4 border-l-4 border-gray-200 dark:border-gray-700 border-t-blue-500 dark:border-t-sky-600 rounded-lg shadow-md p-5 lg:p-6 relative overflow-hidden group">
          <div class="absolute -top-3 -right-3 w-16 h-16 bg-blue-500 dark:bg-sky-600 transform rotate-45 group-hover:scale-110 transition-transform duration-300 ease-out"></div>
          <p class="absolute top-2 right-2 text-white text-xs font-bold transform rotate-45 z-10">SALE</p>

            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/id/201/80/80" alt="Product 2" class="w-20 h-20 object-cover rounded-md border-2 border-blue-400 dark:border-sky-500 mr-4 shadow-sm">
                <div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">Automated Robotic Arm</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">SKU: ARA-ELT005</p>
                </div>
            </div>
            <div class="text-gray-700 dark:text-gray-300 text-sm mb-4">
                <p class="mb-2"><strong class="text-gray-900 dark:text-white">Vendor:</strong> <span class="text-purple-600 dark:text-fuchsia-400 font-semibold">MechWorks Global</span></p>
                <p class="mb-2"><strong class="text-gray-900 dark:text-white">Price:</strong> <span class="text-green-600 dark:text-green-400 font-bold text-lg">$2,499.00</span> <span class="text-gray-500 line-through ml-2">$2,999.00</span></p>
                <p class="flex items-center text-yellow-500"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i> <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">(4/5)</span></p>
            </div>
            <button class="w-full bg-blue-600 dark:bg-sky-700 text-white py-2 rounded-lg font-semibold hover:bg-blue-700 dark:hover:bg-sky-800 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-sky-500 border-b-4 border-blue-800 dark:border-sky-900 shadow-md">
              <i class="fas fa-shopping-cart mr-2"></i> Add to Cart
            </button>
        </div>

        <!-- Product Card 3 -->
        <div class="bg-white dark:bg-gray-900 border border-t-4 border-l-4 border-gray-200 dark:border-gray-700 border-t-green-500 dark:border-t-emerald-600 rounded-lg shadow-md p-5 lg:p-6 relative overflow-hidden group">
          <div class="absolute -top-3 -right-3 w-16 h-16 bg-green-500 dark:bg-emerald-600 transform rotate-45 group-hover:scale-110 transition-transform duration-300 ease-out"></div>
          <p class="absolute top-2 right-2 text-white text-xs font-bold transform rotate-45 z-10">NEW</p>

            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/id/237/80/80" alt="Product 3" class="w-20 h-20 object-cover rounded-md border-2 border-green-400 dark:border-emerald-500 mr-4 shadow-sm">
                <div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">High-Precision Lathe Machine</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">SKU: HPLM-XYZ007</p>
                </div>
            </div>
            <div class="text-gray-700 dark:text-gray-300 text-sm mb-4">
                <p class="mb-2"><strong class="text-gray-900 dark:text-white">Vendor:</strong> <span class="text-orange-600 dark:text-amber-400 font-semibold">Precision Tools Co.</span></p>
                <p class="mb-2"><strong class="text-gray-900 dark:text-white">Price:</strong> <span class="text-green-600 dark:text-green-400 font-bold text-lg">$8,750.00</span></p>
                <p class="flex items-center text-yellow-500"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">(5/5)</span></p>
            </div>
            <button class="w-full bg-green-600 dark:bg-emerald-700 text-white py-2 rounded-lg font-semibold hover:bg-green-700 dark:hover:bg-emerald-800 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-green-400 dark:focus:ring-emerald-500 border-b-4 border-green-800 dark:border-emerald-900 shadow-md">
              <i class="fas fa-arrow-alt-circle-right mr-2"></i> Learn More
            </button>
        </div>

      </div>

      <!-- Call to Action below cards -->
      <div class="text-center mt-8 sm:mt-12">
        <button class="px-8 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold text-lg rounded-full shadow-lg shadow-purple-500/50 dark:from-fuchsia-600 dark:to-rose-700 dark:shadow-fuchsia-500/50
                       hover:from-purple-700 hover:to-pink-700 dark:hover:from-fuchsia-700 dark:hover:to-rose-800 transition-all duration-300 ease-in-out
                       focus:outline-none focus:ring-4 focus:ring-purple-400 dark:focus:ring-fuchsia-300 border-2 border-purple-800 dark:border-fuchsia-900 animate-pulse">
          <i class="fas fa-plus-circle mr-2"></i> Explore All 10,000+ Products
        </button>
      </div>


    </div>

  </div>

  <!-- Add Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0V4LLanw2qksTZI9xQpQAcSNasj+pXVjrSPmGz0Y15e7p/f0+asX5RFA5Bw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <!-- Tailwind JIT classes for animations and dark mode (if not configured globally) -->
  <style>
    @keyframes blob {
      0% {
        transform: translate(0px, 0px) scale(1);
      }
      33% {
        transform: translate(30px, -50px) scale(1.1);
      }
      66% {
        transform: translate(-20px, 20px) scale(0.9);
      }
      100% {
        transform: translate(0px, 0px) scale(1);
      }
    }
    .animate-blob {
      animation: blob 7s infinite cubic-bezier(0.6, 0.01, 0.3, 0.9);
    }
    .animation-delay-2000 {
      animation-delay: 2s;
    }
    .animation-delay-4000 {
      animation-delay: 4s;
    }
    .scrollbar-hidden::-webkit-scrollbar {
      display: none;
    }
    .scrollbar-hidden {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
    }
  </style>


</div>

아르 데코 뉴스 탭 구성 요소

뉴스 및 저널리즘 웹 사이트를 위해 설계된 복잡하고 반응이 빠르며 고급스러운 '아르 데코' 스타일 탭 구성 요소로, 기하학적 패턴, 풍부한 아날로그 색상 및 다크 모드 지원을 특징으로 합니다. 콘텐츠 탐색을 위한 여러 대화형 요소를 제공합니다.

열다 미리 보기

                <div class="font-sans bg-amber-50 dark:bg-zinc-900 min-h-screen p-4 sm:p-8 md:p-12 transition-colors duration-300">
  <div class="max-w-7xl mx-auto bg-amber-100 dark:bg-zinc-800 shadow-xl rounded-lg overflow-hidden border-2 border-amber-300 dark:border-zinc-700 relative">
    <!-- Art Deco Top Border -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-gradient-to-r from-amber-400 to-yellow-600 dark:from-sky-700 dark:to-cyan-900 clip-path-polygon-border"></div>
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-r from-amber-400 to-yellow-600 dark:from-sky-700 dark:to-cyan-900 clip-path-polygon-border-inverted"></div>

    <!-- Main Content Area -->
    <div class="p-6 md:p-10 lg:p-12 relative z-10">
      <h2 class="text-4xl sm:text-5xl md:text-6xl text-center font-bold mb-8 md:mb-12 text-zinc-800 dark:text-amber-50 drop-shadow-lg font-serif tracking-wide leading-tight">
        <span class="block">The Daily Dispatch</span>
        <span class="block text-2xl sm:text-3xl md:text-4xl text-amber-600 dark:text-sky-500 mt-2 font-normal">Global News at Your Fingertips</span>
      </h2>

      <!-- Tabs Navigation -->
      <div class="flex flex-wrap justify-center mb-8 border-b-4 border-amber-300 dark:border-zinc-700 bg-amber-200 dark:bg-zinc-700 rounded-t-lg shadow-inner">
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 first:rounded-tl-lg last:rounded-tr-lg active-tab transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Headlines</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">World</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Business</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Tech</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Culture</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
      </div>

      <!-- Tab Content Area -->
      <div class="tab-content bg-amber-50 dark:bg-zinc-900 p-6 md:p-8 lg:p-10 rounded-b-lg border-2 border-amber-300 dark:border-zinc-700 shadow-lg">
        <!-- Headline Tab Content -->
        <div class="tab-pane active-pane">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

            <!-- News Card 1 -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border-2 border-amber-200 dark:border-zinc-700 group relative">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=1" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Revolutionary AI Breakthrough Achieves Human-Level Cognition</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Scientists at the Silicon Valley Institute announce a groundbreaking development in artificial intelligence, achieving unprecedented cognitive capabilities...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Technology</span>
                  <span>2 hours ago</span>
                </div>
              </div>
            </article>

            <!-- News Card 2 -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border-2 border-amber-200 dark:border-zinc-700 group relative">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=2" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Global Leaders Convene for Climate Emergency Summit</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Delegates from over 150 nations have gathered in Geneva to address the escalating climate crisis, proposing bold new targets and initiatives...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">World Affairs</span>
                  <span>5 hours ago</span>
                </div>
              </div>
            </article>

            <!-- News Card 3 -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border-2 border-amber-200 dark:border-zinc-700 group relative">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=3" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Art Market Boom: Rare Masterpiece Fetches Record Price</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">A previously unseen painting by a renowned Post-Impressionist artist sold for an astounding sum at Sotheby's, signaling a robust fine art market...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Culture</span>
                  <span>1 day ago</span>
                </div>
              </div>
            </article>

            <!-- News Card 4 (Hidden on small screens) -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden md:col-span-2 lg:col-span-1 border-2 border-amber-200 dark:border-zinc-700 group relative hidden md:block">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=4" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">New Economic Policies Aim to Boost Small Businesses</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Government unveils a comprehensive stimulus package, including tax breaks and grants, designed to support and foster growth among small and medium enterprises...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Business & Finance</span>
                  <span>Yesterday</span>
                </div>
              </div>
            </article>

            <!-- News Card 5 (Hidden on small screens) -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden md:col-span-2 lg:col-span-1 border-2 border-amber-200 dark:border-zinc-700 group relative hidden lg:block">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=5" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Exploration Mission Discovers Ancient Underwater City</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Deep-sea archaeologists have uncovered ruins of a vast civilization beneath the Pacific, rewriting history and sparking new theories...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Science & Discovery</span>
                  <span>2 days ago</span>
                </div>
              </div>
            </article>

             <!-- Large News Card (Featured Headline - visible on all screens) -->
             <article class="col-span-1 md:col-span-2 lg:col-span-3 bg-amber-200 dark:bg-zinc-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border-4 border-amber-400 dark:border-sky-600 group relative flex flex-col md:flex-row">
                <div class="absolute inset-0 bg-gradient-to-br from-gold-500/30 to-yellow-700/30 dark:from-cyan-600/30 dark:to-blue-800/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
                <img src="https://picsum.photos/800/600?random=6" alt="Feature News Image" class="w-full md:w-1/2 h-64 md:h-auto object-cover rounded-t-lg md:rounded-l-lg md:rounded-tr-none border-b-4 md:border-r-4 border-amber-400 dark:border-sky-600">
                <div class="p-6 md:p-8 lg:p-10 flex flex-col justify-center w-full md:w-1/2">
                  <h3 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-zinc-900 dark:text-amber-50 mb-4 leading-tight font-serif drop-shadow-md">
                    <a href="#" class="hover:text-amber-800 dark:hover:text-sky-300 transition-colors duration-200">Exclusive: Geopolitical Tensions Rise Amidst Unprecedented Diplomatic Shuffle</a>
                  </h3>
                  <p class="text-zinc-800 dark:text-zinc-100 text-lg mb-6 line-clamp-4 leading-relaxed">Our senior correspondents provide an in-depth analysis of the recent shifts in international relations, exploring the ripple effects across continents and the potential for a new global order. Exclusive insights from top diplomats and analysts reveal complex motivations and hidden agendas...</p>
                  <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between text-md text-amber-700 dark:text-sky-300 font-semibold">
                    <span class="mb-2 sm:mb-0">Featured Analysis</span>
                    <div class="flex items-center">
                      <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-amber-400 dark:border-sky-600">
                      <span>By Dr. Alistair Finch • 3 hours ago</span>
                    </div>
                  </div>
                </div>
              </article>

          </div>
        </div>

        <!-- Other Tab Contents (Hidden by default, for demonstration) -->
        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'World News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">European Union Reforms</h3>
              <p class="text-zinc-700 dark:text-zinc-300">New parliamentary decisions reshape the future of the European economy and social policies...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Middle East Peace Talks</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Renewed diplomatic efforts aim to broker a lasting peace agreement in the troubled region...</p>
            </article>
          </div>
        </div>

        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'Business News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Stock Market Volatility</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Analysts warn of impending corrections amid global economic uncertainties...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Tech Giant Acquisitions</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Major players in the tech industry are consolidating their power through strategic buyouts...</p>
            </article>
          </div>
        </div>

        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'Tech News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Quantum Computing Leaps</h3>
              <p class="text-zinc-700 dark:text-zinc-300">New advancements promise to revolutionize computation and data security...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">AI Ethics Debate</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Philosophers and engineers grapple with the moral implications of autonomous systems...</p>
            </article>
          </div>
        </div>

        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'Culture News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Emerging Art Scenes</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Underground art movements are gaining mainstream recognition in major cities...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Literary Awards Season</h3>
              <p class="text-zinc-700 dark:text-zinc-300">The annual celebration of literary excellence unveils unexpected winners...</p>
            </article>
          </div>
        </div>

      </div>

      <div class="text-center mt-8 md:mt-12 text-zinc-600 dark:text-zinc-400 text-sm">
        <p>&copy; 2023 The Daily Dispatch. All rights reserved. Designed with Art Deco flair.</p>
      </div>
    </div>
  </div>
</div>

<!-- Custom Styles for Art Deco Geometric Patterns -->
<style>
  .clip-path-polygon-border {
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
  }
  .clip-path-polygon-border-inverted {
    clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  }
  /* Dark mode specific adjustments for clip-path */
  .dark .clip-path-polygon-border {
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
  }
  .dark .clip-path-polygon-border-inverted {
    clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  }
</style>

<!-- Simple JS for tab functionality (as per instructions, only HTML and Tailwind, but functional tabs require JS) -->
<!-- For a real-world scenario, this JS would be external or inline if absolutely necessary. -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const tabButtons = document.querySelectorAll('.flex.flex-wrap button');
    const tabPanes = document.querySelectorAll('.tab-pane');

    tabButtons.forEach(button => {
      button.addEventListener('click', (event) => {
        // Remove active state from all buttons and panes
        tabButtons.forEach(btn => btn.classList.remove('active-tab'));
        tabPanes.forEach(pane => pane.classList.add('hidden'));

        // Add active state to the clicked button
        event.currentTarget.classList.add('active-tab');

        // Determine which tab content to show based on button index
        const index = Array.from(tabButtons).indexOf(event.currentTarget);
        if (tabPanes[index]) {
          tabPanes[index].classList.remove('hidden');
        }
      });
    });

    // Initialize first tab as active
    if (tabButtons.length > 0) {
      tabButtons[0].click();
    }
  });
</script>

Material Design Tabs 구성 요소

복잡하고 단색의 Material Design에서 영감을 받은 대시보드용 탭 구성 요소는 반응형 디자인, 다크 모드 지원 및 대화형 요소를 제공합니다. 그리드 기반 레이아웃과 미묘한 그림자 효과를 사용합니다.

열다 미리 보기

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">

    <!-- Tabs Header -->
    <div class="flex border-b border-gray-200 dark:border-gray-700 overflow-x-auto scrollbar-hide">
      <button class="flex-1 py-4 px-4 text-center text-sm sm:text-base font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:text-gray-900 focus:border-red-500 transition duration-300 ease-in-out whitespace-nowrap" id="tab-btn-overview">
        Overview
      </button>
      <button class="flex-1 py-4 px-4 text-center text-sm sm:text-base font-medium border-b-2 border-red-500 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 focus:outline-none focus:text-red-700 focus:border-red-600 transition duration-300 ease-in-out whitespace-nowrap" id="tab-btn-analytics">
        Analytics
      </button>
      <button class="flex-1 py-4 px-4 text-center text-sm sm:text-base font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:text-gray-900 focus:border-red-500 transition duration-300 ease-in-out whitespace-nowrap" id="tab-btn-reports">
        Reports
      </button>
      <button class="flex-1 py-4 px-4 text-center text-sm sm:text-base font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:text-gray-900 focus:border-red-500 transition duration-300 ease-in-out whitespace-nowrap" id="tab-btn-settings">
        Settings
      </button>
    </div>

    <!-- Tab Content Container -->
    <div class="p-4 sm:p-6 md:p-8 space-y-8">

      <!-- Analytics Tab Content (Active by default for demonstration) -->
      <div id="tab-content-analytics">
        <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Dashboard Analytics</h2>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

          <!-- Card 1: Total Sales -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-transform duration-300 hover:scale-105 hover:shadow-lg">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Total Sales</h3>
              <svg class="w-6 h-6 text-red-500" 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 12h-3m-6 0h-3m8-4zm0 16-5-5h-2.586a1 1 0 01-.707-.293L11.707 10.5M10 5L3 12h3m0 0l-3-3m5 3v5c0 1.105.895 2 2 2h4c1.105 0 2-.895 2-2v-5" />
              </svg>
            </div>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">$12,450</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">+12% from last month</p>
          </div>

          <!-- Card 2: New Users -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-transform duration-300 hover:scale-105 hover:shadow-lg">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">New Users</h3>
              <svg class="w-6 h-6 text-red-500" 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="M17 20h-5m-1.58-6.425a.86.86 0 011.66 0c0 .942-.51 1.764-1.29 2.193M11 11a4 4 0 100 8h2a4 4 0 100-8h-2zM9 11l4 4m0-4l-4 4" />
              </svg>
            </div>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">870</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">+5% from last week</p>
          </div>

          <!-- Card 3: Traffic Source -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-transform duration-300 hover:scale-105 hover:shadow-lg">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Traffic Source</h3>
              <svg class="w-6 h-6 text-red-500" 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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
              </svg>
            </div>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">Google Organic</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">65% of total traffic</p>
          </div>
        </div>

        <!-- Larger Chart Card -->
        <div class="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Sales Performance (Monthly)</h3>
          <img class="w-full h-auto rounded" src="https://picsum.photos/800/400?random=1" alt="Sales Performance Chart">
        </div>

        <!-- Recent Activity Table -->
        <div class="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 p-6 pb-0">Recent Activity</h3>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
              <thead class="bg-gray-50 dark:bg-gray-700">
                <tr>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Event</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">User</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Date</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
                </tr>
              </thead>
              <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">New order #1001</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10">
                        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                      </div>
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">John Doe</div>
                        <div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-26</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">Completed</span>
                  </td>
                </tr>
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Product view: 'Widget X'</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10">
                        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
                      </div>
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Jane Smith</div>
                        <div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-25</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">Viewed</span>
                  </td>
                </tr>
                 <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Login attempt failed</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10">
                        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/50.jpg" alt="">
                      </div>
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Peter Jones</div>
                        <div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-24</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">Failed</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

      </div>

       <!-- Overview Tab Content (Hidden by default, for demonstration) -->
      <div id="tab-content-overview" class="hidden">
        <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Company Overview</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          Welcome to your dashboard! Here you can find a quick summary of your key metrics and recent activities.
          This section provides a high-level view of your business performance, allowing you to gauge overall health at a glance.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Key Highlights</h3>
            <ul class="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400">
              <li><span class="font-medium text-gray-800 dark:text-gray-200">Revenue Last 30 Days:</span> <span class="text-green-600 dark:text-green-400">$50,000</span></li>
              <li><span class="font-medium text-gray-800 dark:text-gray-200">Active Customers:</span> <span class="text-red-600 dark:text-red-400">1,200</span></li>
              <li><span class="font-medium text-gray-800 dark:text-gray-200">New Signups This Month:</span> <span class="text-blue-600 dark:text-blue-400">150</span></li>
            </ul>
             <div class="mt-6">
              <img class="w-full h-48 sm:h-56 object-cover rounded" src="https://picsum.photos/400/250?random=2" alt="Overview Image">
            </div>
          </div>
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Quick Actions</h3>
            <ul class="space-y-3">
              <li>
                <button class="w-full text-left p-3 rounded-md bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-800/50 shadow-sm transition duration-200 flex items-center">
                  <svg class="w-5 h-5 mr-3" 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 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                  Create New Report
                </button>
              </li>
              <li>
                <button class="w-full text-left p-3 rounded-md bg-gray-50 dark:bg-gray-700/30 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600/50 shadow-sm transition duration-200 flex items-center">
                  <svg class="w-5 h-5 mr-3" 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 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                  View All Notifications
                </button>
              </li>
              <li>
                <button class="w-full text-left p-3 rounded-md bg-gray-50 dark:bg-gray-700/30 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600/50 shadow-sm transition duration-200 flex items-center">
                  <svg class="w-5 h-5 mr-3" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                  Adjust Settings
                </button>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Reports Tab Content (Hidden by default, for demonstration) -->
      <div id="tab-content-reports" class="hidden">
        <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Detailed Reports</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          Access a variety of advanced reports to gain deeper insights into your data. You can filter and export these reports.
        </p>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Sales by Region</h3>
            <img class="w-full h-48 sm:h-56 object-cover rounded mb-4" src="https://picsum.photos/400/250?random=3" alt="Sales by Region Chart">
            <p class="text-sm text-gray-600 dark:text-gray-400">Visualize sales performance across different geographical regions. Identify top-performing areas.</p>
            <button class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-800">
              <svg class="-ml-1 mr-2 h-5 w-5" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
              Download CSV
            </button>
          </div>
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Customer Demographics</h3>
            <img class="w-full h-48 sm:h-56 object-cover rounded mb-4" src="https://picsum.photos/400/250?random=4" alt="Customer Demographics Chart">
            <p class="text-sm text-gray-600 dark:text-gray-400">Understand your customer base better with detailed demographic breakdowns and engagement metrics.</p>
            <button class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-800">
              <svg class="-ml-1 mr-2 h-5 w-5" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
              Download PDF
            </button>
          </div>
        </div>
      </div>

      <!-- Settings Tab Content (Hidden by default, for demonstration) -->
      <div id="tab-content-settings" class="hidden">
        <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Account Settings</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          Manage your account preferences, notifications, and security settings here.
        </p>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 mb-6">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Profile Information</h3>
          <form class="space-y-4">
            <div>
              <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
              <input type="text" id="full-name" name="full-name" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100" value="John Doe">
            </div>
            <div>
              <label for="email-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
              <input type="email" id="email-address" name="email-address" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100" value="[email protected]">
            </div>
            <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-800">
              Save Changes
            </button>
          </form>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Notification Preferences</h3>
          <fieldset class="space-y-4">
            <legend class="sr-only">Notification Preferences</legend>
            <div class="relative flex items-start">
              <div class="flex items-center h-5 w-5">
                <input id="email-notifications" name="email-notifications" type="checkbox" checked class="focus:ring-red-500 h-4 w-4 text-red-600 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700 dark:checked:bg-red-600">
              </div>
              <div class="ml-3 text-sm">
                <label for="email-notifications" class="font-medium text-gray-700 dark:text-gray-300">Email Notifications</label>
                <p class="text-gray-500 dark:text-gray-400">Receive updates and announcements via email.</p>
              </div>
            </div>
            <div class="relative flex items-start">
              <div class="flex items-center h-5 w-5">
                <input id="sms-notifications" name="sms-notifications" type="checkbox" class="focus:ring-red-500 h-4 w-4 text-red-600 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700 dark:checked:bg-red-600">
              </div>
              <div class="ml-3 text-sm">
                <label for="sms-notifications" class="font-medium text-gray-700 dark:text-gray-300">SMS Notifications</label>
                <p class="text-gray-500 dark:text-gray-400">Get critical alerts on your mobile device.</p>
              </div>
            </div>
          </fieldset>
        </div>
      </div>

    </div>
  </div>

  <!-- Simple Script for Tab Functionality (can be externalized) -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const tabButtons = document.querySelectorAll('.flex.border-b button');
      const tabContents = document.querySelectorAll('[id^="tab-content-"]');

      tabButtons.forEach(button => {
        button.addEventListener('click', () => {
          // Deactivate all buttons and hide all content
          tabButtons.forEach(btn => {
            btn.classList.remove('border-red-500', 'text-red-600', 'bg-red-50', 'dark:text-red-400', 'dark:bg-red-900/20');
            btn.classList.add('border-transparent', 'text-gray-500', 'dark:text-gray-400', 'hover:bg-gray-50', 'dark:hover:bg-gray-700', 'focus:text-gray-900', 'focus:border-red-500');
          });
          tabContents.forEach(content => {
            content.classList.add('hidden');
          });

          // Activate clicked button and show corresponding content
          const targetId = button.id.replace('tab-btn-', 'tab-content-');
          document.getElementById(targetId).classList.remove('hidden');
          button.classList.add('border-red-500', 'text-red-600', 'bg-red-50', 'dark:text-red-400', 'dark:bg-red-900/20');
          button.classList.remove('border-transparent', 'text-gray-500', 'dark:text-gray-400', 'hover:bg-gray-50', 'dark:hover:bg-gray-700', 'focus:text-gray-900', 'focus:border-red-500');
        });
      });

      // Trigger click on 'Analytics' tab by default to make it active on load
      document.getElementById('tab-btn-analytics').click();
    });
  </script>

</div>

탭 구성 요소

블로그/콘텐츠 소비를 위한 다크 모드를 지원하는 반응형 탭 구성 요소입니다. 눈의 피로를 줄이기 위해 어두운 배경의 트라이어드 색 구성표를 사용합니다.

열다 미리 보기

                
<div class="dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-gray-800 dark:bg-gray-950 rounded-lg shadow-xl overflow-hidden">
      <div class="flex border-b border-gray-700 dark:border-gray-700">
        <button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-cyan-400 dark:text-cyan-500 border-b-2 border-cyan-400 dark:border-cyan-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
          Featured Articles
        </button>
        <button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-purple-400 dark:text-purple-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
          Popular Posts
        </button>
        <button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-fuchsia-400 dark:text-fuchsia-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
          Latest News
        </button>
      </div>

      <div class="p-6 md:p-8">
        <!-- Tab Content 1: Featured Articles -->
        <div class="space-y-8">
          <div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
            <img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article1/600/400" alt="Article Thumbnail">
            <div class="p-6 flex flex-col justify-between">
              <div>
                <h3 class="text-2xl font-bold text-white mb-2">The Future of AI in Content Creation</h3>
                <p class="text-gray-300 text-base leading-relaxed">Explore how artificial intelligence is revolutionizing the way we create and consume digital content, from automated writing to personalized recommendations.</p>
              </div>
              <div class="mt-4 flex items-center text-gray-400">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
                <span>John Doe • 2 hours ago</span>
              </div>
            </div>
          </div>

          <div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
            <img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article2/600/400" alt="Article Thumbnail">
            <div class="p-6 flex flex-col justify-between">
              <div>
                <h3 class="text-2xl font-bold text-white mb-2">Mastering Responsive Design with Tailwind CSS</h3>
                <p class="text-gray-300 text-base leading-relaxed">Dive deep into the utility-first CSS framework and learn how to build stunning, responsive web interfaces with ease and efficiency.</p>
              </div>
              <div class="mt-4 flex items-center text-gray-400">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
                <span>Jane Smith • Yesterday</span>
              </div>
            </div>
          </div>

          <div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
            <img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article3/600/400" alt="Article Thumbnail">
            <div class="p-6 flex flex-col justify-between">
              <div>
                <h3 class="text-2xl font-bold text-white mb-2">The Art of Storytelling in Digital Media</h3>
                <p class="text-gray-300 text-base leading-relaxed">Uncover the timeless principles of captivating narratives and how they apply to modern digital platforms and content forms.</p>
              </div>
              <div class="mt-4 flex items-center text-gray-400">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Author Avatar">
                <span>Peter Jones • 3 days ago</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Neumorphic Tabs 컴포넌트

블로그 콘텐츠를 위한 회색조의 뉴모픽 탭 구성 요소로, 반응형 디자인과 다크 모드를 지원합니다.

열다 미리 보기

                <div class="flex flex-col bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-2xl mx-auto my-10"> 
  
  <!-- Tab Buttons --> 
  <div class="flex space-x-4 mb-6"> 
  
    <button class="flex-1 py-3 px-6 rounded-lg text-gray-800 dark:text-gray-200 
                   bg-gray-300 dark:bg-gray-700 
                   shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark 
                   hover:shadow-neumorphic-button-light-hover dark:hover:shadow-neumorphic-button-dark-hover 
                   focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 
                   active:shadow-neumorphic-button-light-active dark:active:shadow-neumorphic-button-dark-active">
      Recent Articles
    </button>

    <button class="flex-1 py-3 px-6 rounded-lg text-gray-600 dark:text-gray-400 
                   bg-gray-200 dark:bg-gray-800 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-button-light-hover dark:hover:shadow-neumorphic-button-dark-hover 
                   focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">
      Popular Posts
    </button>

    <button class="flex-1 py-3 px-6 rounded-lg text-gray-600 dark:text-gray-400 
                   bg-gray-200 dark:bg-gray-800 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-button-light-hover dark:hover:shadow-neumorphic-button-dark-hover 
                   focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">
      Categories
    </button>
    
  </div> 
  
  <!-- Tab Content (Recent Articles) --> 
  <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg 
              shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
              text-gray-700 dark:text-gray-300"> 
    <h3 class="text-xl font-semibold mb-4">The Art of Neumorphism in Web Design</h3> 
    <p class="mb-4">Explore the subtle and tactile design trend that is Neumorphism. Learn how to create soft, extruded, and impressed elements that bring a unique depth to your user interfaces.</p> 
    
    <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full mr-3 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <span>John Doe • October 26, 2023</span>
    </div>
    
  </div> 
  
  <!-- You would typically have other tab content divs here, hidden by default and shown with JavaScript --> 
  <!-- For this example, only one tab content is shown as per the no JavaScript constraint --> 
  
</div>

<!-- Custom Styles for Neumorphism (add to your CSS or a style block) -->
<style>
  /* Light Neumorphic Shadows */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }

  .shadow-neumorphic-inset-light {
    box-shadow: inset 6px 6px 12px #b0b0b0, inset -6px -6px 12px #ffffff;
  }

  .shadow-neumorphic-button-light {
    box-shadow: 4px 4px 8px #b0b0b0, -4px -4px 8px #ffffff;
  }

  /* Light Neumorphic Button Hover States */
  .shadow-neumorphic-button-light-hover {
    box-shadow: 2px 2px 4px #b0b0b0, -2px -2px 4px #ffffff;
  }

  /* Light Neumorphic Button Active States (pressed in) */
  .shadow-neumorphic-button-light-active {
    box-shadow: inset 2px 2px 4px #b0b0b0, inset -2px -2px 4px #ffffff;
  }

  /* Dark Neumorphic Shadows */
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #2a2a2a, -6px -6px 12px #3a3a3a;
  }

  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 6px 6px 12px #2a2a2a, inset -6px -6px 12px #3a3a3a;
  }

  .dark .shadow-neumorphic-button-dark {
    box-shadow: 4px 4px 8px #2a2a2a, -4px -4px 8px #3a3a3a;
  }

  /* Dark Neumorphic Button Hover States */
  .dark .shadow-neumorphic-button-dark-hover {
    box-shadow: 2px 2px 4px #2a2a2a, -2px -2px 4px #3a3a3a;
  }

  /* Dark Neumorphic Button Active States (pressed in) */
  .dark .shadow-neumorphic-button-dark-active {
    box-shadow: inset 2px 2px 4px #2a2a2a, inset -2px -2px 4px #3a3a3a;
  }
</style>

탭 구성 요소

소셜 미디어를 위한 브루탈리즘 스타일의 탭 구성 요소로, 보색과 어두운 테마 지원을 포함한 복잡하고 반응이 빠른 디자인을 갖추고 있습니다.

열다 미리 보기

                <div class="font-mono bg-amber-200 text-purple-900 min-h-screen p-8 dark:bg-purple-900 dark:text-amber-200">
  <div class="max-w-4xl mx-auto border-4 border-purple-900 dark:border-amber-200">
    <!-- Brutalist Header/Title -->
    <h1 class="text-5xl font-extrabold p-4 bg-purple-900 text-amber-200 text-center uppercase tracking-widest border-b-4 border-amber-200 dark:bg-amber-200 dark:text-purple-900 dark:border-purple-900">
      Social Feed
    </h1>

    <!-- Tabs Navigation -->
    <div class="flex border-b-4 border-purple-900 dark:border-amber-200">
      <button class="flex-1 p-4 text-center text-2xl font-bold uppercase border-r-4 border-purple-900 bg-amber-300 hover:bg-amber-400 dark:border-amber-200 dark:bg-purple-800 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out">
        <span class="block transform -skew-x-12">Latest</span>
      </button>
      <button class="flex-1 p-4 text-center text-2xl font-bold uppercase border-r-4 border-purple-900 bg-amber-300 hover:bg-amber-400 dark:border-amber-200 dark:bg-purple-800 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out">
        <span class="block transform -skew-x-12">Popular</span>
      </button>
      <button class="flex-1 p-4 text-center text-2xl font-bold uppercase bg-amber-300 hover:bg-amber-400 dark:bg-purple-800 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out">
        <span class="block transform -skew-x-12">Friends</span>
      </button>
    </div>

    <!-- Tab Content Area -->
    <div class="p-4 space-y-8">
      <!-- Example Post 1 -->
      <div class="border-4 border-purple-900 p-6 bg-amber-100 dark:border-amber-200 dark:bg-purple-700 relative group">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-300 to-purple-400 opacity-20 group-hover:opacity-40 transition-opacity duration-300 dark:from-purple-600 dark:to-amber-300"></div>
        
        <div class="relative z-10 flex items-start space-x-4 mb-4">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-purple-900 dark:border-amber-200 object-cover">
          <div>
            <p class="text-3xl font-extrabold uppercase">@PixelPunk</p>
            <p class="text-lg">2 hours ago</p>
          </div>
        </div>
        <p class="text-2xl leading-relaxed mb-4 border-t-2 border-b-2 border-purple-900 py-2 dark:border-amber-200">
          Just dropped my new brutalist-inspired digital art piece! Check it out and tell me what you think. #BrutalArt #DigitalDesign #NewWork
        </p>
        <img src="https://picsum.photos/id/1040/800/400" alt="Post Image" class="w-full h-auto object-cover border-4 border-purple-900 dark:border-amber-200 mb-4">
        <div class="flex justify-between items-center text-lg">
          <span class="font-bold">1.2K Likes</span>
          <a href="#" class="px-6 py-2 bg-purple-900 text-amber-200 border-2 border-amber-200 uppercase font-bold text-center hover:bg-amber-200 hover:text-purple-900 dark:bg-amber-200 dark:text-purple-900 dark:border-purple-900 dark:hover:bg-purple-900 dark:hover:text-amber-200 transition-all duration-200 ease-in-out transform skew-x-12">
            Comment
          </a>
        </div>
      </div>

      <!-- Example Post 2 -->
      <div class="border-4 border-purple-900 p-6 bg-amber-100 dark:border-amber-200 dark:bg-purple-700 relative group">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-300 to-purple-400 opacity-20 group-hover:opacity-40 transition-opacity duration-300 dark:from-purple-600 dark:to-amber-300"></div>
        
        <div class="relative z-10 flex items-start space-x-4 mb-4">
          <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-purple-900 dark:border-amber-200 object-cover">
          <div>
            <p class="text-3xl font-extrabold uppercase">@CodeCrusher</p>
            <p class="text-lg">4 hours ago</p>
          </div>
        </div>
        <p class="text-2xl leading-relaxed mb-4 border-t-2 border-b-2 border-purple-900 py-2 dark:border-amber-200">
          Just finished coding a new brutalist UI for my dev portfolio. Loving the raw, unrefined aesthetic! #WebDev #BrutalistUI #CodingLife
        </p>
        <img src="https://picsum.photos/id/1043/800/400" alt="Post Image" class="w-full h-auto object-cover border-4 border-purple-900 dark:border-amber-200 mb-4">
        <div class="flex justify-between items-center text-lg">
          <span class="font-bold">987 Likes</span>
          <a href="#" class="px-6 py-2 bg-purple-900 text-amber-200 border-2 border-amber-200 uppercase font-bold text-center hover:bg-amber-200 hover:text-purple-900 dark:bg-amber-200 dark:text-purple-900 dark:border-purple-900 dark:hover:bg-purple-900 dark:hover:text-amber-200 transition-all duration-200 ease-in-out transform skew-x-12">
            Comment
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Neumorphism Tabs 컴포넌트

대시보드 UI용 뉴모픽 탭 구성 요소로, HTML 및 Tailwind CSS만 사용하여 회색조 색 구성표, 반응형 디자인 및 어두운 테마 지원을 특징으로 합니다.

열다 미리 보기

                <div class="p-4 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-2xl bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-6">
    <div class="flex space-x-4 mb-6">
      <button class="flex-1 py-3 px-4 rounded-lg text-gray-700 dark:text-gray-300 text-sm font-medium 
                     shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
                     hover:shadow-neumorphic-light hover:dark:shadow-neumorphic-dark 
                     focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
                     transition ease-in-out duration-300">
        Overview
      </button>
      <button class="flex-1 py-3 px-4 rounded-lg text-gray-800 dark:text-white text-sm font-medium 
                     bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark
                     focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
                     transition ease-in-out duration-300">
        Analytics
      </button>
      <button class="flex-1 py-3 px-4 rounded-lg text-gray-700 dark:text-gray-300 text-sm font-medium 
                     shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
                     hover:shadow-neumorphic-light hover:dark:shadow-neumorphic-dark 
                     focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
                     transition ease-in-out duration-300">
        Reports
      </button>
    </div>

    <div class="p-6 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
      <!-- Content for the active tab -->
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Analytics Dashboard</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Card 1 -->
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Total Users</h4>
          <p class="text-2xl font-bold text-gray-900 dark:text-white">1,234,567</p>
        </div>
        <!-- Card 2 -->
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Page Views</h4>
          <p class="text-2xl font-bold text-gray-900 dark:text-white">5,678,901</p>
        </div>
        <!-- Card 3 -->
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Bounce Rate</h4>
          <p class="text-2xl font-bold text-gray-900 dark:text-white">32.5%</p>
        </div>
      </div>
    </div>

  </div>
  <style>
    .shadow-neumorphic-light {
      box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 6px 6px 12px #1a1a1a, -6px -6px 12px #4a4a4a;
    }
    .shadow-neumorphic-inset-light {
      box-shadow: inset 6px 6px 12px #b0b0b0, inset -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-inset-dark {
      box-shadow: inset 6px 6px 12px #1a1a1a, inset -6px -6px 12px #4a4a4a;
    }
  </style>
</div>