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
"Marketing Card"
<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
  <img class="w-full" src="https://via.placeholder.com/400" alt="Marketing Image">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Effective Marketing Strategy</div>
    <p class="text-gray-700 text-base">
      Enhance your brand visibility and drive engagement with our innovative marketing solutions tailored to your needs.
    </p>
  </div>
  <div class="px-6 py-4">
    <span class="inline-block bg-blue-500 rounded-full px-3 py-1 text-sm font-semibold text-white mr-2">Strategy</span>
    <span class="inline-block bg-green-500 rounded-full px-3 py-1 text-sm font-semibold text-white">Engagement</span>
  </div>
  <div class="px-6 py-4">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Learn More
    </button>
  </div>
</div>
"Приложение "СПОРТ МИСИС" позволяет студентам МИСИС онлайн записываться на занятия по физкультуре. Функционал включает авторизацию, просмотр расписания занятий с фильтрацией, запись на выбранные занятия с подтверждением и возможностью отмены, просмотр списка своих записей и настройки профиля с управл"
<div class="max-w-4xl mx-auto p-6 bg-white rounded-lg shadow-md">
    <h1 class="text-2xl font-bold mb-4">Приложение "СПОРТ МИСИС"</h1>
    <p class="text-gray-700 mb-6">Позволяет студентам МИСИС онлайн записываться на занятия по физкультуре. Функционал включает:</p>
    <ul class="list-disc list-inside mb-6">
        <li>Авторизация</li>
        <li>Просмотр расписания занятий с фильтрацией</li>
        <li>Запись на выбранные занятия с подтверждением и возможностью отмены</li>
        <li>Просмотр списка своих записей</li>
        <li>Настройки профиля с управлением</li>
    </ul>
    <a href="#" class="inline-block bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-400">Узнать больше</a>
</div>
"build a bottom navbar containing 3 icons with text at the bottom. the bottom navbar should be 40% of the width. the bottom navbar should be at the bottom of the page "
<div class="fixed bottom-0 left-1/2 transform -translate-x-1/2 w-2/5 bg-white shadow-lg rounded-t-lg p-2 flex justify-around items-center">
    <div class="flex flex-col items-center">
        <svg class="w-6 h-6 mb-1 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h18M3 12h18m-7 9h7M3 12l4-4m0 4l4 4" /></svg>
        <span class="text-sm text-gray-600">Home</span>
    </div>
    <div class="flex flex-col items-center">
        <svg class="w-6 h-6 mb-1 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m5-12h-2a2 2 0 00-2 2v2a2 2 0 002 2h2m-6 10H8a2 2 0 01-2-2v-2a2 2 0 012-2h2m6 0h2m-2 0V8m0 4h-2" /></svg>
        <span class="text-sm text-gray-600">Search</span>
    </div>
    <div class="flex flex-col items-center">
        <svg class="w-6 h-6 mb-1 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg>
        <span class="text-sm text-gray-600">Profile</span>
    </div>
</div>