newtil-css로 만들 수 있는 다양한 컴포넌트와 레이아웃 예제를 확인해보세요
화면 크기에 따라 자동으로 조정되는 그리드 시스템
내용이 들어갑니다
내용이 들어갑니다
내용이 들어갑니다
<!-- 모바일: 1열, 태블릿: 2열, 데스크톱: 3열 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gradient-to-br from-blue-500 to-purple-600
p-8 rounded-xl text-white shadow-lg">
<h3 class="text-2xl font-bold mb-2">카드 1</h3>
<p class="opacity-90">내용이 들어갑니다</p>
</div>
<div class="bg-gradient-to-br from-green-500 to-teal-600
p-8 rounded-xl text-white shadow-lg">
<h3 class="text-2xl font-bold mb-2">카드 2</h3>
<p class="opacity-90">내용이 들어갑니다</p>
</div>
<div class="bg-gradient-to-br from-orange-500 to-red-600
p-8 rounded-xl text-white shadow-lg">
<h3 class="text-2xl font-bold mb-2">카드 3</h3>
<p class="opacity-90">내용이 들어갑니다</p>
</div>
</div>다양한 스타일의 버튼 컴포넌트
<!-- 기본 버튼 -->
<button class="px-6 py-3 bg-blue-600 text-white
rounded-lg hover:bg-blue-700
transition-colors font-semibold">
기본 버튼
</button>
<!-- 아웃라인 버튼 -->
<button class="px-6 py-3 border-2 border-blue-600
text-blue-600 rounded-lg
hover:bg-blue-50 transition-colors">
아웃라인 버튼
</button>
<!-- 그라데이션 버튼 -->
<button class="px-6 py-3 bg-gradient-to-r
from-purple-600 to-pink-600
text-white rounded-lg
hover:from-purple-700 hover:to-pink-700
transition-all shadow-lg">
그라데이션 버튼
</button>다양한 스타일의 카드 레이아웃
카드 설명이 들어갑니다. 여러 줄의 텍스트를 표시할 수 있습니다.
<div class="max-w-md bg-white dark:bg-gray-800
rounded-xl shadow-lg overflow-hidden">
<img src="image.jpg" alt="카드 이미지"
class="w-full h-48 object-cover" />
<div class="p-6">
<h3 class="text-2xl font-bold text-gray-900
dark:text-white mb-2">
카드 제목
</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">
카드 설명이 들어갑니다. 여러 줄의 텍스트를
표시할 수 있습니다.
</p>
<button class="px-4 py-2 bg-blue-600 text-white
rounded-lg hover:bg-blue-700">
자세히 보기
</button>
</div>
</div>Flexbox를 활용한 다양한 레이아웃 패턴
<!-- 중앙 정렬 -->
<div class="flex items-center justify-center
min-h-screen bg-gray-100">
<div class="text-center">
<h1 class="text-4xl font-bold mb-4">중앙 정렬</h1>
</div>
</div>
<!-- 공간 분배 -->
<div class="flex items-center justify-between
p-6 bg-white rounded-lg shadow">
<div>왼쪽</div>
<div>중앙</div>
<div>오른쪽</div>
</div>
<!-- 세로 스택 -->
<div class="flex flex-col gap-4">
<div class="p-4 bg-blue-100 rounded">항목 1</div>
<div class="p-4 bg-blue-100 rounded">항목 2</div>
<div class="p-4 bg-blue-100 rounded">항목 3</div>
</div>입력 필드와 폼 요소들
<form class="max-w-md space-y-4">
<div>
<label class="block text-sm font-medium
text-gray-700 dark:text-gray-300 mb-2">
이메일
</label>
<input type="email"
class="w-full px-4 py-2 border border-gray-300
rounded-lg focus:ring-2 focus:ring-blue-500
focus:border-transparent"
placeholder="email@example.com" />
</div>
<div>
<label class="block text-sm font-medium
text-gray-700 dark:text-gray-300 mb-2">
비밀번호
</label>
<input type="password"
class="w-full px-4 py-2 border border-gray-300
rounded-lg focus:ring-2 focus:ring-blue-500
focus:border-transparent" />
</div>
<button type="submit"
class="w-full px-4 py-2 bg-blue-600 text-white
rounded-lg hover:bg-blue-700">
로그인
</button>
</form>반응형 네비게이션 메뉴
<nav class="bg-white dark:bg-gray-800 shadow-lg">
<div class="max-w-7xl mx-auto px-4">
<div class="flex items-center justify-between h-16">
<div class="text-2xl font-bold">로고</div>
<div class="hidden md:flex space-x-8">
<a href="#" class="text-gray-700 hover:text-blue-600">
홈
</a>
<a href="#" class="text-gray-700 hover:text-blue-600">
소개
</a>
<a href="#" class="text-gray-700 hover:text-blue-600">
연락처
</a>
</div>
<button class="md:hidden">☰</button>
</div>
</div>
</nav>