HTML 코드
<div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
<div>
<span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"></svg>
</span>
</div>
<h3 class="mt-5 text-base font-medium tracking-tight text-slate-900 dark:text-white">Price</h3>
<p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
<span class="text-2xl font-bold text-slate-900 dark:text-white">$99.99</span>/month
</p>
</div>
관련 구성 요소
가격 표시 구성 요소
실제 요소를 모방한 스큐어모픽 스타일로 설계된 복잡한 가격 표시 구성 요소로, 트라이어딕 색 구성표와 다크 모드를 지원하는 반응형 디자인으로 블로그 및 콘텐츠 소비에 적합합니다.
가격 표시 구성 요소
포트폴리오를 위한 레트로 빈티지 스타일의 복합 가격 표시 구성 요소로, Tailwind CSS를 사용하여 트라이어딕 색 구성표, 응답성 및 다크 모드 지원을 특징으로 합니다. JavaScript는 포함되어 있지 않습니다.
가격 표시 구성 요소 22
제품의 이미지, 이름, 가격 및 장바구니에 추가할 버튼을 보여주는 미니멀리스트 가격 표시 구성 요소입니다. Tailwind CSS를 사용하여 응답성 및 어두운 테마 지원으로 설계되었습니다.