Open UI test Lemod style https://openui.fly.dev/ai/gVbf8mKuaNaQ5bb9KJgml

index.html

export default function Widget() {
    return (
        <div className="bg-white p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
            <div className="grid grid-cols-3 gap-4">
                
                <div className="col-span-1 bg-white p-4 rounded-lg shadow-sm">
                    <img className="rounded-full w-32 h-32 mx-auto" src="https://placehold.co/128x128" alt="Profile Picture">
                    <h2 className="text-center text-xl font-semibold mt-4">Monalisa Ashley</h2>
                    <p className="text-center text-zinc-500">UI/UX Designer</p>
                    <div className="flex justify-center gap-2 mt-4">
                        <a href="#"><img src="https://placehold.co/24x24" alt="Facebook Icon"></a>
                        <a href="#"><img src="https://placehold.co/24x24" alt="Twitter Icon"></a>
                        <a href="#"><img src="https://placehold.co/24x24" alt="Instagram Icon"></a>
                        <a href="#"><img src="https://placehold.co/24x24" alt="LinkedIn Icon"></a>
                    </div>
                    <div className="mt-6">
                        <div className="flex items-center gap-2">
                            <img src="https://placehold.co/24x24" alt="Phone Icon">
                            <span>+123 456 7890</span>
                        </div>
                        <div className="flex items-center gap-2 mt-2">
                            <img src="https://placehold.co/24x24" alt="Email Icon">
                            <span>[email protected]</span>
                        </div>
                        <div className="flex items-center gap-2 mt-2">
                            <img src="https://placehold.co/24x24" alt="Location Icon">
                            <span>Hong Kong China</span>
                        </div>
                        <div className="flex items-center gap-2 mt-2">
                            <img src="https://placehold.co/24x24" alt="Birthday Icon">
                            <span>May 27, 1990</span>
                        </div>
                    </div>
                    <button className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                        Download CV
                    </button>
                </div>
                
                <div className="col-span-1 bg-white p-4 rounded-lg shadow-sm">
                    <h3 className="text-lg font-semibold border-b pb-2">Working Skills</h3>
                    <div className="mt-4">
                        <label className="block">Web Design</label>
                        <div className="w-full bg-zinc-200 rounded-full h-2.5 dark:bg-zinc-700">
                            <div className="bg-pink-600 h-2.5 rounded-full" style="width: 85%"></div>
                        </div>
                        <label className="block mt-4">Mobile App</label>
                        <div className="w-full bg-zinc-200 rounded-full h-2.5 dark:bg-zinc-700">
                            <div className="bg-pink-600 h-2.5 rounded-full" style="width: 55%"></div>
                        </div>
                        <label className="block mt-4">Illustrator</label>
                        <div className="w-full bg-zinc-200 rounded-full h-2.5 dark:bg-zinc-700">
                            <div className="bg-pink-600 h-2.5 rounded-full" style="width: 65%"></div>
                        </div>
                        <label className="block mt-4">Photoshop</label>
                        <div className="w-full bg-zinc-200 rounded-full h-2.5 dark:bg-zinc-700">
                            <div className="bg-pink-600 h-2.5 rounded-full" style="width: 72%"></div>
                        </div>
                    </div>
                </div>
                
                <div className="col-span-1 bg-white p-4 rounded-lg shadow-sm">
                    <h3 className="text-lg font-semibold border-b pb-2">Knowledges</h3>
                    <div className="flex flex-wrap gap-2 mt-4">
                        <span className="bg-zinc-200 text-black px-4 py-1 rounded-full">Digital Design</span>
                        <span className="bg-zinc-200 text-black px-4 py-1 rounded-full">Marketing</span>
                        <span className="bg-zinc-200 text-black px-4 py-1 rounded-full">Communication</span>
                        <span className="bg-zinc-200 text-black px-4 py-1 rounded-full">Social Media</span>
                        <span className="bg-zinc-200 text-black px-4 py-1 rounded-full">Time Management</span>
                        <span className="bg-zinc-200 text-black px-4 py-1 rounded-full">Flexibility</span>
                    </div>
                </div>
            </div>
        </div>
        
    )
}