Component Wizard v1

<div class="container mx-auto p-6">
    <h2 class="text-2xl font-bold mb-4">Drag and Drop Selection</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-100 p-4 rounded-md shadow">
            <h3 class="font-semibold mb-2">Available Items</h3>
            <ul id="available-items" class="list-disc pl-5">
                <li class="bg-white p-2 mb-2 cursor-pointer rounded draggable" draggable="true">Item 1</li>
                <li class="bg-white p-2 mb-2 cursor-pointer rounded draggable" draggable="true">Item 2</li>
                <li class="bg-white p-2 mb-2 cursor-pointer rounded draggable" draggable="true">Item 3</li>
                <li class="bg-white p-2 mb-2 cursor-pointer rounded draggable" draggable="true">Item 4</li>
            </ul>
        </div>
        <div class="bg-gray-100 p-4 rounded-md shadow">
            <h3 class="font-semibold mb-2">Selected Items</h3>
            <ul id="selected-items" class="list-disc pl-5 border-2 border-dashed border-gray-400 h-48 overflow-auto">
            </ul>
        </div>
    </div>
</div>  
<style>
    .draggable {
        transition: background-color 0.3s;
    }
    .draggable:hover {
        background-color: #f3f4f6;
    }
</style>

<div class="flex flex-col items-center justify-center h-screen bg-gray-100">
    <div class="bg-white shadow-lg rounded-lg p-6 w-80">
        <input type="text" id="display" class="border border-gray-300 rounded-lg p-2 w-full text-right text-2xl" readonly />
        <div class="grid grid-cols-4 gap-4 mt-4">
            <button class="bg-blue-500 text-white rounded-lg p-4">7</button>
            <button class="bg-blue-500 text-white rounded-lg p-4">8</button>
            <button class="bg-blue-500 text-white rounded-lg p-4">9</button>
            <button class="bg-red-500 text-white rounded-lg p-4">C</button>
            <button class="bg-blue-500 text-white rounded-lg p-4">4</button>
            <button class="bg-blue-500 text-white rounded-lg p-4">5</button>
            <button class="bg-blue-500 text-white rounded-lg p-4">6</button>
            <button class="bg-blue-500 text-white rounded-lg p-4">/</button>
            <button class="bg-blue-500 text-white rounded-lg p-4">1</button>
            <button class="bg-blue-500 text-white rounded-lg p-4">2</button>
            <button class="bg-blue-500 text-white rounded-lg p-4">3</button>
            <button class="bg-blue-500 text-white rounded-lg p-4">*</button>
            <button class="bg-blue-500 text-white rounded-lg p-4 col-span-2">0</button>
            <button class="bg-blue-500 text-white rounded-lg p-4">.</button>
            <button class="bg-blue-500 text-white rounded-lg p-4">=</button>
            <button class="bg-blue-500 text-white rounded-lg p-4">-</button>
            <button class="bg-blue-500 text-white rounded-lg p-4">+</button>
        </div>
    </div>
</div>

<div class="relative inline-block">
  <button class="bg-blue-500 text-white rounded-full p-3 focus:outline-none hover:bg-blue-600 transition-all duration-300">
    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
      <path d="M12.9 11.3h-1c-.4 0-.8.1-1.1.3l-1.2 1.2c-1.3-1.3-3-2-4.8-2C2 11.6 0 13.6 0 16s2 4 4.5 4c1.8 0 3.5-.7 4.8-2l1.2 1.2c.3.3.7.3 1.1.3h1c.3 0 .5-.2.5-.5v-3c0-.3-.2-.5-.5-.5zM4.5 15c-1.2 0-2.5-.5-2.5-2s1.3-2 2.5-2c1.2 0 2.5.5 2.5 2s-1.3 2-2.5 2z"/>
    </svg>
  </button>
  <input type="text" class="absolute left-0 invisible opacity-0 transition-all duration-300 transform scale-x-0 focus:visible focus:opacity-100 focus:scale-x-100 bg-white border border-gray-300 rounded-l-md px-3 py-2" placeholder="Search..." />
</div>