Component Wizard v1

<div class="bg-white shadow-md rounded-lg p-6 max-w-md mx-auto">
    <h2 class="text-xl font-semibold mb-4">Recent Files</h2>
    <ul class="space-y-2">
        <li class="flex items-center justify-between p-3 bg-gray-100 rounded hover:bg-gray-200">
            <span class="text-gray-800">Document1.pdf</span>
            <span class="text-gray-600">12:45 PM</span>
        </li>
        <li class="flex items-center justify-between p-3 bg-gray-100 rounded hover:bg-gray-200">
            <span class="text-gray-800">Presentation.pptx</span>
            <span class="text-gray-600">11:30 AM</span>
        </li>
        <li class="flex items-center justify-between p-3 bg-gray-100 rounded hover:bg-gray-200">
            <span class="text-gray-800">Spreadsheet.xlsx</span>
            <span class="text-gray-600">10:15 AM</span>
        </li>
        <li class="flex items-center justify-between p-3 bg-gray-100 rounded hover:bg-gray-200">
            <span class="text-gray-800">Image1.png</span>
            <span class="text-gray-600">09:50 AM</span>
        </li>
        <li class="flex items-center justify-between p-3 bg-gray-100 rounded hover:bg-gray-200">
            <span class="text-gray-800">Notes.txt</span>
            <span class="text-gray-600">08:30 AM</span>
        </li>
    </ul>
</div>

<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
    <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2">Blockchain Project Title</div>
        <div class="font-semibold text-gray-700 mb-2">Subtitle for the Project</div>
        <div class="flex items-center mb-4">
            <span class="text-yellow-500 mr-1">★</span>
            <span class="text-yellow-500 mr-1">★</span>
            <span class="text-yellow-500 mr-1">★</span>
            <span class="text-yellow-500 mr-1">★</span>
            <span class="text-gray-400">★</span>
        </div>
        <p class="text-gray-700 text-base">
            This is an overview of the blockchain project, detailing its unique features, use cases, and the potential impact it aims to have in the Web3 ecosystem.
        </p>
    </div>
    <div class="px-6 pt-4 pb-2">
        <span class="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-blue-700 mr-2 mb-2">Blockchain</span>
        <span class="inline-block bg-green-200 rounded-full px-3 py-1 text-sm font-semibold text-green-700 mr-2 mb-2">Web3</span>
    </div>
</div>

<div class="min-h-screen bg-gray-100 flex items-center justify-center">
    <div class="max-w-4xl mx-auto p-8 bg-white shadow-lg rounded-lg">
        <h1 class="text-3xl font-bold text-center mb-4">Welcome to Our Business</h1>
        <p class="text-center text-gray-700 mb-6">Your success is our priority. We provide innovative solutions tailored to your needs.</p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="p-4 bg-gray-50 rounded-lg shadow">
                <h2 class="text-xl font-semibold">Our Services</h2>
                <ul class="list-disc list-inside mt-2">
                    <li>Consulting</li>
                    <li>Marketing Solutions</li>
                    <li>Financial Advice</li>
                </ul>
            </div>
            <div class="p-4 bg-gray-50 rounded-lg shadow">
                <h2 class="text-xl font-semibold">Contact Us</h2>
                <p class="mt-2">Email: info@business.com</p>
                <p>Phone: (123) 456-7890</p>
            </div>
        </div>
        <div class="text-center mt-6">
            <a href="#" class="inline-block px-6 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">Learn More</a>
        </div>
    </div>
</div>