가격표
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>