پێشبینی کۆدی ڕاستەوخۆ
بەشی کۆدەکان
HTML +
Tailwind CSS
HTML Code
<div class="bg-white rounded-lg overflow-hidden shadow-lg">
<div class="px-6 py-8">
<h2 class="text-3xl font-semibold text-gray-800 mb-2">Pro Plan</h2>
<p class="text-gray-600 mb-4">Perfect for professionals and teams</p>
<div class="text-3xl font-bold text-gray-800 mb-4">$19<span class="text-lg font-normal text-gray-600">/month</span></div>
<ul class="text-gray-600">
<li class="flex items-center mb-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Unlimited projects
</li>
<li class="flex items-center mb-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
24/7 support
</li>
<li class="flex items-center mb-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Custom analytics
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Secure data storage
</li>
</ul>
<button class="mt-6 bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105">
Get Started
</button>
</div>
</div>
بینینەکان : 179
ناوی سەرچاوە
بینینی نرخ
وەسف
بینینی نرخ