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

"Generate css for a modern menu bar with centered logo and services, about, contact"

<div class="bg-white shadow-md">
    <div class="flex justify-between items-center max-w-6xl mx-auto p-4">
        <div class="flex items-center">
            <img src="logo.png" alt="Logo" class="h-10">
        </div>
        <nav class="space-x-4">
            <a href="#services" class="text-gray-700 hover:text-blue-500">Services</a>
            <a href="#about" class="text-gray-700 hover:text-blue-500">About</a>
            <a href="#contact" class="text-gray-700 hover:text-blue-500">Contact</a>
        </nav>
    </div>
</div>

"gallery slider "

<div class="relative w-full max-w-xl mx-auto">
    <div class="flex overflow-hidden">
        <div class="min-w-full transition-transform duration-500 ease-in-out transform -translate-x-0">
            <img src="image1.jpg" alt="Image 1" class="w-full h-auto">
        </div>
        <div class="min-w-full transition-transform duration-500 ease-in-out transform -translate-x-0">
            <img src="image2.jpg" alt="Image 2" class="w-full h-auto">
        </div>
        <div class="min-w-full transition-transform duration-500 ease-in-out transform -translate-x-0">
            <img src="image3.jpg" alt="Image 3" class="w-full h-auto">
        </div>
    </div>
    <button class="absolute top-1/2 left-2 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2">
        &#10094;
    </button>
    <button class="absolute top-1/2 right-2 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2">
        &#10095;
    </button>
</div>

"Hero responsive, animated, modern, neon, cool 3D, new with flex box and parllex background "

<div class="relative bg-gray-900 overflow-hidden h-screen flex items-center justify-center">
    <div class="absolute inset-0 opacity-40">
        <div class="bg-[url('your-parallax-image.jpg')] bg-cover bg-fixed h-full"></div>
    </div>
    <div class="relative z-10 text-center text-white">
        <h1 class="text-5xl md:text-7xl font-extrabold neon-effect">Welcome to Our Neon World</h1>
        <p class="mt-4 text-lg md:text-2xl">Experience the futuristic vibes with 3D animations!</p>
        <a href="#" class="mt-6 inline-block px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg transform transition-transform hover:scale-105">
            Get Started
        </a>
    </div>
</div>

<style>
    @keyframes neon {
        0%, 100% {
            text-shadow: 0 0 10px #00f, 0 0 20px #00f, 0 0 30px #0ff, 0 0 40px #0ff, 0 0 50px #0ff, 0 0 60px #0ff, 0 0 70px #0ff;
        }
        50% {
            text-shadow: 0 0 20px #0ff, 0 0 30px #0ff, 0 0 40px #00f, 0 0 50px #00f, 0 0 60px #00f, 0 0 70px #00f, 0 0 80px #00f;
        }
    }
    .neon-effect {
        animation: neon 1.5s ease-in-out infinite alternate;
    }
</style>