검색 구성 요소

모든 구성 요소

사용 가능한 모든 Tailwind CSS 구성 요소 찾아보기

장바구니 구성 요소 - Nature Inspired

스포츠/피트니스 애플리케이션을 위한 자연에서 영감을 받은 복잡한 쇼핑 카트 구성 요소로, 흐르는 선, 보색 구성표, 응답성 및 다크 모드 지원을 특징으로 합니다.

                <div class="font-sans antialiased text-gray-800 bg-gradient-to-br from-green-50 to-teal-100 dark:from-green-950 dark:to-teal-900 min-h-screen p-4 sm:p-6 lg:p-8">

  <!-- Global Container -->
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-3xl overflow-hidden animate-fade-in-up transition-colors duration-500">

    <!-- Header -->
    <div class="bg-gradient-to-r from-green-500 to-teal-600 dark:from-green-700 dark:to-teal-800 p-6 sm:p-8 lg:p-10 text-white flex justify-between items-center rounded-t-3xl">
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight drop-shadow-lg font-['Playfair_Display']">Your Growth Basket</h1>
      <span class="text-lg sm:text-xl font-semibold opacity-90">3 Items</span>
    </div>

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

      <!-- Cart Items Section -->
      <div class="lg:col-span-2 space-y-6 sm:space-y-8">

        <!-- Cart Item 1 -->
        <div class="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-700 rounded-2xl p-4 sm:p-6 shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 border border-green-200 dark:border-green-800">
          <img src="https://picsum.photos/seed/sports-gear-1/150/150" alt="Ergonomic Training Bar" class="w-32 h-32 sm:w-40 sm:h-40 rounded-xl object-cover ring-2 ring-green-400 dark:ring-green-600 flex-shrink-0">
          <div class="flex-grow mt-4 sm:mt-0 sm:ml-6 text-center sm:text-left">
            <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2 font-['Montserrat']">Ergonomic Training Bar</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-3">Designed for peak performance and natural grip.</p>
            <div class="flex items-center justify-center sm:justify-start space-x-4 mb-3">
              <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
                <button class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 transition duration-200 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-green-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></button>
                <span class="px-4 py-1 text-lg font-semibold text-gray-900 dark:text-gray-100">1</span>
                <button class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 transition duration-200 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-green-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" /></svg></button>
              </div>
              <strong class="text-xl font-bold text-green-600 dark:text-green-400">$89.99</strong>
            </div>
            <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-600 transition duration-300 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md py-1 px-2">Remove</button>
          </div>
        </div>

        <!-- Cart Item 2 -->
        <div class="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-700 rounded-2xl p-4 sm:p-6 shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 border border-green-200 dark:border-green-800">
          <img src="https://picsum.photos/seed/yoga-mat-2/150/150" alt="Eco-Friendly Yoga Mat" class="w-32 h-32 sm:w-40 sm:h-40 rounded-xl object-cover ring-2 ring-green-400 dark:ring-green-600 flex-shrink-0">
          <div class="flex-grow mt-4 sm:mt-0 sm:ml-6 text-center sm:text-left">
            <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2 font-['Montserrat']">Eco-Friendly Yoga Mat</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-3">Sustainable and grippy for all your poses.</p>
            <div class="flex items-center justify-center sm:justify-start space-x-4 mb-3">
              <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
                <button class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 transition duration-200 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-green-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></button>
                <span class="px-4 py-1 text-lg font-semibold text-gray-900 dark:text-gray-100">1</span>
                <button class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 transition duration-200 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-green-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" /></svg></button>
              </div>
              <strong class="text-xl font-bold text-green-600 dark:text-green-400">$49.50</strong>
            </div>
            <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-600 transition duration-300 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md py-1 px-2">Remove</button>
          </div>
        </div>

        <!-- Cart Item 3 -->
        <div class="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-700 rounded-2xl p-4 sm:p-6 shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 border border-green-200 dark:border-green-800">
          <img src="https://picsum.photos/seed/resistance-bands-3/150/150" alt="Premium Resistance Bands Set" class="w-32 h-32 sm:w-40 sm:h-40 rounded-xl object-cover ring-2 ring-green-400 dark:ring-green-600 flex-shrink-0">
          <div class="flex-grow mt-4 sm:mt-0 sm:ml-6 text-center sm:text-left">
            <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2 font-['Montserrat']">Premium Resistance Bands Set</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base mb-3">Versatile for strength, flexibility, and recovery.</p>
            <div class="flex items-center justify-center sm:justify-start space-x-4 mb-3">
              <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
                <button class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 transition duration-200 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-green-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></button>
                <span class="px-4 py-1 text-lg font-semibold text-gray-900 dark:text-gray-100">1</span>
                <button class="px-3 py-1 bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-500 transition duration-200 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-green-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" /></svg></button>
              </div>
              <strong class="text-xl font-bold text-green-600 dark:text-green-400">$29.99</strong>
            </div>
            <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-600 transition duration-300 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md py-1 px-2">Remove</button>
          </div>
        </div>

        <!-- Continue Shopping Button -->
        <div class="pt-6 border-t border-green-200 dark:border-green-700 text-center">
          <button class="inline-flex items-center px-6 py-3 bg-teal-500 hover:bg-teal-600 dark:bg-teal-700 dark:hover:bg-teal-600 text-white font-semibold rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
            </svg>
            Continue Evolving
          </button>
        </div>

      </div>

      <!-- Summary Section -->
      <div class="lg:col-span-1 bg-gradient-to-br from-green-50 to-teal-50 dark:from-green-900 dark:to-teal-900 rounded-2xl p-6 sm:p-8 shadow-lg border border-teal-200 dark:border-teal-700 flex flex-col justify-between">

        <div>
          <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-6 border-b pb-4 border-teal-300 dark:border-teal-600 font-['Playfair_Display']">Order Harmony</h2>

          <div class="mb-4">
            <div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-600">
              <span class="text-gray-600 dark:text-gray-300">Subtotal</span>
              <span class="text-gray-900 dark:text-gray-100 font-medium">$169.48</span>
            </div>
            <div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-600">
              <span class="text-gray-600 dark:text-gray-300">Shipping</span>
              <span class="text-gray-900 dark:text-gray-100 font-medium">$7.50</span>
            </div>
            <div class="flex justify-between items-center py-2">
              <span class="text-gray-600 dark:text-gray-300">Tax (8.25%)</span>
              <span class="text-gray-900 dark:text-gray-100 font-medium">$13.98</span>
            </div>
          </div>

          <div class="bg-teal-100 dark:bg-teal-800 rounded-xl p-4 mb-6 shadow-inner border border-teal-300 dark:border-teal-600">
            <div class="flex justify-between items-center text-xl sm:text-2xl font-bold text-green-700 dark:text-green-300">
              <span>Total</span>
              <span>$190.96</span>
            </div>
          </div>


          <div class="space-y-4">
            <label for="coupon" class="block text-lg font-semibold text-gray-900 dark:text-gray-100">Nurture your discount: </label>
            <div class="flex rounded-lg shadow-sm overflow-hidden border border-green-300 dark:border-green-600">
                <input type="text" id="coupon" placeholder="Enter code" class="flex-grow p-3 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-green-400 rounded-l-lg">
                <button class="px-5 py-3 bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 text-white font-semibold transform hover:scale-101 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-green-400 rounded-r-lg">
                  Apply
                </button>
            </div>
          </div>

        </div>

        <button class="w-full mt-8 py-4 bg-green-600 hover:bg-green-700 dark:bg-green-800 dark:hover:bg-green-700 text-white text-xl font-bold rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-green-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 animate-pulse-fade-in">
          Proceed to Thriving
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block ml-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

    </div>

  </div>
</div>

<style>
  /* Custom animations for a more 'organic' feel */
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
  }

  @keyframes pulse-fade-in {
    0% {
      opacity: 0.7;
      transform: scale(1);
      box-shadow: 0 0 0 rgba(16, 185, 129, 0.4); /* green-500 */
    }
    50% {
      opacity: 1;
      transform: scale(1.02);
      box-shadow: 0 0 15px rgba(16, 185, 129, 0.8);
    }
    100% {
      opacity: 0.7;
      transform: scale(1);
      box-shadow: 0 0 0 rgba(16, 185, 129, 0.4);
    }
  }

  .animate-pulse-fade-in {
    animation: pulse-fade-in 2s infinite ease-in-out;
  }

  /* Custom font styles, if loaded externally. For this example, assuming they are available or fallback. */
  /* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:wght@700&display=swap'); */
</style>

유기적 인 자연 피드백 구성 요소

게임 웹사이트를 위해 디자인된 자연에서 영감을 받은 복잡하고 영감을 받은 피드백 구성 요소로, 흐르는 선, 시원한 뉴트럴 컬러, 다크 모드 지원을 통한 완벽한 반응성을 특징으로 합니다.

열다 미리 보기

                <div class="font-sans bg-gradient-to-br from-gray-100 to-blue-50 dark:from-gray-900 dark:to-blue-950 min-h-screen p-4 sm:p-8 flex items-center justify-center">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out scale-95 md:scale-100 group" style="box-shadow: 0 10px 40px -10px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);">
    <!-- Organic Top Border -->
    <div class="h-4 sm:h-6 bg-gradient-to-r from-blue-300 to-blue-400 dark:from-blue-600 dark:to-blue-700 relative overflow-hidden">
      <svg class="absolute w-full h-full" viewBox="0 0 100 10" preserveAspectRatio="none">
        <path d="M0,5 Q25,0 50,5 T100,5" stroke="currentColor" stroke-width="0.5" fill="none" class="text-blue-200 dark:text-blue-800"></path>
        <path d="M0,6 Q25,1 50,6 T100,6" stroke="currentColor" stroke-width="0.5" fill="none" class="text-blue-100 dark:text-blue-700"></path>
      </svg>
    </div>

    <div class="p-6 sm:p-10">
      <div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-8 pb-6 border-b border-gray-200 dark:border-gray-700">
        <div>
          <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white leading-tight mb-2">
            Your Game, Your Voice
          </h2>
          <p class="text-gray-600 dark:text-gray-400 text-lg sm:text-xl font-light">
            Help us shape the future of our game universe.
          </p>
        </div>
        <button class="mt-6 md:mt-0 px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold rounded-full shadow-lg transform transition-all duration-300 ease-in-out hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800">
          Submit Feedback
        </button>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
        <!-- Interactive Rating Section -->
        <div class="bg-gray-50 dark:bg-gray-850 p-6 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-inner overflow-hidden relative">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
            <svg class="w-6 h-6 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.536 4.736h4.982c.969 0 1.371 1.246.588 1.81l-4.04 2.936 1.536 4.736c.3.921-.755 1.688-1.536 1.12L12 16.03l-4.04 2.936c-.78.568-1.835-.199-1.536-1.12l1.536-4.736-4.04-2.936c-.782-.564-.38-1.81.588-1.81h4.982L11.049 2.927z"></path></svg>
            Overall Satisfaction
          </h3>
          <div class="flex justify-center sm:justify-start space-x-2 sm:space-x-4 mb-4 select-none">
            <button class="rating-btn p-3 sm:p-4 rounded-full bg-transparent hover:bg-blue-100 dark:hover:bg-gray-700 text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 flex items-center justify-center">
              <span class="text-3xl sm:text-4xl">😒</span>
            </button>
            <button class="rating-btn p-3 sm:p-4 rounded-full bg-transparent hover:bg-blue-100 dark:hover:bg-gray-700 text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 flex items-center justify-center">
              <span class="text-3xl sm:text-4xl">😐</span>
            </button>
            <button class="rating-btn p-3 sm:p-4 rounded-full bg-transparent hover:bg-blue-100 dark:hover:bg-gray-700 text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 flex items-center justify-center">
              <span class="text-3xl sm:text-4xl">😊</span>
            </button>
            <button class="rating-btn p-3 sm:p-4 rounded-full bg-blue-100 dark:bg-blue-700 text-blue-600 dark:text-blue-200 ring-2 ring-blue-300 dark:ring-blue-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 flex items-center justify-center">
              <span class="text-3xl sm:text-4xl">😍</span>
            </button>
          </div>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-2 text-center sm:text-left">Click to select your experience.</p>

          <!-- Organic Shape (SVG) as background element -->
          <svg class="absolute bottom-0 right-0 w-32 h-32 opacity-10 blur-sm transform translate-x-1/4 translate-y-1/4 -rotate-12 pointer-events-none" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M50 0C68.45 0 83.21 17.55 79.9 35.85C77.41 49.33 65.65 60 50 60C34.35 60 22.59 49.33 20.1 35.85C16.79 17.55 31.55 0 50 0Z" fill="url(#paint0_linear_organic)" />
            <defs>
              <linearGradient id="paint0_linear_organic" x1="50" y1="0" x2="50" y2="60" gradientUnits="userSpaceOnUse">
                <stop stop-color="#8DCBF7"/>
                <stop offset="1" stop-color="#428DFF"/>
              </linearGradient>
            </defs>
          </svg>
        </div>

        <!-- Feature Feedback Tabs -->
        <div class="bg-gray-50 dark:bg-gray-850 p-6 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-inner">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
            <svg class="w-6 h-6 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            Specific Areas
          </h3>
          <div class="flex flex-wrap gap-2 text-sm">
            <button class="px-4 py-2 rounded-full border border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-200 transition-colors duration-200 hover:bg-blue-100 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
              Gameplay Mechanics
            </button>
            <button class="px-4 py-2 rounded-full border border-gray-200 bg-white text-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
              Graphics & Art
            </button>
            <button class="px-4 py-2 rounded-full border border-gray-200 bg-white text-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
              User Interface
            </button>
            <button class="px-4 py-2 rounded-full border border-gray-200 bg-white text-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
              Story & Lore
            </button>
            <button class="px-4 py-2 rounded-full border border-gray-200 bg-white text-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700">
              Performance
            </button>
          </div>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">Select areas you want to provide feedback on.</p>
        </div>
      </div>

      <!-- Detailed Feedback Section -->
      <div class="mb-8">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
          <svg class="w-6 h-6 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h10M7 16h10M14 6H10a2 2 0 00-2 2v6L5 21l3-3h11a2 2 0 002-2V8a2 2 0 00-2-2z"></path></svg>
          Your Thoughts
        </h3>
        <textarea class="w-full p-4 rounded-xl border border-gray-200 dark:border-gray-600 focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 transition-all duration-200 leading-relaxed resize-y" rows="6" placeholder="Tell us what you love, what could be better, or any new ideas..."></textarea>
      </div>

      <!-- User Info & Consent -->
      <div class="flex flex-col sm:flex-row items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
        <div class="flex items-center mb-4 sm:mb-0">
          <img class="w-12 h-12 rounded-full border-2 border-blue-300 dark:border-blue-600 mr-4 shadow-md" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-800 dark:text-white font-medium">Player 'Phoenix'</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Connected via GameID #123456</p>
          </div>
        </div>
        <div class="flex items-center">
          <input type="checkbox" id="consent" class="h-5 w-5 rounded form-checkbox text-blue-600 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 transition-colors duration-200">
          <label for="consent" class="ml-2 text-gray-700 dark:text-gray-300 select-none text-sm">
            Allow us to contact you for clarification.
          </label>
        </div>
      </div>
    </div>

    <!-- Organic Bottom Border -->
    <div class="h-4 sm:h-6 bg-gradient-to-r from-blue-400 to-blue-300 dark:from-blue-700 dark:to-blue-600 relative overflow-hidden">
      <svg class="absolute w-full h-full" viewBox="0 0 100 10" preserveAspectRatio="none">
        <path d="M0,5 Q25,10 50,5 T100,5" stroke="currentColor" stroke-width="0.5" fill="none" class="text-blue-100 dark:text-blue-700"></path>
        <path d="M0,4 Q25,9 50,4 T100,4" stroke="currentColor" stroke-width="0.5" fill="none" class="text-blue-200 dark:text-blue-800"></path>
      </svg>
    </div>
  </div>
</div>

Luxury_Container_Component

제조/산업 기업을 위한 고급 및 프리미엄 컨테이너 구성 요소로, 세련된 디자인, 반응형 레이아웃, 다크 모드 지원 및 다중 색상 그라데이션 무지개 구성표가 특징입니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 font-sans p-4 sm:p-8 md:p-12 lg:p-16 flex items-center justify-center">
  <div class="w-full max-w-7xl rounded-3xl shadow-2xl overflow-hidden
              bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-500
              dark:from-gray-800 dark:via-gray-900 dark:to-gray-950
              transform transition-all duration-500 hover:scale-[1.01] hover:shadow-3xl
              p-6 sm:p-8 md:p-10 lg:p-12 relative">

    <div class="absolute inset-0 bg-white bg-opacity-10 dark:bg-black dark:bg-opacity-20 rounded-3xl pointer-events-none"></div>

    <div class="relative z-10 text-white dark:text-gray-200">
      
      <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-10 border-b border-white border-opacity-20 dark:border-gray-700 pb-6">
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight mb-2 sm:mb-0
                   bg-clip-text text-transparent bg-gradient-to-r from-white via-indigo-200 to-pink-100
                   dark:from-blue-300 dark:via-purple-300 dark:to-pink-300">
          Quantum Synthetics
        </h1>
        <nav class="text-lg space-x-4 sm:space-x-6">
          <a href="#" class="font-medium opacity-80 hover:opacity-100 transition-opacity">Overview</a>
          <a href="#" class="font-medium opacity-80 hover:opacity-100 transition-opacity">Products</a>
          <a href="#" class="font-medium opacity-80 hover:opacity-100 transition-opacity">Innovations</a>
          <a href="#" class="font-medium opacity-80 hover:opacity-100 transition-opacity">Contact</a>
        </nav>
      </header>

      <section class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12 mb-12">
        <div class="space-y-6">
          <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold leading-tight
                     bg-clip-text text-transparent bg-gradient-to-r from-yellow-200 via-green-200 to-blue-200
                     dark:from-cyan-300 dark:via-teal-300 dark:to-indigo-300">
            Pioneering the Future of Industrial Automation & Materials Science
          </h2>
          <p class="text-lg leading-relaxed opacity-90">
            At Quantum Synthetics, we are dedicated to pushing the boundaries of manufacturing excellence. Our advanced robotics, AI-driven processes, and next-generation materials are designed to optimize efficiency, enhance precision, and deliver unparalleled quality across critical industries.
          </p>
          <div class="flex flex-wrap gap-4">
            <button class="px-8 py-3 rounded-full text-lg font-semibold
                           bg-white text-purple-700 shadow-md transform hover:scale-105 transition-transform duration-300
                           dark:bg-gray-200 dark:text-gray-900">
              Explore Solutions
            </button>
            <button class="px-8 py-3 rounded-full text-lg font-semibold
                           bg-transparent border-2 border-white border-opacity-60 text-white shadow-md transform hover:scale-105 transition-transform duration-300
                           dark:border-pink-300 dark:text-pink-300">
              Request a Demo
            </button>
          </div>
        </div>
        <div class="relative h-64 sm:h-80 md:h-autorounded-xl overflow-hidden
                    shadow-xl transform hover:scale-[1.02] transition-transform duration-300">
          <img src="https://picsum.photos/1200/800?random=1" alt="Industrial Innovation" loading="lazy" class="w-full h-full object-cover rounded-xl">
          <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60 rounded-xl"></div>
          <p class="absolute bottom-4 left-4 text-white text-sm opacity-80 italic">Cutting-edge robotics in action.</p>
        </div>
      </section>

      <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
        <div class="p-6 rounded-2xl bg-white bg-opacity-15 dark:bg-black dark:bg-opacity-30 shadow-lg backdrop-blur-md
                    transition-transform duration-300 hover:translate-y-[-5px]">
          <h3 class="text-2xl font-bold mb-3
                     bg-clip-text text-transparent bg-gradient-to-r from-teal-200 to-blue-200
                     dark:from-lime-300 dark:to-cyan-300">Advanced Robotics</h3>
          <p class="opacity-90">Revolutionizing production lines with smart, autonomous robotic systems.</p>
        </div>
        <div class="p-6 rounded-2xl bg-white bg-opacity-15 dark:bg-black dark:bg-opacity-30 shadow-lg backdrop-blur-md
                    transition-transform duration-300 hover:translate-y-[-5px]">
          <h3 class="text-2xl font-bold mb-3
                     bg-clip-text text-transparent bg-gradient-to-r from-orange-200 to-red-200
                     dark:from-pink-300 dark:to-orange-300">AI-Driven Analytics</h3>
          <p class="opacity-90">Leveraging AI for predictive maintenance and operational optimization.</p>
        </div>
        <div class="p-6 rounded-2xl bg-white bg-opacity-15 dark:bg-black dark:bg-opacity-30 shadow-lg backdrop-blur-md
                    transition-transform duration-300 hover:translate-y-[-5px]">
          <h3 class="text-2xl font-bold mb-3
                     bg-clip-text text-transparent bg-gradient-to-r from-purple-200 to-indigo-200
                     dark:from-purple-300 dark:to-blue-300">Sustainable Materials</h3>
          <p class="opacity-90">Developing eco-friendly, high-performance composites for diverse applications.</p>
        </div>
      </section>

      <section class="mb-12">
        <h2 class="text-3xl sm:text-4xl font-bold mb-8 text-center
                   bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 via-emerald-300 to-yellow-300
                   dark:from-blue-300 dark:via-green-300 dark:to-orange-300">
          Our Leadership in Action
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12 items-center">
          <div class="text-right space-y-4">
            <p class="text-xl italic opacity-90">
              "Innovation is not just what we do, it's who we are. Our commitment to excellence drives every project, ensuring our partners achieve their fullest potential."
            </p>
            <div class="flex items-center justify-end space-x-4">
              <div class="text-left">
                <p class="font-semibold text-lg">Dr. Anya Sharma</p>
                <p class="text-sm opacity-80">CEO, Quantum Synthetics</p>
              </div>
              <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Dr. Anya Sharma" class="w-16 h-16 rounded-full border-4 border-white border-opacity-50 shadow-md">
            </div>
          </div>
          <div class="relative h-64 sm:h-80 rounded-xl overflow-hidden
                      shadow-xl transform hover:scale-[1.02] transition-transform duration-300">
            <img src="https://picsum.photos/1200/800?random=2" alt="CEO at work" loading="lazy" class="w-full h-full object-cover rounded-xl">
            <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60 rounded-xl"></div>
            <p class="absolute bottom-4 right-4 text-white text-sm opacity-80 italic">Future-proofing industries.</p>
          </div>
        </div>
      </section>

      <footer class="border-t border-white border-opacity-20 dark:border-gray-700 pt-8 text-center">
        <p class="text-sm opacity-70">&copy; 2023 Quantum Synthetics. All rights reserved.</p>
        <div class="flex justify-center space-x-6 mt-4">
          <a href="#" class="text-white opacity-70 hover:opacity-100 transition-opacity">Privacy Policy</a>
          <a href="#" class="text-white opacity-70 hover:opacity-100 transition-opacity">Terms of Service</a>
          <a href="#" class="text-white opacity-70 hover:opacity-100 transition-opacity">Sitemap</a>
        </div>
      </footer>

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

체크 아웃 양식 구성 요소

CRM/비즈니스 도구를 위한 미니멀하고 평평한 디자인의 결제 양식 구성 요소로, 따뜻한 일몰 색 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.

열다 미리 보기

                <div class="min-h-screen bg-orange-50 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8 bg-gradient-to-r from-orange-400 to-red-500 dark:from-orange-600 dark:to-red-700 text-white">
      <h2 class="text-2xl sm:text-3xl font-bold mb-2">Checkout</h2>
      <p class="text-orange-100 dark:text-orange-200">Please fill in your details to complete the purchase.</p>
    </div>

    <form class="p-6 sm:p-8 space-y-6">
      <!-- Contact Information -->
      <div>
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact Information</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
            <input type="email" id="email" name="email" autocomplete="email" required
                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                          dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
          </div>
          <div>
            <label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Phone Number (Optional)</label>
            <input type="tel" id="phone" name="phone" autocomplete="tel"
                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                          dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
          </div>
        </div>
      </div>

      <!-- Shipping Information -->
      <div>
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Shipping Information</h3>
        <div class="grid grid-cols-1 gap-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" autocomplete="name" required
                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                          dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
          </div>
          <div>
            <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Street Address</label>
            <input type="text" id="address" name="address" autocomplete="street-address" required
                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                          dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
              <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300">City</label>
              <input type="text" id="city" name="city" autocomplete="address-level2" required
                     class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                            dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
            </div>
            <div>
              <label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300">State/Province</label>
              <input type="text" id="state" name="state" autocomplete="address-level1" required
                     class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                            dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
            </div>
            <div>
              <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Zip/Postal Code</label>
              <input type="text" id="zip" name="zip" autocomplete="postal-code" required
                     class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                            dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
            </div>
          </div>
        </div>
      </div>

      <!-- Payment Information -->
      <div>
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Payment Information</h3>
        <div class="grid grid-cols-1 gap-4">
          <div>
            <label for="card-number" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Card Number</label>
            <input type="text" id="card-number" name="card-number" autocomplete="cc-number" required
                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                          dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600" placeholder="•••• •••• •••• ••••">
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
              <label for="exp-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Expiration Date</label>
              <input type="text" id="exp-date" name="exp-date" autocomplete="cc-exp" required
                     class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                            dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600" placeholder="MM/YY">
            </div>
            <div>
              <label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-300">CVV</label>
              <input type="text" id="cvv" name="cvv" autocomplete="cc-csc" required
                     class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
                            dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600" placeholder="•••">
            </div>
          </div>
        </div>
      </div>

      <!-- Submit Button -->
      <div class="pt-4">
        <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500
                       dark:bg-orange-700 dark:hover:bg-orange-800 dark:focus:ring-offset-gray-800">
          Complete Purchase
        </button>
      </div>
    </form>
  </div>
</div>

Forms 구성 요소

Swiss/International Typography 원칙에 따라 디자인된 깨끗하고 미니멀한 형태의 구성 요소로, 보석 톤의 색 구성표가 특징입니다. 전문 컨설팅 또는 서비스 웹 사이트에 이상적이며 완전한 응답성과 다크 모드 지원을 제공합니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 p-4 sm:p-6 lg:p-8 dark:bg-gray-900 flex items-center justify-center">
  <div class="w-full max-w-md bg-white rounded-lg shadow-xl p-6 sm:p-8 dark:bg-gray-800 border dark:border-gray-700">
    <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4 text-center dark:text-white font-serif tracking-tight leading-tight">
      Get in Touch
    </h2>
    <p class="text-center text-gray-600 mb-8 dark:text-gray-300 text-sm sm:text-base leading-relaxed">
      We'd love to hear from you. Please fill out the form below.
    </p>

    <form>
      <div class="mb-5">
        <label for="name" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300 tracking-wide">
          FULL NAME
        </label>
        <input type="text" id="name" name="name" placeholder="John Doe" class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-emerald-600 focus:border-emerald-600 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500 transition duration-200 ease-in-out">
      </div>

      <div class="mb-5">
        <label for="email" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300 tracking-wide">
          EMAIL ADDRESS
        </label>
        <input type="email" id="email" name="email" placeholder="[email protected]" class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-sapphire-600 focus:border-sapphire-600 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500 transition duration-200 ease-in-out">
      </div>

      <div class="mb-6">
        <label for="message" class="block text-sm font-medium text-gray-700 mb-2 dark:text-gray-300 tracking-wide">
          YOUR MESSAGE
        </label>
        <textarea id="message" name="message" rows="4" placeholder="Tell us about your needs..." class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-ruby-600 focus:border-ruby-600 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500 resize-y transition duration-200 ease-in-out"></textarea>
      </div>

      <div class="mt-6">
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-semibold text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-offset-gray-900 transition duration-200 ease-in-out tracking-wide uppercase">
          SUBMIT
        </button>
      </div>
    </form>
  </div>
</div>

Memphis_Grayscale_Photography_Layout

Memphis Design에서 영감을 받은 회색조의 복잡하고 반응이 빠른 사진 레이아웃 구성 요소로, 사진 갤러리 및 포트폴리오에 적합하며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-neutral-100 dark:bg-neutral-900 font-sans">
  <header class="flex flex-col sm:flex-row justify-between items-center mb-8 sm:mb-12 p-4 border-b-4 border-black dark:border-white shadow-lg bg-neutral-200 dark:bg-neutral-800">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-neutral-800 dark:text-neutral-200 mb-4 sm:mb-0 transform -rotate-3 transition-transform duration-300 ease-in-out hover:rotate-0">
      GALLERY
    </h1>
    <nav class="flex flex-wrap gap-x-6 gap-y-2 text-xl font-semibold">
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 transform hover:scale-105 perspective-square relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-1 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Portfolio</a>
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 transform hover:scale-105 perspective-square relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-1 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">About</a>
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 transform hover:scale-105 perspective-square relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-1 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Contact</a>
    </nav>
  </header>

  <main class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- Featured Photographer Section -->
    <section class="md:col-span-3 lg:col-span-4 p-6 bg-gradient-to-br from-neutral-300 to-neutral-500 dark:from-neutral-700 dark:to-neutral-900 border-4 border-black dark:border-white shadow-xl flex flex-col sm:flex-row items-center justify-center relative overflow-hidden group">
      <div class="absolute top-0 left-0 w-24 h-24 bg-black dark:bg-white clip-path-polygon-top-left transform -translate-x-1/2 -translate-y-1/2 rotate-45 group-hover:rotate-0 transition-transform duration-500"></div>
      <div class="absolute bottom-0 right-0 w-24 h-24 bg-black dark:bg-white clip-path-polygon-bottom-right transform translate-x-1/2 translate-y-1/2 rotate-45 group-hover:rotate-0 transition-transform duration-500"></div>

      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Photographer Profile" class="w-32 h-32 sm:w-40 sm:h-40 rounded-full object-cover border-4 border-black dark:border-white shadow-lg z-10 sm:mr-8 mb-6 sm:mb-0 transform hover:scale-110 transition-transform duration-300 ease-in-out">
      <div class="text-center sm:text-left z-10">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-black dark:text-white mb-2 transform rotate-1 transition-transform duration-300 group-hover:rotate-0">Featured Artist: Jane Doe</h2>
        <p class="text-xl sm:text-2xl text-neutral-800 dark:text-neutral-200 font-semibold mb-4">Master of Monochrome</p>
        <a href="#" class="inline-block px-6 py-3 bg-black dark:bg-white text-white dark:text-black font-bold text-lg uppercase tracking-wider border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="absolute top-0 left-0 w-0 h-full bg-neutral-300 dark:bg-neutral-600 transition-all duration-300 group-hover:w-full"></span>
          <span class="relative z-10">View Profile</span>
        </a>
      </div>
    </section>

    <!-- Gallery Filters/Categories -->
    <section class="md:col-span-1 p-6 bg-black dark:bg-white text-neutral-100 dark:text-neutral-900 border-4 border-white dark:border-black shadow-lg transform translate-y-4 dark:translate-y-0 translate-x-4 dark:translate-x-0">
      <h3 class="text-2xl font-bold mb-4 border-b-2 border-neutral-100 dark:border-neutral-900 pb-2">Categories</h3>
      <ul class="space-y-3">
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transition-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Portraits</a></li>
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transition-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Landscapes</a></li>
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transitional-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Street</a></li>
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transition-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Abstract</a></li>
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transition-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Events</a></li>
      </ul>
      <div class="mt-8">
        <h3 class="text-2xl font-bold mb-4 border-b-2 border-neutral-100 dark:border-neutral-900 pb-2">Tools</h3>
        <input type="text" placeholder="Search photos..." class="w-full px-4 py-3 bg-neutral-800 dark:bg-neutral-200 text-neutral-100 dark:text-neutral-900 placeholder-neutral-400 dark:placeholder-neutral-600 border-2 border-white dark:border-black focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-black mb-4">
        <button class="w-full px-6 py-3 bg-white dark:bg-black text-black dark:text-white font-bold text-lg uppercase tracking-wide border-2 border-transparent hover:border-white dark:hover:border-black transition-all duration-300 relative group overflow-hidden">
          <span class="absolute top-0 left-0 w-0 h-full bg-neutral-300 dark:bg-neutral-600 transition-all duration-300 group-hover:w-full"></span>
          <span class="relative z-10">Apply Filters</span>
        </button>
      </div>
    </section>

    <!-- Photo Grid -->
    <section class="md:col-span-2 lg:col-span-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">

      <!-- Photo Card 1 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1018/600/400" alt="Photo 1" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Urban Echoes</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">A candid shot capturing the raw energy of city life.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 2 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1043/600/400" alt="Photo 2" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Mountain Serenity</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">Clouds embrace the peaks in a timeless grayscale landscape.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 3 (Taller) -->
      <div class="row-span-1 sm:row-span-2 bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1025/600/800" alt="Photo 3" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Reflections of Time</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">A pensive portrait, capturing depth and emotion in every shade.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 4 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1012/600/400" alt="Photo 4" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Open Road</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">Vast plains and endless journeys, captured in monochrome.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 5 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/105/600/400" alt="Photo 5" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Abstract Light</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">Play of shadows and light creating compelling forms.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 6 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1079/600/400" alt="Photo 6" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Coastal Whispers</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">The rugged beauty of the coast in stunning black and white.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

    </section>

  </main>

  <footer class="mt-12 p-6 text-center border-t-4 border-black dark:border-white bg-neutral-200 dark:bg-neutral-800 shadow-xl">
    <p class="text-neutral-800 dark:text-neutral-200 text-lg font-semibold mb-4">© 2023 Grayscale Gallery. All rights reserved.</p>
    <div class="flex justify-center flex-wrap gap-x-6 gap-y-2">
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 text-sm relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Privacy Policy</a>
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 text-sm relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Terms of Service</a>
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 text-sm relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Sitemap</a>
    </div>
  </footer>
</div>

레트로 다크 모드 비디오 플레이어 구성 요소

스포츠/피트니스 애플리케이션용으로 설계된 반응형 비디오 플레이어 구성 요소로, 레트로 음소거 색상 팔레트와 완전한 다크 모드를 지원합니다. 여기에는 자리 표시자 비디오와 타임라인이 있는 컨트롤이 포함됩니다.

열다 미리 보기

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-900 dark:bg-gray-900 text-gray-200 dark:text-gray-200 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-gray-800 dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden border border-gray-700 dark:border-gray-700">
    <!-- Video Player Section -->
    <div class="relative pb-[56.25%] h-0 overflow-hidden bg-black flex items-center justify-center">
      <video class="absolute top-0 left-0 w-full h-full object-cover" controls poster="https://picsum.photos/1280/720?random=1">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
      <!-- Play Button Overlay (Optional - if actual video element is used, this is not needed) -->
      <!-- <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50">
        <button class="p-4 rounded-full bg-orange-600 dark:bg-orange-700 text-white dark:text-gray-100 hover:scale-105 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
          <svg class="w-8 h-8 md:w-10 md:h-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div> -->
    </div>

    <!-- Video Controls & Info Section -->
    <div class="p-4 sm:p-5 md:p-6 flex flex-col space-y-4">
      <!-- Playback Controls -->
      <div class="flex items-center justify-between text-gray-400 dark:text-gray-400">
        <div class="flex items-center space-x-3 sm:space-x-4">
          <button class="p-2 focus:outline-none focus:ring focus:ring-amber-700 dark:focus:ring-amber-600 rounded-full hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 19.5L8.25 12l7.5-7.5"></path></svg>
          </button>
          <button class="p-2 rounded-full text-amber-500 dark:text-amber-400 hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 focus:outline-none focus:ring focus:ring-amber-700 dark:focus:ring-amber-600">
            <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
          </button>
          <button class="p-2 focus:outline-none focus:ring focus:ring-amber-700 dark:focus:ring-amber-600 rounded-full hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path></svg>
          </button>
        </div>
        <div class="flex items-center space-x-3 sm:space-x-4">
          <span class="text-sm sm:text-base">0:00 / 0:00</span>
          <button class="p-2 focus:outline-none focus:ring focus:ring-amber-700 dark:focus:ring-amber-600 rounded-full hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200 hidden sm:block">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.552 6.823 2 12 2c5.177 0 10.268 3.552 11.542 8-.262.285-.544.545-.845.787A5.94 5.94 0 0112 18c-2.072 0-3.957-.78-5.328-2.075C5.814 14.887 4.19 13.067 2.658 11.413a1.458 1.458 0 010-2.826c1.532-1.654 3.156-3.474 4.872-4.889C8.043 3.78 9.928 3 12 3c1.785 0 3.42.474 4.88 1.282A7.173 7.173 0 0012 17a6.002 6.002 0 01-3.672-1.295A13.918 13.918 0 00.458 10z" clip-rule="evenodd"></path></svg>
          </button>
          <button class="p-2 focus:outline-none focus:ring focus:ring-amber-700 dark:focus:ring-amber-600 rounded-full hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10l2 2h12a2 2 0 002-2V9.957a2 2 0 00-.573-1.424L16.435 4.542A2 2 0 0014.957 4H7a2 2 0 00-2 2z"></path></svg>
          </button>
          <button class="p-2 focus:outline-none focus:ring focus:ring-amber-700 dark:focus:ring-amber-600 rounded-full hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 0h-4m4 0l-5-5"></path></svg>
          </button>
        </div>
      </div>

      <!-- Progress Bar -->
      <div class="w-full h-2 bg-gray-700 dark:bg-gray-700 rounded-full overflow-hidden relative cursor-pointer group">
        <div class="h-full bg-amber-600 dark:bg-amber-600 rounded-full" style="width: 30%;"></div>
        <div class="absolute top-1/2 left-[30%] -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-full bg-amber-500 dark:bg-amber-500 shadow-md transform scale-0 group-hover:scale-100 transition-transform duration-200"></div>
      </div>

      <!-- Video Title & Description -->
      <div>
        <h3 class="text-xl sm:text-2xl font-bold text-gray-100 dark:text-gray-100 mb-2 leading-tight">
          Retro Game Day Highlights: Championship Match
        </h3>
        <p class="text-gray-300 dark:text-gray-300 text-sm sm:text-base leading-snug">
          Relive the thrilling moments of the championship final. Epic plays, incredible goals, and unforgettable victories from last season's top teams. A must-watch for all fitness enthusiasts!
        </p>
      </div>

      <!-- Action Buttons -->
      <div class="flex flex-wrap gap-3 pt-2">
        <button class="flex-1 sm:flex-none px-4 py-2 bg-amber-600 dark:bg-amber-700 text-white dark:text-gray-100 rounded-md hover:bg-amber-700 dark:hover:bg-amber-800 transition-colors duration-200 text-sm sm:text-base font-semibold focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-gray-800">
          <span class="hidden sm:inline">Share </span><svg class="inline-block w-4 h-4 mr-1 sm:mr-2 align-middle" 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.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.4 3.2m-6.4-6.4l6.4-3.2m2.59-2.59a3 3 0 11-4.242 4.242A3 3 0 0117.842 5.05zM9 12a3 3 0 11-6 0 3 3 0 016 0zm6 6a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        </button>
        <button class="flex-1 sm:flex-none px-4 py-2 bg-gray-700 dark:bg-gray-700 text-gray-200 dark:text-gray-200 rounded-md hover:bg-gray-600 dark:hover:bg-gray-600 transition-colors duration-200 text-sm sm:text-base font-semibold focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-800">
          <span class="hidden sm:inline">Save </span><svg class="inline-block w-4 h-4 mr-1 sm:mr-2 align-middle" 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="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path></svg>
        </button>
        <button class="flex-1 sm:flex-none px-4 py-2 bg-gray-700 dark:bg-gray-700 text-gray-200 dark:text-gray-200 rounded-md hover:bg-gray-600 dark:hover:bg-gray-600 transition-colors duration-200 text-sm sm:text-base font-semibold focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-800">
          <span class="hidden sm:inline">More </span><svg class="inline-block w-4 h-4 mr-1 sm:mr-2 align-middle" 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 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg>
        </button>
      </div>

      <!-- Other Videos Section (Conceptual, for context) -->
      <div class="pt-4 border-t border-gray-700 dark:border-gray-700 mt-4">
        <h4 class="text-lg sm:text-xl font-bold text-gray-200 dark:text-gray-200 mb-3">More Highlights</h4>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="flex items-center space-x-3 bg-gray-700 dark:bg-gray-700 rounded-lg p-2 hover:bg-gray-600 dark:hover:bg-gray-600 transition-colors duration-200 cursor-pointer">
            <img src="https://picsum.photos/100/60?random=2" alt="Thumbnail" class="w-20 h-12 sm:w-24 sm:h-14 object-cover rounded-md flex-shrink-0">
            <div>
              <p class="text-gray-100 dark:text-gray-100 font-semibold text-sm sm:text-base">Intense Training Session</p>
              <p class="text-gray-400 dark:text-gray-400 text-xs sm:text-sm">5 days ago | 12:34</p>
            </div>
          </div>
          <div class="flex items-center space-x-3 bg-gray-700 dark:bg-gray-700 rounded-lg p-2 hover:bg-gray-600 dark:hover:bg-gray-600 transition-colors duration-200 cursor-pointer">
            <img src="https://picsum.photos/100/60?random=3" alt="Thumbnail" class="w-20 h-12 sm:w-24 sm:h-14 object-cover rounded-md flex-shrink-0">
            <div>
              <p class="text-gray-100 dark:text-gray-100 font-semibold text-sm sm:text-base">Athlete Spotlight: Rise of a Champion</p>
              <p class="text-gray-400 dark:text-gray-400 text-xs sm:text-sm">2 weeks ago | 8:15</p>
            </div>
          </div>
        </div>
      </div>

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

Bauhaus_Retro_News_Footer

뉴스/저널리즘 웹사이트를 위한 복잡하고 반응이 빠른 바닥글 탐색 구성 요소로, 바우하우스에서 영감을 받은 기하학적 형태와 레트로/빈티지 색상 팔레트, 다크 모드 지원을 포함합니다.

열다 미리 보기

                <footer class="bg-amber-100 text-stone-800 py-12 px-4 dark:bg-stone-900 dark:text-stone-300 font-sans">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12">

    <!-- Brand & Social -->
    <div class="flex flex-col items-start">
      <a href="#" class="text-3xl font-bold tracking-tight text-red-700 dark:text-red-500 mb-4 uppercase">
        <span class="block">The Daily</span>
        <span class="block text-xl text-stone-700 dark:text-stone-400 -mt-2">Gazette</span>
      </a>
      <p class="text-sm mb-6 max-w-sm text-stone-700 dark:text-stone-400 leading-relaxed">
        Your source for unbiased news and in-depth analysis from around the globe. Stay informed, stay ahead.
      </p>
      <div class="flex space-x-4">
        <a href="#" class="w-9 h-9 flex items-center justify-center rounded-full bg-red-700 text-amber-100 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 transition-colors duration-200" aria-label="Facebook">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c5.965-.949 10-5.605 10-11.267Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="w-9 h-9 flex items-center justify-center rounded-full bg-red-700 text-amber-100 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 transition-colors duration-200" aria-label="Twitter">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.251c1.803.957 3.864 1.43 6.096 1.43 7.334 0 11.332-6.04 11.332-11.332 0-.17-.003-.338-.01-.506A8.134 8.134 0 0024 4.992c-.736.326-1.527.54-2.357.643a4.07 4.07 0 001.76-2.267c-.822.489-1.727.842-2.697 1.03a4.043 4.043 0 00-6.924 3.693 11.493 11.493 0 01-8.381-4.22c-.428.73-.67 1.58-.67 2.493 0 1.737.878 3.27 2.217 4.172a4.053 4.053 0 01-1.834-.508v.05c0 2.393 1.706 4.383 3.963 4.834a4.072 4.072 0 01-1.834.07c.628 1.956 2.445 3.393 4.605 3.432-1.688 1.325-3.805 2.124-6.102 2.124-.397 0-.786-.023-1.168-.069a16.052 16.052 0 009.654 3.013Z" />
          </svg>
        </a>
        <a href="#" class="w-9 h-9 flex items-center justify-center rounded-full bg-red-700 text-amber-100 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 transition-colors duration-200" aria-label="Instagram">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.317 3.093A8.472 8.472 0 0 0 4.542 6.095V10.5h1.996V6.095c0-1.85 1.503-3.35 3.35-3.35h7.224c1.847 0 3.35 1.5 3.35 3.35v7.224a3.35 3.35 0 0 1-3.35 3.35H13.5V18.5h4.417a8.471 8.471 0 0 0-.256-4.542H20a2.001 2.001 0 0 0 2-2V9.091a2.001 2.001 0 0 0-2-2h-3.091a8.472 8.472 0 0 0-4.542-.256V4.091h-2.09ZM12 10.5a1.5 1.5 0 1 0-.001 3.001A1.5 1.5 0 0 0 12 10.5Zm-5.5 0a7 7 0 1 1 14 0 7 7 0 0 1-14 0Z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

    <!-- Navigation Links -->
    <div>
      <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-200 mb-6 uppercase tracking-wider relative group">
        Sections
        <span class="block h-1 w-8 bg-red-700 dark:bg-red-500 absolute bottom-0 left-0 transition-all duration-300 group-hover:w-16"></span>
      </h3>
      <ul class="space-y-3">
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">World News</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Politics</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Business & Economy</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Tech & Science</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Arts & Culture</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Sports</a></li>
      </ul>
    </div>

    <!-- Recent Articles (Fictional Thumbnails) -->
    <div>
      <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-200 mb-6 uppercase tracking-wider relative group">
        Latest Reads
        <span class="block h-1 w-8 bg-red-700 dark:bg-red-500 absolute bottom-0 left-0 transition-all duration-300 group-hover:w-16"></span>
      </h3>
      <div class="space-y-4">
        <a href="#" class="flex items-center space-x-4 group">
          <img src="https://picsum.photos/id/1025/70/70" alt="Image of forest" class="w-16 h-16 object-cover rounded shadow-md border-2 border-transparent group-hover:border-red-700 dark:group-hover:border-red-500 transition-colors duration-200">
          <div class="flex-1">
            <p class="text-sm font-medium text-stone-800 dark:text-stone-300 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-200 line-clamp-2">Global Climate Summit Ends with Ambitious New Targets</p>
            <p class="text-xs text-stone-600 dark:text-stone-500 mt-1">2 hours ago</p>
          </div>
        </a>
        <a href="#" class="flex items-center space-x-4 group">
          <img src="https://picsum.photos/id/1015/70/70" alt="Image of a lake" class="w-16 h-16 object-cover rounded shadow-md border-2 border-transparent group-hover:border-red-700 dark:group-hover:border-red-500 transition-colors duration-200">
          <div class="flex-1">
            <p class="text-sm font-medium text-stone-800 dark:text-stone-300 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-200 line-clamp-2">New AI Breakthrough Could Revolutionize Medicine</p>
            <p class="text-xs text-stone-600 dark:text-stone-500 mt-1">Yesterday</p>
          </div>
        </a>
        <a href="#" class="flex items-center space-x-4 group">
          <img src="https://picsum.photos/id/103/70/70" alt="Image of a mountain" class="w-16 h-16 object-cover rounded shadow-md border-2 border-transparent group-hover:border-red-700 dark:group-hover:border-red-500 transition-colors duration-200">
          <div class="flex-1">
            <p class="text-sm font-medium text-stone-800 dark:text-stone-300 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-200 line-clamp-2">Cultural Heritage Vandalized in Ongoing Conflict</p>
            <p class="text-xs text-stone-600 dark:text-stone-500 mt-1">3 days ago</p>
          </div>
        </a>
      </div>
    </div>

    <!-- Newsletter & Contact -->
    <div>
      <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-200 mb-6 uppercase tracking-wider relative group">
        Stay Connected
        <span class="block h-1 w-8 bg-red-700 dark:bg-red-500 absolute bottom-0 left-0 transition-all duration-300 group-hover:w-16"></span>
      </h3>
      <p class="text-sm text-stone-700 dark:text-stone-400 mb-4">Subscribe to our newsletter for daily updates straight to your inbox.</p>
      <form class="flex flex-col space-y-3">
        <input type="email" placeholder="Your email address" aria-label="Your email address" class="px-4 py-2 rounded-md bg-stone-50 border border-stone-300 dark:bg-stone-800 dark:border-stone-700 text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-red-700 dark:focus:ring-red-500 focus:border-transparent outline-none transition-all duration-200">
        <button type="submit" class="bg-red-700 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 text-amber-100 font-bold py-2 px-4 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-700 dark:focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-900 shadow-md text-sm uppercase tracking-wider">
          Subscribe
        </button>
      </form>
      <div class="mt-8">
        <h4 class="text-md font-semibold text-stone-900 dark:text-stone-200 mb-3">Quick Links</h4>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">About Us</a></li>
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Careers</a></li>
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Press Room</a></li>
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Privacy Policy</a></li>
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Terms of Service</a></li>
        </ul>
      </div>
    </div>

  </div>

  <!-- Footer Bottom / Copyright -->
  <div class="mt-12 pt-8 border-t border-stone-300 dark:border-stone-700 text-center text-sm text-stone-600 dark:text-stone-500">
    <p>&copy; 2023 The Daily Gazette. All rights reserved. <span class="hidden md:inline">Designed with a nod to Bauhaus principles and timeless journalism.</span></p>
  </div>
</footer>

아르 데코 의료 비디오 플레이어

아르데코 그레이스케일 미학을 가진 간단하고 반응이 빠른 비디오 플레이어 구성 요소로, 다크 모드 지원을 포함한 의료/의료 애플리케이션을 위해 설계되었습니다.

열다 미리 보기

                <div class="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900 font-serif p-4">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 shadow-lg border-2 border-gray-300 dark:border-gray-700 overflow-hidden relative group">
    
    <!-- Top Art Deco Border Element -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-gradient-to-r from-gray-700 via-gray-500 to-gray-700 dark:from-gray-300 dark:via-gray-400 dark:to-gray-300 z-10 opacity-75 group-hover:opacity-100 transition-opacity duration-300">
      <div class="flex h-full">
        <div class="w-1/4 h-full bg-gray-500 dark:bg-gray-400 transform skew-x-12 -ml-2"></div>
        <div class="w-1/4 h-full bg-gray-600 dark:bg-gray-500 transform skew-x-12 -ml-2"></div>
        <div class="w-1/4 h-full bg-gray-600 dark:bg-gray-500 transform skew-x-12 -ml-2"></div>
        <div class="w-1/4 h-full bg-gray-500 dark:bg-gray-400 transform skew-x-12 -ml-2"></div>
      </div>
    </div>

    <div class="p-4 sm:p-6 lg:p-8 pt-8 relative z-20">
      <header class="mb-6 text-center">
        <h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2 tracking-wider uppercase">
          <span class="text-gray-600 dark:text-gray-400 mr-1">Medical</span> <span class="text-gray-900 dark:text-white">Procedure Overview</span>
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-400 italic">Understanding the Key Steps</p>
      </header>

      <div class="relative pb-[56.25%] h-0 mb-6 border border-gray-400 dark:border-gray-600 shadow-inner overflow-hidden">
        <!-- Placeholder for actual video embed, use a static image for visual representation only -->
        <img src="https://picsum.photos/800/450?gravity=center&blur=2" alt="Medical procedure video placeholder" class="absolute inset-0 w-full h-full object-cover filter brightness-75">
        <div class="absolute inset-0 flex items-center justify-center">
          <button class="relative z-10 p-4 rounded-full bg-gray-900 bg-opacity-70 dark:bg-gray-100 dark:bg-opacity-70 text-white dark:text-gray-800 hover:scale-110 transition-transform duration-300 transform motion-safe:ease-out ring-4 ring-gray-600 dark:ring-gray-400">
            <svg class="w-10 h-10 sm:w-12 sm:h-12" fill="currentColor" viewBox="0 0 24 24">
              <path d="M8 5v14l11-7z"/>
            </svg>
            <span class="sr-only">Play Video</span>
          </button>
        </div>
         <!-- Geometric Overlay for Video -->
        <div class="absolute inset-0 z-0 opacity-20 dark:opacity-30">
          <div class="grid grid-cols-4 grid-rows-4 w-full h-full">
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>

            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>

            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>

            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
            <div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
            <div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
          </div>
        </div>
      </div>

      <div class="text-center">
        <p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
          This video provides a concise overview of the essential steps involved in a common medical procedure. For detailed information, please consult with a healthcare professional.
        </p>
        <p class="text-sm text-gray-500 dark:text-gray-500 mt-2">
          <time datetime="PT2M30S">Duration: 2:30</time>
        </p>
      </div>
    </div>

    <!-- Bottom Art Deco Border Element -->
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-r from-gray-700 via-gray-500 to-gray-700 dark:from-gray-300 dark:via-gray-400 dark:to-gray-300 z-10 opacity-75 group-hover:opacity-100 transition-opacity duration-300">
     <div class="flex h-full">
        <div class="w-1/4 h-full bg-gray-500 dark:bg-gray-400 transform -skew-x-12 -mr-2"></div>
        <div class="w-1/4 h-full bg-gray-600 dark:bg-gray-500 transform -skew-x-12 -mr-2"></div>
        <div class="w-1/4 h-full bg-gray-600 dark:bg-gray-500 transform -skew-x-12 -mr-2"></div>
        <div class="w-1/4 h-full bg-gray-500 dark:bg-gray-400 transform -skew-x-12 -mr-2"></div>
      </div>
    </div>
  </div>
</div>

Monospace_Developer_Rating_System_Component

소셜 미디어 인터페이스를 위한 깔끔한 코드 기반 등급 시스템 구성 요소로, 고정 폭 글꼴, 터미널 미학 및 보색을 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다 미리 보기

                <div class="font-['JetBrains_Mono',_monospace] bg-gradient-to-br from-indigo-50 to-purple-50 text-slate-800 dark:from-slate-900 dark:to-slate-800 dark:text-slate-200 p-6 sm:p-8 md:p-10 rounded-lg shadow-xl border border-solid border-indigo-200 dark:border-slate-700 max-w-sm mx-auto transition-colors duration-300">
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
  <style>
    /* Basic reset for illustration purposes within the component */
    .rating-star-input { display: none; }
    .rating-star-label { cursor: pointer; transition: color 0.2s ease-in-out, transform 0.2s ease-in-out; }
    .rating-star-label:hover { transform: scale(1.1); }
    .rating-star-label:focus { outline: none; box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5); /* indigo-500 */ }
    .rating-star-input:checked ~ .rating-star-label.star-icon,
    .rating-star-input:checked + .rating-star-label.star-icon {
      color: #7c3aed; /* violet-600 for checked stars */
    }
    .dark .rating-star-input:checked ~ .rating-star-label.star-icon,
    .dark .rating-star-input:checked + .rating-star-label.star-icon {
      color: #a78bfa; /* violet-400 for dark mode checked stars */
    }
    .rating-star-label.star-icon {
      color: #94a3b8; /* slate-400 for unchecked stars */
    }
    .dark .rating-star-label.star-icon {
      color: #475569; /* slate-700 for dark mode unchecked stars */
    }
  </style>

  <div class="flex items-center mb-4">
    <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-indigo-400 dark:border-violet-600 mr-4 shadow-md">
    <div>
      <p class="text-lg font-bold text-slate-900 dark:text-slate-100">@dev_master</p>
      <p class="text-xs text-slate-600 dark:text-slate-400">Senior Front-End Dev</p>
    </div>
  </div>

  <h3 class="text-xl font-bold mb-3 text-slate-900 dark:text-slate-100">Rate this project:</h3>

  <div class="flex justify-center text-3xl mb-6">
    <input type="radio" id="star5" name="rating" value="5" class="rating-star-input">
    <label for="star5" class="rating-star-label star-icon" aria-label="5 stars">★</label>
    <input type="radio" id="star4" name="rating" value="4" class="rating-star-input">
    <label for="star4" class="rating-star-label star-icon" aria-label="4 stars">★</label>
    <input type="radio" id="star3" name="rating" value="3" class="rating-star-input">
    <label for="star3" class="rating-star-label star-icon" aria-label="3 stars">★</label>
    <input type="radio" id="star2" name="rating" value="2" class="rating-star-input">
    <label for="star2" class="rating-star-label star-icon" aria-label="2 stars">★</label>
    <input type="radio" id="star1" name="rating" value="1" class="rating-star-input">
    <label for="star1" class="rating-star-label star-icon" aria-label="1 star">★</label>
  </div>

  <div class="mb-6">
    <label for="comment" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Add a quick comment:</label>
    <textarea id="comment" class="w-full p-3 bg-white dark:bg-slate-700 border border-indigo-300 dark:border-slate-600 rounded-md shadow-sm text-slate-800 dark:text-slate-200 placeholder-slate-400 dark:placeholder-slate-500 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all duration-200 text-sm h-24 resize-none" placeholder="e.g., 'Excellent codebase!'"></textarea>
  </div>

  <button class="w-full py-3 px-4 bg-violet-600 hover:bg-violet-700 dark:bg-violet-700 dark:hover:bg-violet-600 text-white font-bold rounded-lg shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900 transition-all duration-200 text-lg">
    SUBMIT RATING <span class="text-xs ml-2">// &gt;</span>
  </button>

  <div class="mt-6 pt-4 border-t border-indigo-200 dark:border-slate-700 text-xs text-slate-500 dark:text-slate-400 text-center">
    <p><code>[status: live]</code> <span class="mx-1">•</span> <code>build: 0.0.1-beta</code></p>
  </div>
</div>

1 2 3 4 5 6 ... 335

검색 구성 요소

카테고리

모든 구성 요소