CCHub Logo CCHub Tailwind Collection
구성 요소 등급 시스템 Brutalism_Travel_Rating_System

Brutalism_Travel_Rating_System

여행 및 관광 웹사이트를 위한 단순하고 야만적인 스타일의 평가 시스템 구성 요소로, 멋진 중립 및 다크 모드 지원을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-800 font-mono">厕
  <div class="max-w-md mx-auto border-2 border-gray-900 dark:border-gray-50 bg-white dark:bg-gray-950 p-4 sm:p-6 shadow-[8px_8px_0px_0px_rgba(17,24,39,1)] dark:shadow-[8px_8px_0px_0px_rgba(229,231,235,1)]">
    <h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-50 mb-4 uppercase tracking-widest">RATE YOUR TRIP</h2>
    
    <div class="flex items-center space-x-2 sm:space-x-4 mb-6">
      <img src="https://picsum.photos/id/1015/60/60" alt="Destination" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-gray-900 dark:border-gray-50 flex-shrink-0">
      <div class="flex-grow">
        <p class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-50">Alpine Adventure</p>
        <p class="text-xs sm:text-sm text-gray-700 dark:text-gray-300">Zurich, Switzerland</p>
      </div>
    </div>

    <div class="flex justify-between mb-6">
      <button class="flex-1 py-3 px-2 sm:px-4 text-center text-gray-900 dark:text-gray-50 text-xl sm:text-2xl transition-colors duration-200
                     border-2 border-r-0 border-gray-900 dark:border-gray-50 hover:bg-gray-200 dark:hover:bg-gray-800">
        ★
      </button>
      <button class="flex-1 py-3 px-2 sm:px-4 text-center text-gray-900 dark:text-gray-50 text-xl sm:text-2xl transition-colors duration-200
                     border-2 border-r-0 border-gray-900 dark:border-gray-50 hover:bg-gray-200 dark:hover:bg-gray-800">
        ★
      </button>
      <button class="flex-1 py-3 px-2 sm:px-4 text-center text-gray-900 dark:text-gray-50 text-xl sm:text-2xl transition-colors duration-200
                     border-2 border-r-0 border-gray-900 dark:border-gray-50 hover:bg-gray-200 dark:hover:bg-gray-800">
        ★
      </button>
      <button class="flex-1 py-3 px-2 sm:px-4 text-center text-gray-900 dark:text-gray-50 text-xl sm:text-2xl transition-colors duration-200
                     border-2 border-r-0 border-gray-900 dark:border-gray-50 hover:bg-gray-200 dark:hover:bg-gray-800">
        ★
      </button>
      <button class="flex-1 py-3 px-2 sm:px-4 text-center text-gray-900 dark:text-gray-50 text-xl sm:text-2xl transition-colors duration-200
                     border-2 border-gray-900 dark:border-gray-50 hover:bg-gray-200 dark:hover:bg-gray-800">
        ★
      </button>
    </div>

    <button class="w-full bg-gray-900 dark:bg-gray-50 text-white dark:text-gray-900 py-3 sm:py-4 
                   text-lg sm:text-xl font-bold uppercase tracking-widest 
                   border-2 border-gray-900 dark:border-gray-50 
                   hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors duration-200 shadow-[4px_4px_0px_0px_rgba(17,24,39,1)] dark:shadow-[4px_4px_0px_0px_rgba(229,231,235,1)]">
      SUBMIT RATING
    </button>
  </div>
</div>

관련 구성 요소

등급 시스템 구성 요소

세피아/브라운 톤, 다크 모드 지원 및 마이크로 인터랙션 중심 스타일을 갖춘 간단하고 반응이 빠른 등급 시스템 구성 요소로, 정부/공공 서비스 웹 사이트에 적합합니다.

열다

Monospace_Developer_Rating_System_Component

소셜 미디어 인터페이스를 위한 깔끔한 코드 기반 등급 시스템 구성 요소로, 고정 폭 글꼴, 터미널 미학 및 보색을 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다

Monospace Forest Rating System 구성 요소

포트폴리오에 적합한 포레스트 그린 팔레트가 있는 깔끔한 코드에서 영감을 받은 등급 시스템 구성 요소입니다. 등급을 매기기 위한 대화형 별표가 특징이며 평균 등급을 표시하며 다크 모드 지원으로 완벽하게 반응합니다.

열다