검색 구성 요소

카테고리

구성 요소 레이아웃 구성 요소

레이아웃 구성 요소

전체 페이지 레이아웃을 구조화하는 구성 요소

3D 레이아웃 구성 요소

반응형 3D 디자인 소셜 미디어 레이아웃 구성 요소로, 회색조 색 구성표를 특징으로 합니다. 소셜 네트워킹 인터페이스에 적합합니다.

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-6 transform hover:scale-105 transition-transform duration-300">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border-2 border-gray-300 dark:border-gray-700">
        <h2 class="text-gray-800 dark:text-white text-lg font-semibold ml-4">User Name</h2>
    </div>
    <div class="mb-4">
        <img src="https://picsum.photos/400/200" alt="Post Image" class="rounded-lg shadow-md">  
    </div>
    <div class="text-gray-600 dark:text-gray-300">
        <p class="mb-2">This is a simple social media post showcasing a 3D design layout. Engage with your network in style!</p>
    </div>
    <div class="mt-4 flex space-x-4">
        <button class="bg-gray-800 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-gray-600">Like</button>
        <button class="bg-gray-800 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-gray-600">Comment</button>
    </div>
</div>

RetroBlog 레이아웃

레트로/빈티지 미학, 다크 모드 지원 및 보색 구성표가 있는 단순하고 반응형이 빠른 블로그 레이아웃으로, Tailwind CSS로 구축되었습니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-200 font-sans text-gray-800 dark:bg-gray-900 dark:text-gray-200">
  <header class="bg-blue-600 py-4 shadow-md dark:bg-blue-800">
    <div class="container mx-auto px-4">
      <h1 class="text-center text-3xl font-bold text-white">RetroBlog</h1>
    </div>
  </header>

  <main class="container mx-auto p-4">
    <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
      <!-- Main Content Area -->
      <section class="md:col-span-2">
        <article class="mb-6 rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h2 class="mb-2 text-2xl font-bold text-gray-900 dark:text-gray-100">Blog Post Title</h2>
          <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">Published on October 27, 2023</p>
          <img src="https://picsum.photos/seed/retro1/800/400" alt="Blog Post Image" class="mb-4 w-full rounded-md">
          <p class="text-gray-700 dark:text-gray-300">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </article>

        <article class="mb-6 rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h2 class="mb-2 text-2xl font-bold text-gray-900 dark:text-gray-100">Another Blog Post</h2>
          <p class="mb-4 text-sm text-gray-600 dark:text-gray-400">Published on October 26, 2023</p>
          <img src="https://picsum.photos/seed/retro2/800/400" alt="Blog Post Image" class="mb-4 w-full rounded-md">
          <p class="text-gray-700 dark:text-gray-300">
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </article>
      </section>

      <!-- Sidebar -->
      <aside>
        <div class="rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h3 class="mb-4 text-lg font-bold text-gray-900 dark:text-gray-100">About</h3>
          <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar" class="mb-4 w-16 h-16 rounded-full mx-auto">
          <p class="text-gray-700 text-center dark:text-gray-300">A passionate writer sharing thoughts and ideas on various topics.</p>
        </div>

        <div class="mt-6 rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
          <h3 class="mb-4 text-lg font-bold text-gray-900 dark:text-gray-100">Categories</h3>
          <ul>
            <li class="mb-2"><a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Technology</a></li>
            <li class="mb-2"><a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Lifestyle</a></li>
            <li><a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Travel</a></li>
          </ul>
        </div>
      </aside>
    </div>
  </main>

  <footer class="bg-gray-700 py-4 text-center text-white dark:bg-gray-900">
    <p>&copy; 2023 RetroBlog. All rights reserved.</p>
  </footer>
</div>

미니멀리스트 블로그 레이아웃 구성 요소

Minimalist Blog Layout Component with Monochromatic Color Scheme은 콘텐츠 소비를 위한 반응형 및 어두운 테마 지원을 제공합니다.

열다 미리 보기

                <div class="container mx-auto px-4 py-8 dark:bg-gray-900 dark:text-gray-200">
  <header class="text-center mb-12">
    <h1 class="text-4xl font-bold text-gray-800 dark:text-white">Blog Title</h1>
    <p class="text-gray-600 dark:text-gray-400">A space for thoughts and stories</p>
  </header>

  <main class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <div class="md:col-span-2">
      <article class="bg-white p-6 rounded-lg shadow-md mb-8 dark:bg-gray-800">
        <img src="https://picsum.photos/seed/article1/800/400" alt="Article Image" class="rounded-md mb-4">
        <h2 class="text-2xl font-semibold text-gray-800 mb-2 dark:text-white">First Article Title</h2>
        <p class="text-gray-700 leading-relaxed dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <button class="mt-4 text-blue-500 hover:underline dark:text-blue-400">Read More</button>
      </article>

      <article class="bg-white p-6 rounded-lg shadow-md mb-8 dark:bg-gray-800">
        <img src="https://picsum.photos/seed/article2/800/400" alt="Article Image" class="rounded-md mb-4">
        <h2 class="text-2xl font-semibold text-gray-800 mb-2 dark:text-white">Second Article Title</h2>
        <p class="text-gray-700 leading-relaxed dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <button class="mt-4 text-blue-500 hover:underline dark:text-blue-400">Read More</button>
      </article>
    </div>

    <div>
      <section class="bg-white p-6 rounded-lg shadow-md mb-8 dark:bg-gray-800">
        <h3 class="text-xl font-semibold text-gray-800 mb-4 dark:text-white">Recent Posts</h3>
        <ul>
          <li class="mb-2"><a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100">Recent Post 1</a></li>
          <li class="mb-2"><a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100">Recent Post 2</a></li>
          <li class="mb-2"><a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100">Recent Post 3</a></li>
        </ul>
      </section>

      <section class="bg-white p-6 rounded-lg shadow-md dark:bg-gray-800">
        <h3 class="text-xl font-semibold text-gray-800 mb-4 dark:text-white">About Me</h3>
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="rounded-full w-12 h-12 mr-4">
          <p class="text-gray-700 dark:text-gray-300">A short bio about the author of this blog.</p>
        </div>
      </section>
    </div>
  </main>

  <footer class="text-center mt-12 text-gray-600 dark:text-gray-400">
    <p>&copy; 2023 Blog Title. All rights reserved.</p>
  </footer>
</div>

3D 레이아웃 구성 요소

어두운 테마를 지원하는 생생한 색상을 사용하는 비즈니스/기업 웹 사이트를 위한 간단하고 반응이 빠르며 매력적인 3D 디자인 레이아웃입니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden md:flex md:flex-row">
    <div class="md:w-1/2 p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Welcome to Our Company</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">We provide innovative solutions to enhance your business.</p>
        <a href="#" class="bg-indigo-600 text-white rounded-lg px-4 py-2 hover:bg-indigo-700 transition duration-300 shadow-md transform hover:scale-105">Learn More</a>
    </div>
    <div class="md:w-1/2">
        <img src="https://picsum.photos/500/300" alt="Business Image" class="rounded-lg shadow-md w-full h-full object-cover" />
    </div>
</div>

<div class="flex justify-center mt-6">
    <div class="text-center bg-gray-100 dark:bg-gray-900 rounded-lg p-4 shadow-md">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Our Team</h3>
        <div class="flex items-center justify-center space-x-4 mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1" class="rounded-full w-16 h-16 shadow-lg" />
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar 2" class="rounded-full w-16 h-16 shadow-lg" />
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar 3" class="rounded-full w-16 h-16 shadow-lg" />
        </div>
        <p class="text-gray-600 dark:text-gray-400 mt-2">Meet our dedicated team of professionals.</p>
    </div>
</div>

레트로 소셜 미디어 레이아웃

소셜 미디어를 위한 단순하고 단색의 복고풍 테마 레이아웃으로, 다크 모드를 지원합니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row gap-8">
      <!-- Left Sidebar -->
      <div class="md:w-1/4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
          <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-4">Profile</h2>
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-white">John Doe</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">View Profile</p>
            </div>
          </div>
          <ul class="space-y-2">
            <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white text-sm">Feed</a></li>
            <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white text-sm">Messages</a></li>
            <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white text-sm">Settings</a></li>
          </ul>
        </div>
      </div>

      <!-- Main Content -->
      <div class="md:w-1/2">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
          <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-4">Posts</h2>
          <div class="border-b border-gray-200 dark:border-gray-700 mb-6 pb-6">
            <div class="flex items-center mb-4">
              <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
              <div>
                <p class="font-semibold text-gray-800 dark:text-white">Jane Smith</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</p>
              </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">This is an example post with some sample text. #retro #coding</p>
             <img class="w-full rounded-lg" src="https://picsum.photos/seed/retro1/600/400" alt="Post Image">
          </div>
           <div class="border-b border-gray-200 dark:border-gray-700 mb-6 pb-6">
            <div class="flex items-center mb-4">
              <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
              <div>
                <p class="font-semibold text-gray-800 dark:text-white">Peter Jones</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">5 hours ago</p>
              </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">Another post example. Simple is often better. #monochromatic</p>
             <img class="w-full rounded-lg" src="https://picsum.photos/seed/retro2/600/400" alt="Post Image">
          </div>
        </div>
      </div>

      <!-- Right Sidebar -->
      <div class="md:w-1/4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
          <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-4">Suggestions</h2>
          <ul class="space-y-4">
            <li class="flex items-center">
              <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
              <div>
                <p class="font-semibold text-gray-800 dark:text-white">Sara White</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Follow</p>
              </div>
            </li>
             <li class="flex items-center">
              <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar">
              <div>
                <p class="font-semibold text-gray-800 dark:text-white">David Green</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Follow</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

레이아웃 구성 요소

마이크로 인터랙션과 파스텔 색 구성표를 활용하는 반응형 대시보드 레이아웃 구성 요소로, 다크 모드를 지원하는 데이터 시각화 및 제어판을 표시하도록 설계되었습니다.

열다 미리 보기

                <div class="min-h-screen bg-white dark:bg-gray-900 flex flex-col p-5">
  <header class="flex justify-between items-center mb-5">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Dashboard</h1>
    <button class="py-2 px-4 bg-blue-500 dark:bg-blue-700 text-white rounded-lg transition-transform transform hover:scale-105 hover:bg-blue-600 dark:hover:bg-blue-800 focus:outline-none">Logout</button>
  </header>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-pink-100 dark:bg-pink-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Statistics</h2>
      <p class="text-gray-600 dark:text-gray-400">Here are some stats about users.</p>
      <img src="https://picsum.photos/200/100" alt="User Stats" class="mt-2 rounded-md">
    </div>

    <div class="bg-green-100 dark:bg-green-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Overview</h2>
      <p class="text-gray-600 dark:text-gray-400">View the sales data.</p>
      <img src="https://picsum.photos/200/100" alt="Sales Overview" class="mt-2 rounded-md">
    </div>

    <div class="bg-blue-100 dark:bg-blue-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Recent Activity</h2>
      <p class="text-gray-600 dark:text-gray-400">Check out the latest activity.</p>
      <img src="https://picsum.photos/200/100" alt="Recent Activity" class="mt-2 rounded-md">
    </div>

    <div class="bg-yellow-100 dark:bg-yellow-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Server Status</h2>
      <p class="text-gray-600 dark:text-gray-400">Monitor server health.</p>
      <img src="https://picsum.photos/200/100" alt="Server Status" class="mt-2 rounded-md">
    </div>

    <div class="bg-purple-100 dark:bg-purple-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notifications</h2>
      <p class="text-gray-600 dark:text-gray-400">Your latest notifications.</p>
      <img src="https://picsum.photos/200/100" alt="Notifications" class="mt-2 rounded-md">
    </div>

    <div class="bg-red-100 dark:bg-red-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Profile</h2>
      <div class="flex items-center mt-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile" class="w-12 h-12 rounded-full mr-3">
        <p class="text-gray-600 dark:text-gray-400">John Doe</p>
      </div>
    </div>
  </div>

  <footer class="mt-5 text-center text-gray-500 dark:text-gray-400">
    <p>&copy; 2023 Dashboard. All rights reserved.</p>
  </footer>
</div>

Layout Components 컴포넌트

스큐어모픽 스타일로 디자인된 반응형 웹 구성 요소로, 비즈니스/기업 웹 사이트를 위한 단색 색 구성표를 특징으로 합니다. 풍부한 인터페이스를 위한 대화형 요소가 포함되어 있으며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg dark:bg-gray-900">
  <h1 class="text-3xl font-bold mb-4">Corporate Dashboard</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
      <h2 class="text-xl font-semibold">Company Overview</h2>
      <img src="https://picsum.photos/200/100" alt="Company Overview" class="rounded-lg mb-2" />
      <p class="mb-2">Overview of company performance and metrics. Check out the latest updates and key statistics.</p>
      <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">View Details</button>
    </div>
    <div class="bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
      <h2 class="text-xl font-semibold">Team Members</h2>
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Member 1" class="w-12 h-12 rounded-full mr-3" />
        <p>John Doe - CEO</p>
      </div>
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Member 2" class="w-12 h-12 rounded-full mr-3" />
        <p>Jane Smith - CTO</p>
      </div>
      <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">View Team</button>
    </div>
  </div>
  <div class="mt-4 bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-xl font-semibold">Latest Reports</h2>
    <ul class="list-disc pl-5">
      <li><a href="#" class="text-blue-400 hover:underline">Q1 2023 Financial Report</a></li>
      <li><a href="#" class="text-blue-400 hover:underline">Market Trends Analysis</a></li>
      <li><a href="#" class="text-blue-400 hover:underline">Competitor Comparison</a></li>
    </ul>
  </div>
</div>

포트폴리오 레이아웃

보색, 다크 모드 지원 및 최소 요소와의 미시적 상호 작용에 중점을 둔 포트폴리오를 위한 간단한 반응형 레이아웃 구성 요소입니다.

열다 미리 보기

                <div class="flex flex-col min-h-screen bg-gradient-to-br from-purple-500 to-pink-500 dark:from-gray-800 dark:to-black">

  <!-- Header with microinteraction -->
  <header class="w-full px-4 py-3 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg flex justify-between items-center border-b border-white border-opacity-20 transition duration-300 ease-in-out transform hover:scale-105">
    <h1 class="text-xl font-bold text-white">My Portfolio</h1>
    <nav>
      <ul class="flex space-x-4">
        <li><a href="#" class="text-white hover:text-pink-200 transition duration-300 ease-in-out hover:underline">Home</a></li>
        <li><a href="#" class="text-white hover:text-pink-200 transition duration-300 ease-in-out hover:underline">Projects</a></li>
        <li><a href="#" class="text-white hover:text-pink-200 transition duration-300 ease-in-out hover:underline">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main content area -->
  <main class="flex-grow container mx-auto px-4 py-8 text-white">
    <section class="text-center mb-12">
      <h2 class="text-4xl font-semibold mb-4">Welcome to my portfolio</h2>
      <p class="text-lg">Showcasing my work with a touch of interaction.</p>
    </section>

    <!-- Example Project Card with microinteraction -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-white bg-opacity-5 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-2">
        <h3 class="text-2xl font-bold mb-3">Project One</h3>
        <p class="text-white text-opacity-80 mb-4">A brief description of project one.</p>
        <img src="https://picsum.photos/seed/project1/400/300" alt="Project One" class="rounded-md mb-4">
        <a href="#" class="inline-block bg-white text-purple-700 font-semibold py-2 px-4 rounded hover:bg-purple-200 transition duration-300 ease-in-out">Learn More</a>
      </div>
      <!-- Repeat for more project cards -->
        <div class="bg-white bg-opacity-5 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-2">
        <h3 class="text-2xl font-bold mb-3">Project Two</h3>
        <p class="text-white text-opacity-80 mb-4">A brief description of project two.</p>
         <img src="https://picsum.photos/seed/project2/400/300" alt="Project Two" class="rounded-md mb-4">
        <a href="#" class="inline-block bg-white text-purple-700 font-semibold py-2 px-4 rounded hover:bg-purple-200 transition duration-300 ease-in-out">Learn More</a>
      </div>
        <div class="bg-white bg-opacity-5 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-2">
        <h3 class="text-2xl font-bold mb-3">Project Three</h3>
        <p class="text-white text-opacity-80 mb-4">A brief description of project three.</p>
         <img src="https://picsum.photos/seed/project3/400/300" alt="Project Three" class="rounded-md mb-4">
        <a href="#" class="inline-block bg-white text-purple-700 font-semibold py-2 px-4 rounded hover:bg-purple-200 transition duration-300 ease-in-out">Learn More</a>
      </div>
    </div>

  </main>

  <!-- Footer -->
  <footer class="w-full px-4 py-6 text-center text-white text-opacity-80">
    <p>&copy; 2023 My Portfolio</p>
  </footer>

</div>

다크 모드 포트폴리오 레이아웃

포트폴리오를 위한 다크 모드 반응형 레이아웃 구성 요소로, Tailwind CSS를 사용하는 단색 색 구성표를 특징으로 합니다. 콘텐츠에 대한 자리 표시자를 포함하며 JavaScript 없이 중간 정도의 복잡성을 위해 설계되었습니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-900 text-gray-200 p-4">
  <div class="container mx-auto">
    <header class="flex justify-between items-center py-6">
      <h1 class="text-2xl font-bold text-gray-100">My Portfolio</h1>
      <nav>
        <ul class="flex space-x-4">
          <li><a href="#" class="hover:text-gray-100">Home</a></li>
          <li><a href="#" class="hover:text-gray-100">Projects</a></li>
          <li><a href="#" class="hover:text-gray-100">Contact</a></li>
        </ul>
      </nav>
    </header>
    
    <main class="grid grid-cols-1 md:grid-cols-2 gap-8 py-8">
      <section>
        <h2 class="text-xl font-semibold mb-4">About Me</h2>
        <p class="text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </section>
      
      <section>
        <h2 class="text-xl font-semibold mb-4">Recent Projects</h2>
        <div class="space-y-4">
          <div class="bg-gray-800 p-4 rounded-md">
            <h3 class="font-semibold">Project One</h3>
            <p class="text-gray-500 text-sm">A brief description of project one.</p>
          </div>
          <div class="bg-gray-800 p-4 rounded-md">
            <h3 class="font-semibold">Project Two</h3>
            <p class="text-gray-500 text-sm">A brief description of project two.</p>
          </div>
        </div>
      </section>
    </main>
    
    <footer class="text-center py-6 text-gray-500">
      © 2023 My Portfolio
    </footer>
  </div>
</div>

Glassmorphism 대시보드 레이아웃

반투명 젖빛 유리와 같은 요소가 있는 대시보드를 위한 간단한 glassmorphism 레이아웃으로, 파스텔 색 구성표와 다크 모드 지원을 특징으로 합니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-900 backdrop-blur-lg rounded-lg shadow-lg p-6 m-4 w-full max-w-3xl">
        <h1 class="text-2xl font-semibold text-gray-800 dark:text-white">Dashboard</h1>
        <div class="mt-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-opacity-50 bg-white dark:bg-gray-700 backdrop-blur-lg rounded-lg p-4 shadow-md">
                    <h2 class="font-medium text-gray-700 dark:text-gray-200">User Statistics</h2>
                    <img src="https://picsum.photos/300/200?random=1" alt="User Statistics Image" class="w-full rounded-lg mt-2" />
                </div>
                <div class="bg-opacity-50 bg-white dark:bg-gray-700 backdrop-blur-lg rounded-lg p-4 shadow-md">
                    <h2 class="font-medium text-gray-700 dark:text-gray-200">Recent Activities</h2>
                    <img src="https://picsum.photos/300/200?random=2" alt="Recent Activities Image" class="w-full rounded-lg mt-2" />
                </div>
            </div>
            <div class="mt-4 bg-opacity-50 bg-white dark:bg-gray-700 backdrop-blur-lg rounded-lg p-4 shadow-md">
                <h2 class="font-medium text-gray-700 dark:text-gray-200">Control Panel</h2>
                <img src="https://picsum.photos/300/200?random=3" alt="Control Panel Image" class="w-full rounded-lg mt-2" />
            </div>
        </div>
        <div class="flex justify-between items-center mt-4">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
                <span class="ml-2 text-gray-700 dark:text-gray-200">John Doe</span>
            </div>
            <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Logout</button>
        </div>
    </div>
</div>