CCHub Logo CCHub Tailwind Collection
구성 요소 인터랙티브 컴포넌트 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 구성 요소

파스텔 색 구성표, 적당한 복잡성, 반응형 디자인 및 다크 모드 지원을 갖춘 소셜 미디어 인터랙티브 구성 요소로, Tailwind CSS로 구축되고 머티리얼 디자인 원칙을 따릅니다. picsum.photos의 더미 이미지와 randomuser.me 의 아바타를 사용합니다.

열다

Interactive Components 구성 요소

Skeuomorphism 디자인, 아날로그 색 구성표 및 블로그/콘텐츠 목적을 위한 중간 수준의 복잡성을 가진 대화형 구성 요소 구성 요소. 어두운 테마를 지원하는 반응형 디자인. 자바스크립트 코드가 없습니다.

열다