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

"Create a flowchat with vertical and horizontal and diagonal"

<div class="flex justify-center items-center min-h-screen bg-gray-100">
  <div class="space-y-4">
    <div class="flex justify-center items-center">
      <div class="w-32 h-20 bg-white border border-gray-300 rounded-lg shadow-md flex items-center justify-center">Step 1</div>
      <div class="w-8 h-4 bg-gray-300"></div>
      <div class="w-32 h-20 bg-white border border-gray-300 rounded-lg shadow-md flex items-center justify-center">Step 2</div>
    </div>
    <div class="flex justify-center items-center">
      <div class="w-32 h-20 bg-white border border-gray-300 rounded-lg shadow-md flex items-center justify-center">Step 3</div>
      <div class="w-8 h-4 bg-gray-300 transform rotate-45"></div>
      <div class="w-32 h-20 bg-white border border-gray-300 rounded-lg shadow-md flex items-center justify-center">Step 4</div>
    </div>
    <div class="flex justify-center items-center">
      <div class="w-32 h-20 bg-white border border-gray-300 rounded-lg shadow-md flex items-center justify-center">Step 5</div>
      <div class="w-8 h-4 bg-gray-300"></div>
      <div class="w-32 h-20 bg-white border border-gray-300 rounded-lg shadow-md flex items-center justify-center">Step 6</div>
    </div>
  </div>
</div>

"Marketing Card that has picture, title, a status, and CTA "

<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
    <img class="w-full h-48 object-cover" src="your-image-url.jpg" alt="Marketing Image">
    <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2">Product Title</div>
        <p class="text-gray-700 text-base mb-2">Current Status: Available</p>
    </div>
    <div class="px-6 pt-4 pb-2">
        <a href="#" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Call to Action</a>
    </div>
</div>

"Hero responsive, animated, modern, neon, cool 3D, new "

<div class="relative bg-black overflow-hidden">
    <div class="absolute inset-0">
        <video class="w-full h-full object-cover" autoplay loop muted>
            <source src="your-video-source.mp4" type="video/mp4">
        </video>
    </div>
    <div class="relative z-10 flex items-center justify-center h-screen text-center">
        <h1 class="text-5xl md:text-7xl font-bold text-white neon-text-animation">Welcome to Your Future</h1>
        <p class="mt-4 text-lg md:text-2xl text-gray-300">Explore the possibilities with our innovative solutions.</p>
        <a href="#explore" class="mt-8 inline-block bg-white text-black px-6 py-3 rounded-full font-semibold transition-transform transform hover:scale-105">Explore Now</a>
    </div>
</div>

<style>
    @keyframes neon {
        0% { text-shadow: 0 0 0.5em #00ffcc, 0 0 1em #00ffcc, 0 0 3em #00ffcc; }
        50% { text-shadow: 0 0 0.8em #00ffcc, 0 0 2em #00ffcc, 0 0 5em #00ffcc; }
        100% { text-shadow: 0 0 0.5em #00ffcc, 0 0 1em #00ffcc, 0 0 3em #00ffcc; }
    }
    .neon-text-animation {
        animation: neon 1.5s infinite alternate;
    }
</style>