가격표
cards 지제이웍스
gjworks.dev
Components UI Examples
Workspace - Tailwind CSS Components
Components UI Examples
            
Code Examples
<div class="max-w-screen-lg mx-auto py-20"> <div class="text-center mb-20 text-gray-200 text-3xl font-semibold"> Popular Topics to Learn </div> <div class="grid grid-cols-3"> <div class="col-span-1"> <div class="bg-gray-800 bg-opacity-75 py-10 px-5 rounded-lg"> <div class="text-white text-lg font-semibold mb-6">BASIC</div> <div class="text-4xl font-semibold text-gray-100"> 300,000 </div> <div class="pb-5 border-b border-gray-700 pt-5"> <div class="text-gray-600 text-sm mb-5"> Not Sure Where to Begin? Take Our Address </div> <a href="#" class="inline-block py-2 px-5 text-white bg-orange-600 hover:bg-orange-500 rounded"> 신청하기 </a> </div> <div class="pt-10"> <div class="text-white text-lg font-semibold"> Warring Text </div> <div class="mb-6"> <div class="text-gray-400 text-sm mb-1"> million learners today. </div> </div> <div class=""> <div class="text-sm text-gray-500 mb-2"> <i class="fas fa-check text-orange-600 mr-2"></i> 1도메인 1다운로드 </div> <div class="text-sm text-gray-500 mb-2"> <i class="fas fa-check text-orange-600 mr-2"></i> 다크모드 지원 </div> <div class="text-sm text-gray-500 mb-2"> <i class="fas fa-check text-orange-600 mr-2"></i> 문자메세지 모듈 </div> </div> </div> </div> </div> <div class="col-span-1"> <div class="bg-gray-700 bg-opacity-75 py-10 px-5 rounded-lg -mt-6"> <div class="text-white text-lg font-semibold mb-6">PREMIUM</div> <div class="text-4xl font-semibold text-gray-100"> 1,000,000 </div> <div class="pb-5 border-b border-gray-700 pt-5"> <div class="text-gray-600 text-sm mb-5"> Not Sure Where to Begin? Take Our Address </div> <a href="#" class="inline-block py-2 px-5 text-white bg-orange-600 hover:bg-orange-500 rounded"> 신청하기 </a> </div> <div class="pt-10"> <div class="text-white text-lg font-semibold"> Warring Text </div> <div class="mb-6"> <div class="text-gray-400 text-sm mb-1"> million learners today. </div> </div> <div class=""> <div class="text-sm text-gray-500 mb-2"> <i class="fas fa-check text-orange-600 mr-2"></i> 1도메인 1다운로드 </div> <div class="text-sm text-gray-500 mb-2"> <i class="fas fa-check text-orange-600 mr-2"></i> 다크모드 지원 </div> <div class="text-sm text-gray-500 mb-2"> <i class="fas fa-check text-orange-600 mr-2"></i> 문자메세지 모듈 </div> <div class="text-sm text-gray-500 mb-2"> <i class="fas fa-check text-orange-600 mr-2"></i> 게시판/멤버스킨 지원 </div> <div class="text-sm text-gray-500 mb-2"> <i class="fas fa-check text-orange-600 mr-2"></i> 커스텀 Component 제공 </div> </div> </div> </div> </div> <div class="col-span-1"> <div class="bg-gray-800 bg-opacity-75 py-10 px-5 rounded-lg"> <div class="text-white text-lg font-semibold mb-6">DELUXE</div> <div class="text-4xl font-semibold text-gray-100"> 500,000 </div> <div class="pb-5 border-b border-gray-700 pt-5"> <div class="text-gray-600 text-sm mb-5"> Not Sure Where to Begin? Take Our Address </div> <a href="#" class="inline-block py-2 px-5 text-white bg-orange-600 hover:bg-orange-500 rounded"> 신청하기 </a> </div> <div class="pt-10"> <div class="text-white text-lg font-semibold"> Warring Text </div> <div class="mb-6"> <div class="text-gray-400 text-sm mb-1"> million learners today. </div> </div> <div class=""> <div class="text-sm text-gray-500 mb-2"> <i class="fas fa-check text-orange-600 mr-2"></i> 1도메인 1다운로드 </div> <div class="text-sm text-gray-500 mb-2"> <i class="fas fa-check text-orange-600 mr-2"></i> 다크모드 지원 </div> <div class="text-sm text-gray-500 mb-2"> <i class="fas fa-check text-orange-600 mr-2"></i> 문자메세지 모듈 </div> <div class="text-sm text-gray-500 mb-2"> <i class="fas fa-check text-orange-600 mr-2"></i> 게시판/멤버스킨 지원 </div> </div> </div> </div> </div> </div> </div>