모든 구성 요소

인포그래픽 구성 요소

Tailwind CSS를 사용하여 비즈니스/기업용으로 Neumorphism 디자인, 보색 구성표, 반응형 및 다크 모드 지원이 있는 복잡한 인포그래픽 구성 요소.

                <div class="min-h-screen bg-gray-200 dark:bg-gray-900 p-8 flex flex-col items-center justify-center"><div class="bg-gray-200 dark:bg-gray-800 rounded-3xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-8 max-w-6xl w-full transition-all duration-300 ease-in-out"><h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-12 text-center">Annual Business Overview</h1><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center transition-transform duration-300 hover:scale-105"><div class="w-24 h-24 rounded-full bg-indigo-500 dark:bg-indigo-700 mb-4 flex items-center justify-center text-white text-3xl font-bold shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark">+25%</div><h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Revenue Growth</h3><p class="text-gray-600 dark:text-gray-400 text-sm">Year-over-year increase in total revenue.</p></div><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center transition-transform duration-300 hover:scale-105"><div class="w-24 h-24 rounded-full bg-teal-500 dark:bg-teal-700 mb-4 flex items-center justify-center text-white text-3xl font-bold shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark">$12M</div><h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Net Profit</h3><p class="text-gray-600 dark:text-gray-400 text-sm">Record-breaking profits for the fiscal year.</p></div><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center transition-transform duration-300 hover:scale-105"><div class="w-24 h-24 rounded-full bg-red-500 dark:bg-red-700 mb-4 flex items-center justify-center text-white text-3xl font-bold shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark">1500+</div><h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">New Clients</h3><p class="text-gray-600 dark:text-gray-400 text-sm">Expanding our client base significantly.</p></div><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center transition-transform duration-300 hover:scale-105"><div class="w-24 h-24 rounded-full bg-yellow-500 dark:bg-yellow-700 mb-4 flex items-center justify-center text-white text-3xl font-bold shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark">98%</div><h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Client Retention</h3><p class="text-gray-600 dark:text-gray-400 text-sm">Strong client satisfaction and loyalty.</p></div></div><div class="mt-12"><h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8 text-center">Key Performance Indicators</h2><div class="grid grid-cols-1 lg:grid-cols-2 gap-8"><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6"><h3 class="text-2xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Market Share Analysis</h3><p class="text-gray-600 dark:text-gray-400 mb-4">Our market share has seen a steady increase, climbing from 15% to 20% in the last quarter, outpacing competitors through strategic initiatives and product innovations. This growth is attributed to aggressive marketing campaigns and enhanced product features that resonate with our target audience.</p><div class="h-48 bg-gray-300 dark:bg-gray-700 rounded-lg flex items-center justify-center text-gray-500 dark:text-gray-300"><p>Placeholder for Market Share Chart</p></div></div><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6"><h3 class="text-2xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Employee Satisfaction Survey</h3><p class="text-gray-600 dark:text-gray-400 mb-4">Employee satisfaction remains high at an average of 4.5 out of 5 stars. Key factors contributing to this excellent rating include flexible work arrangements, professional development opportunities, and a supportive work environment. We continue to invest in our employees' well-being and growth.</p><div class="h-48 bg-gray-300 dark:bg-gray-700 rounded-lg flex items-center justify-center text-gray-500 dark:text-gray-300"><p>Placeholder for Employee Satisfaction Chart</p></div></div></div></div><div class="mt-12"><h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8 text-center">Customer Testimonials</h2><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center"><img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-20 h-20 rounded-full mb-4 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark"><p class="text-gray-600 dark:text-gray-400 italic mb-4">"The insights provided by this company were invaluable. Our business has never been more efficient!"</p><p class="font-semibold text-gray-700 dark:text-gray-200">John Doe, CEO of Alpha Corp</p></div><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center"><img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-20 h-20 rounded-full mb-4 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark"><p class="text-gray-600 dark:text-gray-400 italic mb-4">"Their data analysis transformed our marketing strategy. Highly recommended!"</p><p class="font-semibold text-gray-700 dark:text-gray-200">Jane Smith, Marketing Director at Beta Ltd</p></div><div class="bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark p-6 flex flex-col items-center text-center"><img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-20 h-20 rounded-full mb-4 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark"><p class="text-gray-600 dark:text-gray-400 italic mb-4">"A truly professional team with impactful solutions. We saw immediate positive results."</p><p class="font-semibold text-gray-700 dark:text-gray-200">David Lee, Founder of Gamma Solutions</p></div></div></div><div class="mt-12 text-center"><h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-8">Future Outlook</h2><p class="text-gray-700 dark:text-gray-300 leading-relaxed max-w-3xl mx-auto">Looking ahead, we are focused on expanding into new markets, innovating our product lines, and enhancing customer experience. Our projections indicate continued growth and a stronger market presence, driven by our commitment to excellence and strategic partnerships.</p><button class="mt-8 px-8 py-4 bg-purple-600 dark:bg-purple-800 text-white font-bold rounded-full shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark hover:bg-purple-700 dark:hover:bg-purple-900 transition-all duration-300 ease-in-out">Download Full Report</button></div></div></div><style>.shadow-neumorphic-light {box-shadow: 9px 9px 18px #a7a7a7, -9px -9px 18px #ffffff;}.dark .shadow-neumorphic-dark {box-shadow: 9px 9px 18px #1a1a1a, -9px -9px 18px #2a2a2a;}.shadow-neumorphic-card-light {box-shadow: 6px 6px 12px #a7a7a7, -6px -6px 12px #ffffff;}.dark .shadow-neumorphic-card-dark {box-shadow: 6px 6px 12px #1a1a1a, -6px -6px 12px #2a2a2a;}.shadow-neumorphic-circle-light {box-shadow: 7px 7px 14px #8f8f8f, -7px -7px 14px #ffffff;}.dark .shadow-neumorphic-circle-dark {box-shadow: 7px 7px 14px #151515, -7px -7px 14px #303030;}.shadow-neumorphic-button-light {box-shadow: 6px 6px 12px #9c27b0, -6px -6px 12px #d589e4;}.dark .shadow-neumorphic-button-dark {box-shadow: 6px 6px 12px #512da8, -6px -6px 12px #673ab7;}</style>

차트 구성 요소

비즈니스 웹사이트를 위한 브루탈리즘 스타일의 차트 구성 요소로, 삼각형 색 구성표와 적당한 복잡성을 특징으로 합니다. 여기에는 Tailwind CSS를 사용하는 반응형 디자인과 다크 모드 지원이 포함됩니다.

미리보기 열기

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-6xl mx-auto">
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-6 mb-8">
      <h2 class="text-3xl font-black text-black dark:text-white mb-4 uppercase">Sales Performance</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Chart 1 -->
        <div class="border-4 border-black dark:border-white p-4 bg-red-400 dark:bg-red-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
          <h3 class="text-xl font-bold text-black dark:text-white mb-2">Quarterly Revenue</h3>
          <div class="h-48 bg-black dark:bg-white flex items-end overflow-hidden">
            <div class="w-1/4 h-3/4 bg-yellow-400 dark:bg-yellow-500 border-r-2 border-black"></div>
            <div class="w-1/4 h-1/2 bg-blue-400 dark:bg-blue-500 border-r-2 border-black"></div>
            <div class="w-1/4 h-5/6 bg-orange-400 dark:bg-orange-500 border-r-2 border-black"></div>
            <div class="w-1/4 h-2/3 bg-green-400 dark:bg-green-500"></div>
          </div>
          <div class="flex justify-between text-black dark:text-white mt-2 text-sm font-bold">
            <span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span>
          </div>
        </div>

        <!-- Chart 2 -->
        <div class="border-4 border-black dark:border-white p-4 bg-yellow-400 dark:bg-yellow-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
          <h3 class="text-xl font-bold text-black dark:text-white mb-2">Market Share</h3>
          <div class="h-48 bg-black dark:bg-white flex items-center justify-center relative">
            <div class="absolute w-32 h-32 rounded-full bg-blue-400 dark:bg-blue-500 border-4 border-black dark:border-white z-10"></div>
            <div class="absolute w-24 h-24 rounded-full bg-red-400 dark:bg-red-500 z-20"></div>
            <div class="absolute w-16 h-16 rounded-full bg-green-400 dark:bg-green-500 z-30"></div>
            <div class="absolute w-8 h-8 rounded-full bg-purple-400 dark:bg-purple-500 z-40"></div>
          </div>
          <div class="flex justify-around text-black dark:text-white mt-2 text-sm font-bold">
            <span>A (40%)</span><span>B (25%)</span><span>C (20%)</span><span>D (15%)</span>
          </div>
        </div>

        <!-- Chart 3 -->
        <div class="border-4 border-black dark:border-white p-4 bg-blue-400 dark:bg-blue-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
          <h3 class="text-xl font-bold text-black dark:text-white mb-2">Customer Growth</h3>
          <div class="h-48 bg-black dark:bg-white flex flex-col justify-end p-2">
            <div class="flex items-end h-full">
              <div class="w-1/5 h-1/4 bg-orange-400 dark:bg-orange-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-1/2 bg-cyan-400 dark:bg-cyan-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-3/4 bg-lime-400 dark:bg-lime-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-2/3 bg-pink-400 dark:bg-pink-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-1/3 bg-purple-400 dark:bg-purple-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
            </div>
          </div>
          <div class="flex justify-between text-black dark:text-white mt-2 text-sm font-bold">
            <span>2019</span><span>2020</span><span>2021</span><span>2022</span><span>2023</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Additional Section for more data or controls -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-6">
      <h3 class="text-2xl font-black text-black dark:text-white mb-4 uppercase">Key Metrics</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
        <div class="border-2 border-black dark:border-white p-4 bg-green-400 dark:bg-green-700 text-black dark:text-white font-bold">
          <p class="text-4xl">1.2M</p>
          <p>Total Sales</p>
        </div>
        <div class="border-2 border-black dark:border-white p-4 bg-purple-400 dark:bg-purple-700 text-black dark:text-white font-bold">
          <p class="text-4xl">15%</p>
          <p>Growth Rate</p>
        </div>
        <div class="border-2 border-black dark:border-white p-4 bg-orange-400 dark:bg-orange-700 text-black dark:text-white font-bold">
          <p class="text-4xl">£250K</p>
          <p>Net Profit</p>
        </div>
      </div>
    </div>
  </div>
</div>

Heat Maps 구성 요소

Glassmorphism 스타일, 유사한 색 구성표 및 포트폴리오에 대한 적당한 복잡성을 갖춘 반응형 Heat Maps 구성 요소이며 어두운 테마를 지원합니다.

미리보기 열기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 transform transition-all duration-300">
    <div class="p-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Activity Heatmap</h2>
      <div class="grid grid-cols-7 gap-1 text-center text-sm text-gray-600 dark:text-gray-300 mb-2">
        <span>Mon</span>
        <span>Tue</span>
        <span>Wed</span>
        <span>Thu</span>
        <span>Fri</span>
        <span>Sat</span>
        <span>Sun</span>
      </div>
      <div class="grid grid-cols-7 gap-1">
        <!-- Loop for weeks -->
        {[...Array(4)].map((_, weekIndex) => (
          // Loop for days
          [...Array(7)].map((_, dayIndex) => {
            const intensity = Math.floor(Math.random() * 5); // 0-4 for intensity
            const colors = [
              "bg-purple-200 dark:bg-purple-800",
              "bg-purple-300 dark:bg-purple-700",
              "bg-purple-400 dark:bg-purple-600",
              "bg-purple-500 dark:bg-purple-500",
              "bg-purple-600 dark:bg-purple-400"
            ];
            return (
              <div
                key={`${weekIndex}-${dayIndex}`}
                class={`h-8 w-full rounded-sm ${colors[intensity]} transform hover:scale-105 transition-transform duration-200 cursor-pointer`}
                title={`Day ${dayIndex + 1}, Week ${weekIndex + 1}: Intensity ${intensity}`}
              ></div>
            );
          })
        ))}
      </div>
      <div class="flex justify-between items-center mt-6 text-gray-600 dark:text-gray-300 text-sm">
        <span>Less</span>
        <div class="flex space-x-1">
          <div class="h-4 w-4 bg-purple-200 dark:bg-purple-800 rounded-sm"></div>
          <div class="h-4 w-4 bg-purple-300 dark:bg-purple-700 rounded-sm"></div>
          <div class="h-4 w-4 bg-purple-400 dark:bg-purple-600 rounded-sm"></div>
          <div class="h-4 w-4 bg-purple-500 dark:bg-purple-500 rounded-sm"></div>
          <div class="h-4 w-4 bg-purple-600 dark:bg-purple-400 rounded-sm"></div>
        </div>
        <span>More</span>
      </div>
    </div>
  </div>
</div>

CAPTCHA 구성 요소

소셜 미디어 플랫폼에 적합한 트라이어딕 색 구성표가 있는 Glassmorphism 스타일의 CAPTCHA 구성 요소입니다. 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소가 특징이며, 중간 정도의 복잡성과 일부 상호 작용 기능이 있습니다. 디자인은 반응형이며 다크 모드 지원을 포함합니다.

미리보기 열기

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4">
  <div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl p-8 w-full max-w-md border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-30 transform transition-all duration-300 hover:scale-105">
    <h2 class="text-3xl font-bold text-white dark:text-gray-100 mb-6 text-center drop-shadow-lg">Verify You Are Human</h2>

    <div class="flex flex-col md:flex-row items-center justify-between bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg p-4 mb-6 shadow-inner border border-white border-opacity-20 dark:border-gray-600">
      <img src="https://picsum.photos/id/1025/100/50" alt="CAPTCHA Image" class="rounded-md mb-4 md:mb-0 md:mr-4 shadow-md">
      <div class="flex-grow">
        <p class="text-white dark:text-gray-200 text-sm mb-2">Click the image that contains a <b>bicycle</b>.</p>
        <div class="grid grid-cols-3 gap-2">
          <img src="https://picsum.photos/id/237/80/80" alt="Option 1" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/190/80/80" alt="Option 2" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/257/80/80" alt="Option 3" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/214/80/80" alt="Option 4" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/286/80/80" alt="Option 5" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
          <img src="https://picsum.photos/id/27/80/80" alt="Option 6" class="w-full h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-blue-300 transition-all duration-200 shadow-sm">
        </div>
      </div>
    </div>

    <div class="flex items-center text-white dark:text-gray-200 mb-6">
      <input type="checkbox" id="robot-check" class="form-checkbox h-5 w-5 text-blue-400 bg-white bg-opacity-30 dark:bg-gray-600 dark:bg-opacity-50 border-white border-opacity-30 dark:border-gray-500 rounded-md focus:ring-blue-400 mr-3">
      <label for="robot-check" class="text-sm select-none">I'm not a robot</label>
    </div>

    <button class="w-full py-3 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-lg shadow-lg transform transition-transform duration-200 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-opacity-75 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      Verify
    </button>

    <p class="text-white dark:text-gray-300 text-xs text-center mt-4 opacity-75">Verification helps keep our community safe.</p>
  </div>
</div>

Two-Factor Authentication 구성 요소

생생하고 단순한 디자인의 2단계 인증 구성 요소입니다. 미묘한 버튼 애니메이션 및 입력 필드 전환과 같은 마이크로 상호 작용이 특징입니다. 다크 모드 지원으로 반응형. 포트폴리오를 위한 설계.

미리보기 열기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
  <div class="sm:mx-auto sm:w-full sm:max-w-md">
    <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
      Two-Factor Authentication
    </h2>
  </div>

  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
      <form class="space-y-6" action="#" method="POST">
        <div>
          <label for="code" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Enter your 6-digit code
          </label>
          <div class="mt-1">
            <input id="code" name="code" type="text" autocomplete="one-time-code" required
                   class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm
                          bg-white dark:bg-gray-900 text-gray-900 dark:text-white
                          transition duration-300 ease-in-out transform hover:scale-105">
          </div>
        </div>

        <div>
          <button type="submit"
                  class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500
                         transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
            Verify
          </button>
        </div>
      </form>

      <div class="mt-6">
        <div class="relative">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
              Or
            </span>
          </div>
        </div>

        <div class="mt-6">
          <button type="button"
                  class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm bg-white dark:bg-gray-900 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-500 dark:hover:bg-gray-700
                         transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
            Resend Code
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Social Share Buttons 구성 요소

단색 색 구성표가 있는 레트로/빈티지 소셜 공유 버튼 구성 요소입니다. 포트폴리오에 적합한 어두운 테마를 지원하는 복잡하고 반응이 빠른 디자인입니다. JavaScript 없이 Tailwind CSS를 사용합니다.

미리보기 열기

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-sm w-full">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Share My Work</h2>
    <div class="grid grid-cols-2 gap-4">
      <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c.96.2 1.956.333 3.013.333 1.056 0 2.052-.133 3.013-.333L10.3 12.3l-2.01 7.951zM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c.002-.001.004-.002.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>Twitter</span>
      </a>
      <a href="#" class="bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm5 10c0 .99-.607 1.83-1.472 2.15l-.008.003c.594-.962.88-2.03.88-3.15 0-2.316-1.528-4.28-3.92-4.86.04-.15.06-.3.06-.47 0-.74-.23-1.43-.63-2.02l-.004-.007C15.176 4.968 16.945 8.163 17 12zm-3.5 0c0 1.93-1.57 3.5-3.5 3.5S8.5 13.93 8.5 12 10.07 8.5 12 8.5s3.5 1.57 3.5 3.5zm-5.748-1.58C9.53 9.71 10.74 9 12 9s2.47.71 3.248 1.42c-.77-.42-1.68-.67-2.67-.67-.99 0-1.9.25-2.67.67zM12 20.1C8.28 20.1 5 16.82 5 12c0-1.76.67-3.41 1.79-4.66l-.007-.008C5.176 8.163 3 11.233 3 12c0 2.21 1.79 4 4 4v-1h-.5a1.5 1.5 0 00-1.5 1.5v2c0 .83.67 1.5 1.5 1.5h11c.83 0 1.5-.67 1.5-1.5v-2a1.5 1.5 0 00-1.5-1.5H17v-1c2.21 0 4-1.79 4-4s-1.79-4-4-4v1h.5a1.5 1.5 0 001.5-1.5v-2c0-.83-.67-1.5-1.5-1.5h-11c-.83 0-1.5.67-1.5 1.5v2zm4.708 1.42A5.726 5.726 0 0017.9 12c0-1.02-.19-2.007-.545-2.923l-1.107.306c-.002.001-.004.002-.006.003L16.708 11.43z"/></svg>
        <span>Facebook</span>
      </a>
      <a href="#" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.5 13.5h-9V8.5h9v7zm-2-5H9.5v-2h5v2zm-2.5 5H9.5v-2h2.5v2zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>YouTube</span>
      </a>
      <a href="#" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>Instagram</span>
      </a>
      <a href="#" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>GitHub</span>
      </a>
      <a href="#" class="bg-blue-400 hover:bg-blue-500 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>LinkedIn</span>
      </a>
    </div>
  </div>
</div>

사용자 프로필 구성 요소

Tailwind CSS로 구축된 다크 모드 파스텔 테마가 있는 대시보드용 반응형 사용자 프로필 구성 요소입니다. 사용자 아바타, 이름, 역할 및 간단한 설명이 팔로우 버튼과 함께 표시됩니다. 디자인은 다양한 화면 크기에 맞게 조정되고 시스템 기본 설정에 따라 다크 모드를 지원합니다.

미리보기 열기

                <div class="min-h-screen bg-gray-900 p-4 dark:bg-gray-900">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        <!-- User Profile Card 1 -->
        <div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
            <div class="flex flex-col items-center">
                <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
                <h2 class="text-xl font-semibold text-purple-300 dark:text-purple-300">John Doe</h2>
                <p class="text-blue-300 dark:text-blue-300">Software Engineer</p>
                <p class="text-gray-400 text-center mt-2 dark:text-gray-400">Passionate about clean code and scalable architectures.</p>
                <button class="mt-4 px-6 py-2 rounded-full bg-purple-600 text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700">Follow</button>
            </div>
        </div>

        <!-- User Profile Card 2 -->
        <div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
            <div class="flex flex-col items-center">
                <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
                <h2 class="text-xl font-semibold text-green-300 dark:text-green-300">Jane Smith</h2>
                <p class="text-teal-300 dark:text-teal-300">UI/UX Designer</p>
                <p class="text-gray-400 text-center mt-2 dark:text-gray-400">Creating intuitive and beautiful user experiences.</p>
                <button class="mt-4 px-6 py-2 rounded-full bg-green-600 text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 dark:bg-green-600 dark:hover:bg-green-700">Follow</button>
            </div>
        </div>

        <!-- User Profile Card 3 -->
        <div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
            <div class="flex flex-col items-center">
                <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
                <h2 class="text-xl font-semibold text-blue-300 dark:text-blue-300">Peter Jones</h2>
                <p class="text-cyan-300 dark:text-cyan-300">Data Scientist</p>
                <p class="text-gray-400 text-center mt-2 dark:text-gray-400">Uncovering insights from complex datasets.</p>
                <button class="mt-4 px-6 py-2 rounded-full bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700">Follow</button>
            </div>
        </div>

        <!-- User Profile Card 4 -->
        <div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
            <div class="flex flex-col items-center">
                <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/65.jpg" alt="User Avatar">
                <h2 class="text-xl font-semibold text-yellow-300 dark:text-yellow-300">Sarah Brown</h2>
                <p class="text-orange-300 dark:text-orange-300">Product Manager</p>
                <p class="text-gray-400 text-center mt-2 dark:text-gray-400">Bringing innovative products to life.</p>
                <button class="mt-4 px-6 py-2 rounded-full bg-yellow-600 text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50 dark:bg-yellow-600 dark:hover:bg-yellow-700">Follow</button>
            </div>
        </div>

        <!-- User Profile Card 5 -->
        <div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
            <div class="flex flex-col items-center">
                <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar">
                <h2 class="text-xl font-semibold text-red-300 dark:text-red-300">Michael Green</h2>
                <p class="text-pink-300 dark:text-pink-300">DevOps Engineer</p>
                <p class="text-gray-400 text-center mt-2 dark:text-gray-400">Automating deployments and managing infrastructure.</p>
                <button class="mt-4 px-6 py-2 rounded-full bg-red-600 text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 dark:bg-red-600 dark:hover:bg-red-700">Follow</button>
            </div>
        </div>

        <!-- User Profile Card 6 -->
        <div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
            <div class="flex flex-col items-center">
                <img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
                <h2 class="text-xl font-semibold text-indigo-300 dark:text-indigo-300">Emily White</h2>
                <p class="text-violet-300 dark:text-violet-300">Marketing Specialist</p>
                <p class="text-gray-400 text-center mt-2 dark:text-gray-400">Crafting engaging campaigns and analyzing market trends.</p>
                <button class="mt-4 px-6 py-2 rounded-full bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 dark:bg-indigo-600 dark:hover:bg-indigo-700">Follow</button>
            </div>
        </div>

    </div>
</div>

Progress Indicators 구성 요소

반응형 Progress Indicators 컴포넌트는 유사한 색 구성표를 가진 다크 모드 UI 대시보드용으로 설계되었습니다. 여기에는 막대, 원 및 활동 피드와 같은 다양한 진행률 표시기가 포함되어 있으며 모두 다크 모드 지원을 위해 Tailwind CSS로 스타일이 지정되었습니다. JavaScript는 사용되지 않습니다.

미리보기 열기

                <div class="min-h-screen bg-gray-900 text-gray-100 p-8 dark:bg-gray-900">
  <h1 class="text-4xl font-bold mb-8 text-indigo-400">Dashboard Progress</h1>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Progress Bar 1 -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold mb-4 text-purple-300">Project Alpha Progress</h2>
      <div class="w-full bg-gray-700 rounded-full h-4 mb-2">
        <div class="bg-gradient-to-r from-purple-500 to-indigo-500 h-4 rounded-full" style="width: 75%;"></div>
      </div>
      <p class="text-sm text-gray-400">75% Complete - Next deadline in 5 days</p>
    </div>

    <!-- Progress Bar 2 -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold mb-4 text-blue-300">Task Beta Completion</h2>
      <div class="w-full bg-gray-700 rounded-full h-4 mb-2">
        <div class="bg-gradient-to-r from-blue-500 to-cyan-500 h-4 rounded-full" style="width: 90%;"></div>
      </div>
      <p class="text-sm text-gray-400">90% Done - Awaiting final review</p>
    </div>

    <!-- Circular Progress -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col items-center">
      <h2 class="text-2xl font-semibold mb-4 text-green-300">Server Load</h2>
      <div class="relative w-24 h-24 mb-2">
        <svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
          <circle class="text-gray-700 stroke-current" stroke-width="10" cx="50" cy="50" r="40" fill="transparent"></circle>
          <circle class="text-green-500 stroke-current progress-ring__circle" stroke-width="10" stroke-linecap="round" cx="50" cy="50" r="40" fill="transparent" stroke-dasharray="251.2" stroke-dashoffset="62.8"></circle>
        </svg>
        <span class="absolute inset-0 flex items-center justify-center text-xl font-bold text-green-400">75%</span>
      </div>
      <p class="text-sm text-gray-400">Current CPU Usage</p>
    </div>

    <!-- Activity Feed -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg col-span-1 md:col-span-2 lg:col-span-1">
      <h2 class="text-2xl font-semibold mb-4 text-orange-300">Recent Activity</h2>
      <ul class="space-y-4">
        <li class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-3 h-3 rounded-full bg-orange-500"></div>
          <p class="text-gray-300"><span class="font-medium">John Doe</span> updated project status <span class="text-orange-400">"In Progress"</span></p>
        </li>
        <li class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-3 h-3 rounded-full bg-orange-500"></div>
          <p class="text-gray-300"><span class="font-medium">Jane Smith</span> completed <span class="text-orange-400">"Design Mockups"</span> task</p>
        </li>
        <li class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-3 h-3 rounded-full bg-orange-500"></div>
          <p class="text-gray-300"><span class="font-medium">Team Lead</span> reviewed <span class="text-orange-400">" sprint 2 tasks"</span></p>
        </li>
      </ul>
    </div>

    <!-- Key Performance Indicators (KPIs) -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold mb-4 text-teal-300">Key Performance Indicators</h2>
      <div class="space-y-4">
        <div class="flex justify-between items-center">
          <span class="text-gray-300">Conversion Rate:</span>
          <span class="text-teal-400 font-bold">4.5%</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-gray-300">Bounce Rate:</span>
          <span class="text-red-400 font-bold">55%</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-gray-300">Avg. Session Duration:</span>
          <span class="text-teal-400 font-bold">3:45 min</span>
        </div>
      </div>
    </div>

    <!-- Donut Chart Placeholder (Conceptual, requires JS for actual functionality) -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col items-center justify-center">
      <h2 class="text-2xl font-semibold mb-4 text-pink-300">Project Distribution</h2>
      <div class="relative w-32 h-32">
        <div class="absolute inset-0 rounded-full bg-pink-500 opacity-70" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);"></div>
        <div class="absolute inset-0 rounded-full bg-purple-500 opacity-70" style="clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="w-20 h-20 rounded-full bg-gray-800"></div>
        </div>
      </div>
      <p class="text-sm text-gray-400 mt-2">Marketing (50%), Development (50%)</p>
    </div>

  </div>

  <!-- Footer or additional dashboard elements -->
  <div class="mt-8 text-center text-gray-600">
    <p>&copy; 2023 Dashboard Analytics. All rights reserved.</p>
  </div>

</div>

탭 구성 요소

머티리얼 디자인 스타일, 단색 색 구성표 및 어두운 테마 지원을 제공하는 반응형 탭 구성 요소로, 콘텐츠가 많은 웹 사이트를 위해 Tailwind CSS로 구축되었습니다.

미리보기 열기

                <div class="max-w-4xl mx-auto my-8">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="flex border-b border-gray-200 dark:border-gray-700">
      <button class="flex-1 py-4 px-6 text-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:text-blue-600 dark:focus:text-blue-400 border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition duration-300 ease-in-out">
        Recent Posts
      </button>
      <button class="flex-1 py-4 px-6 text-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:text-blue-600 dark:focus:text-blue-400 border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition duration-300 ease-in-out">
        Categories
      </button>
      <button class="flex-1 py-4 px-6 text-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:text-blue-600 dark:focus:text-blue-400 border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition duration-300 ease-in-out">
        Authors
      </button>
    </div>
    <div class="p-6">
      <!-- Content for 'Recent Posts' tab -->
      <div class="space-y-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">A Guide to Responsive Web Design</h3>
        <p class="text-gray-700 dark:text-gray-300">Learn the fundamentals of creating websites that adapt seamlessly to various screen sizes and devices.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
          <img class="w-8 h-8 rounded-full mr-2" src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
          <span>John Doe</span>
          <span class="mx-2">•</span>
          <span>October 26, 2023</span>
        </div>
        <hr class="border-gray-200 dark:border-gray-700">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Understanding CSS Grid Layout</h3>
        <p class="text-gray-700 dark:text-gray-300">Explore the power and flexibility of CSS Grid for building complex two-dimensional layouts.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
          <img class="w-8 h-8 rounded-full mr-2" src="https://www.randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
          <span>Jane Smith</span>
          <span class="mx-2">•</span>
          <span>October 20, 2023</span>
        </div>
      </div>

      <!-- Content for 'Categories' tab (hidden by default, would be shown with JS) -->
      <!-- <div class="space-y-4 hidden">
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300">
          <li>Technology</li>
          <li>Programming</li>
          <li>Design</li>
          <li>Lifestyle</li>
        </ul>
      </div> -->

      <!-- Content for 'Authors' tab (hidden by default, would be shown with JS) -->
      <!-- <div class="space-y-4 hidden">
        <div class="flex items-center space-x-4">
          <img class="w-12 h-12 rounded-full" src="https://www.randomuser.me/api/portraits/men/76.jpg" alt="Author Avatar">
          <div>
            <p class="font-semibold text-gray-900 dark:text-white">David Lee</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Content Creator</p>
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <img class="w-12 h-12 rounded-full" src="https://www.randomuser.me/api/portraits/women/65.jpg" alt="Author Avatar">
          <div>
            <p class="font-semibold text-gray-900 dark:text-white">Sarah Chen</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Tech Enthusiast</p>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</div>

OAuth 버튼 구성 요소

비즈니스/기업 웹 사이트를 위한 트라이어딕 색 구성표와 복잡한 대화형 요소가 있는 반응형 어두운 테마의 OAuth 버튼 구성 요소입니다.

미리보기 열기

                <div class="min-h-screen bg-gray-900 dark:bg-gray-900 flex flex-col items-center justify-center p-4"><div class="w-full max-w-md bg-gray-800 dark:bg-gray-800 rounded-lg shadow-xl p-8 space-y-6 border border-teal-500"><h2 class="text-3xl font-extrabold text-white text-center">Sign In / Sign Up</h2><p class="text-gray-400 text-center">Join our community and explore amazing features</p><div class="space-y-4"><button class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800"><img src="https://www.google.com/images/branding/googleg/1x/googleg_standard_color_64dp.png" alt="Google Icon" class="w-5 h-5 mr-3"/>Sign in with Google</button><button class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out dark:bg-indigo-700 dark:hover:bg-indigo-800"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Facebook_icon.svg/1200px-Facebook_icon.svg.png" alt="Facebook Icon" class="w-5 h-5 mr-3"/>Sign in with Facebook</button><button class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-pink-600 hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transition duration-300 ease-in-out dark:bg-pink-700 dark:hover:bg-pink-800"><img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub Icon" class="w-5 h-5 mr-3 border-white rounded-full"/>Sign in with GitHub</button></div><div class="relative flex items-center"><div class="flex-grow border-t border-gray-700"></div><span class="flex-shrink mx-4 text-gray-500">Or continue with</span><div class="flex-grow border-t border-gray-700"></div></div><form class="space-y-4"><input type="email" placeholder="Email Address" class="w-full px-4 py-3 rounded-md bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-500 border border-transparent focus:border-teal-500 transition duration-300 ease-in-out"/><input type="password" placeholder="Password" class="w-full px-4 py-3 rounded-md bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-500 border border-transparent focus:border-teal-500 transition duration-300 ease-in-out"/><button type="submit" class="w-full px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 transition duration-300 ease-in-out dark:bg-teal-700 dark:hover:bg-teal-800">Log In</button></form><p class="text-center text-gray-400">Don't have an account? <a href="#" class="text-teal-500 hover:text-teal-400 font-medium">Sign Up</a></p><div class="flex justify-around mt-6"><a href="#" class="text-gray-400 hover:text-white transition duration-300 ease-in-out text-sm">Privacy Policy</a><a href="#" class="text-gray-400 hover:text-white transition duration-300 ease-in-out text-sm">Terms of Service</a><a href="#" class="text-gray-400 hover:text-white transition duration-300 ease-in-out text-sm">Help</a></div></div></div>

카테고리