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

Interactive Components 구성 요소

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

미리 보기

HTML 코드

<div class="min-h-screen bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-6 lg:p-12 font-mono">

  <!-- Article Card with Brutalist Elements -->
  <div class="max-w-xl mx-auto bg-amber-700 dark:bg-amber-900 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000,12px_12px_0_0_#a16207] dark:shadow-[8px_8px_0_0_#fff,12px_12px_0_0_#44403c] transition duration-300 hover:shadow-[16px_16px_0_0_#000,20px_20px_0_0_#a16207] dark:hover:shadow-[16px_16px_0_0_#fff,20px_20px_0_0_#44403c]">
    <div class="p-6 border-b-4 border-black dark:border-white">
      <div class="text-sm font-bold mb-2 uppercase">Featured Article</div>
      <h2 class="text-3xl font-bold mb-4 leading-tight">The Unyielding Spirit of Brutalist Architecture</h2>
      <img src="https://picsum.photos/seed/brutalism/600/400" alt="Brutalist building" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
      <p class="mb-4">
        Exploring the raw beauty and controversial history of Brutalist structures. Their imposing forms and
        unadorned surfaces evoke a sense of permanence and honesty.
      </p>
      <a href="#" class="inline-block bg-black dark:bg-white text-white dark:text-black px-6 py-3 font-bold border-4 border-black dark:border-white transform translate-y-1 translate-x-1 hover:translate-y-0 hover:translate-x-0 transition duration-100">
        Read More
      </a>
    </div>

    <!-- Related Articles Section -->
    <div class="p-6 border-b-4 border-black dark:border-white">
      <h3 class="text-2xl font-bold mb-4">More to Explore</h3>
      <ul>
        <li class="mb-4 pb-4 border-b border-stone-700 dark:border-stone-300 last:border-b-0">
          <a href="#" class="block hover:underline">
            <h4 class="text-xl font-bold mb-1">Concrete Jungle: Brutalism in Urban Landscapes</h4>
            <p class="text-sm text-stone-700 dark:text-stone-300">An analysis of Brutalism

관련 구성 요소

Interactive Components 구성 요소

음식/레스토랑 웹사이트를 위해 설계된 생생한 색 구성표를 가진 복잡한 대화형 뉴모피즘 스타일 구성 요소입니다. 여기에는 대화형 버튼, 슬라이더 및 선택 요소가 포함되어 있으며 다크 모드 지원과 완전한 응답성을 제공합니다.

열다

인터랙티브 컴포넌트 컴포넌트 25

머티리얼 디자인 스타일의 대화형 구성 요소로, 그리드 레이아웃, 반응형 디자인, 어두운 테마 지원을 제공합니다.

열다

Social_Dating_Interactive_Component

보라색/보라색 색 구성표를 사용하여 깨끗하고 신뢰할 수 있는 기업 스타일로 설계된 복잡한 대화형 소셜/데이트 플랫폼 구성 요소입니다. 반응형 레이아웃과 다크 모드 지원이 포함됩니다.

열다