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

"NEON text with CSS animation keyframes"

<div class="text-3xl font-bold text-center py-10">
  <span class="neon">NEON</span>
</div>

<style>
  @keyframes neon {
    0% {
      text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 15px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
    }
    50% {
      text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ff00ff, 0 0 40px #ff00ff, 0 0 50px #ff00ff;
    }
    100% {
      text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 15px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
    }
  }

  .neon {
    color: #ff00ff;
    animation: neon 1.5s ease-in-out infinite alternate;
  }
</style>

"Necesito un componente que este dividido en 3 x 3, cada bloque tendrá un color para representarlo"

<div class="grid grid-cols-3 gap-4 p-4">
    <div class="bg-red-500 h-24"></div>
    <div class="bg-green-500 h-24"></div>
    <div class="bg-blue-500 h-24"></div>
    <div class="bg-yellow-500 h-24"></div>
    <div class="bg-purple-500 h-24"></div>
    <div class="bg-orange-500 h-24"></div>
    <div class="bg-teal-500 h-24"></div>
    <div class="bg-pink-500 h-24"></div>
    <div class="bg-indigo-500 h-24"></div>
</div>

"generate an animated switch"

<div class="flex items-center">
    <label for="toggle" class="inline-flex relative items-center cursor-pointer">
        <input type="checkbox" id="toggle" class="sr-only">
        <div class="toggle-bg w-14 h-8 bg-gray-300 rounded-full shadow-inner"></div>
        <div class="dot absolute w-6 h-6 bg-white rounded-full shadow transition-transform duration-200 transform" style="left: 2px;"></div>
    </label>
</div>

<style>
    input:checked + .toggle-bg {
        background-color: #4CAF50;
    }
    input:checked + .toggle-bg .dot {
        transform: translateX(100%);
    }
</style>