Process Step Item with Icon (Tailwind)

<div class="flex gap-3 items-center">
                    <div class="h-12 w-12 rounded-full bg-black/5 ring-1 ring-black/10 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="compass" class="lucide lucide-compass h-5 w-5 text-black/90"><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-black font-geist tracking-tight">01. Discover</h3>
                        <p class="text-xs text-black/60 font-geist uppercase tracking-wider">Exploration Phase</p>
                    </div>
                </div>