Buttons 구성 요소
반응형 효과와 어두운 테마 지원을 특징으로 하는 레트로/빈티지 스타일의 버튼 구성 요소로, 80년대와 90년대 미학의 향수를 불러일으키도록 설계되었습니다.
HTML 코드
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-5">
<h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">Retro/Vintage Buttons</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<button class="bg-pink-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-500">
Retro Pink Button
</button>
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
Vintage Blue Button
</button>
<button class="bg-green-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-500">
Nostalgic Green Button
</button>
<button class="bg-purple-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-purple-400 dark:bg-purple-600 dark:hover:bg-purple-500">
Retro Purple Button
</button>
</div>
<div class="mt-8">
<img class="w-32 h-32 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4" src="https://picsum.photos/200/200" alt="Random Placeholder" />
<p class="text-center text-gray-600 dark:text-gray-300">Nostalgic Image</p>
</div>
<div class="mt-4">
<img class="w-16 h-16 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Random User Avatar" />
<p class="text-center text-gray-600 dark:text-gray-300">User Avatar</p>
</div>
</div>