Currently HTML and TailwindCSS code is generated.
<div class="bg-gray-100 py-12">
<div class="container mx-auto text-center">
<h2 class="text-3xl font-bold mb-6">Pricing Plans</h2>
<p class="text-lg mb-12">Choose the plan that suits you best</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-2xl font-semibold mb-4">Basic Plan</h3>
<p class="text-gray-600 mb-4">$19/month</p>
<p class="mb-6">Ideal for individuals who are just getting started.</p>
<a href="#" class="bg-blue-500 text-white py-2 px-4 rounded">Get Started</a>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-2xl font-semibold mb-4">Standard Plan</h3>
<p class="text-gray-600 mb-4">$49/month</p>
<p class="mb-6">Perfect for small teams looking to grow.</p>
<a href="#" class="bg-blue-500 text-white py-2 px-4 rounded">Get Started</a>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg">
<h3 class="text-2xl font-semibold mb-4">Premium Plan</h3>
<p class="text-gray-600 mb-4">$99/month</p>
<p class="mb-6">Best for large teams requiring advanced features.</p>
<a href="#" class="bg-blue-500 text-white py-2 px-4 rounded">Get Started</a>
</div>
</div>
</div>
</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-600 p-4">
<h1 class="text-4xl font-bold text-white">Header Title</h1>
<p class="text-lg font-medium text-white">Subtitle or additional text here</p>
</div>
<div class="relative inline-block">
<button class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition-all duration-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M16.65 10.35A6.5 6.5 0 1010.35 16.65A6.5 6.5 0 0016.65 10.35z" /></svg>
</button>
<input type="text" placeholder="Search..." class="absolute left-10 hidden h-10 px-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 group-hover:block">
</div>
<style>
.relative:hover input {
display: block;
}
</style>