Component Wizard v1

Write your component requirements, and I'll give you the code.

Currently HTML and TailwindCSS code is generated.

Created by Berkay

F.A.Q.

Recent generations

"pricing section"

<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>

"Header with, text, from and to gradient colors, size and weight props"

<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>

"A search round search button that expans to the left to expise a search input when hovered"

<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>