구성 요소 인터랙티브 컴포넌트 Interactive Components 구성 요소

Interactive Components 구성 요소

브루탈리즘(Brutalism) 스타일로 디자인된 인터랙티브 컴포넌트로, 어두운 테마를 지원하는 작품이나 제품을 선보이는 데 적합합니다.

미리 보기

HTML 코드

<div class="bg-gray-800 text-white p-8 rounded-lg shadow-lg">  <h1 class="text-3xl font-bold mb-6">My Portfolio</h1>  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">    <div class="bg-gray-700 p-4 rounded-lg">      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Project 1">      <h2 class="text-xl font-semibold mt-2">Project Title 1</h2>      <p class="text-gray-300">A short description of the project with high contrast and bold layout.</p>      <div class="mt-4 flex justify-between items-center">        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">        <a href="#" class="text-blue-400 hover:underline">View More</a>      </div>    </div>    <div class="bg-gray-700 p-4 rounded-lg">      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Project 2">      <h2 class="text-xl font-semibold mt-2">Project Title 2</h2>      <p class="text-gray-300">A short description of the project with high contrast and bold layout.</p>      <div class="mt-4 flex justify-between items-center">        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">        <a href="#" class="text-blue-400 hover:underline">View More</a>      </div>    </div>    <div class="bg-gray-700 p-4 rounded-lg">      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=3" alt="Project 3">      <h2 class="text-xl font-semibold mt-2">Project Title 3</h2>      <p class="text-gray-300">A short description of the project with high contrast and bold layout.</p>      <div class="mt-4 flex justify-between items-center">        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">        <a href="#" class="text-blue-400 hover:underline">View More</a>      </div>    </div>  </div>  <div class="mt-8 text-center">    <button class="bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-500">Load More Projects</button>  </div></div>

관련 구성 요소

Interactive Components 구성 요소

브루탈리즘에서 영감을 받은 블로그용 인터랙티브 컴포넌트로, 고대비 어스 톤, 반응형 디자인, 다크 모드 지원을 특징으로 합니다.

열다

Interactive Components 구성 요소

Material Design, Triadic 색 구성표, 복잡한 복잡성, 전자 상거래, 반응형 디자인 및 어두운 테마 지원을 제공하는 Interactive Components 구성 요소.

열다

Neumorphism Interactive Components 컴포넌트

Neumorphism Interactive Components 기업/기업 웹 사이트를 위한 구성 요소

열다