Create a ui wit... - Tailwind AI

elreco
<body class="bg-gray-900 text-white font-sans leading-normal tracking-normal">
  <div class="min-h-screen flex flex-col items-center p-6">
    <header class="w-full max-w-4xl mb-8">
      <h1 class="text-3xl font-bold text-center mb-4">Create Your Playlist</h1>
      <div class="flex justify-center">
        <input type="text" placeholder="Enter playlist name" class="w-2/3 p-2 border rounded bg-gray-800 text-white border-gray-700 placeholder-gray-500">
        <button class="ml-4 bg-blue-500 text-white p-2 rounded hover:bg-blue-400">Create Playlist</button>
      </div>
    </header>
    <main class="w-full max-w-4xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-gray-800 p-4 rounded shadow-lg">
        <h2 class="text-xl font-bold mb-2">Playlist 1</h2>
        <p class="text-gray-400">Description of Playlist 1</p>
      </div>
      <div class="bg-gray-800 p-4 rounded shadow-lg">
        <h2 class="text-xl font-bold mb-2">Playlist 2</h2>
        <p class="text-gray-400">Description of Playlist 2</p>
      </div>
      <div class="bg-gray-800 p-4 rounded shadow-lg">
        <h2 class="text-xl font-bold mb-2">Playlist 3</h2>
        <p class="text-gray-400">Description of Playlist 3</p>
      </div>
      <div class="bg-gray-800 p-4 rounded shadow-lg">
        <h2 class="text-xl font-bold mb-2">Playlist 4</h2>
        <p class="text-gray-400">Description of Playlist 4</p>
      </div>
      <div class="bg-gray-800 p-4 rounded shadow-lg">
        <h2 class="text-xl font-bold mb-2">Playlist 5</h2>
        <p class="text-gray-400">Description of Playlist 5</p>
      </div>
      <div class="bg-gray-800 p-4 rounded shadow-lg">
        <h2 class="text-xl font-bold mb-2">Playlist 6</h2>
        <p class="text-gray-400">Description of Playlist 6</p>
      </div>
    </main>
  </div>
</body>
Create a ui with one input tag and with a button called create playlist and below create multiple cards of with playlist name make ui like ott platfo...
