Home
Anonymous
Steps / Service Card

Steps / Service Card

This tailwind example is contributed by Anonymous, on 31-Dec-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is stepper

Steps

Author Anonymous

4.5k

Fork Fullscreen

<div class="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-3 p-4 md:p-8">
    
    <div
        class="p-8 py-12 sm:p-12 rounded-3xl bg-white border border-gray-100 bg-opacity-50 shadow-2xl shadow-gray-600/10">
        <div class="space-y-12">
            <div class="m-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-50">
                <span class="font-bold text-xl text-green-600">1</span>
            </div>
            <div class="space-y-4">
                <h3 class="text-2xl font-semibold text-gray-800 transition">Data Collection</h3>
                <p class="text-gray-600">Upload diverse datasets containing various types of information for analysis.
                </p>
            </div>
        </div>
    </div>

<div
        class="p-8 py-12 sm:p-12 rounded-3xl bg-white border border-gray-100 bg-opacity-50 shadow-2xl shadow-gray-600/10">
        <div class="space-y-12">
            <div class="m-auto flex h-12 w-12 items-center justify-center rounded-full bg-orange-50">
                <span class="font-bold text-xl text-orange-600">2</span>
            </div>
            <div class="space-y-4">
                <h3 class="text-2xl font-semibold text-gray-800 transition">Model Training</h3>
                <p class="text-gray-600">Allow the AI model to learn patterns and insights from the provided data. This
                    may take some time.</p>
            </div>
        </div>
    </div>

<div
        class="p-8 py-12 sm:p-12 rounded-3xl bg-white border border-gray-100 bg-opacity-50 shadow-2xl shadow-gray-600/10">
        <div class="space-y-12">
            <div class="m-auto flex h-12 w-12 items-center justify-center rounded-full bg-purple-50">
                <span class="font-bold text-xl text-purple-600">3</span>
            </div>
            <div class="space-y-4">
                <h3 class="text-2xl font-semibold text-gray-800 transition">Insights Delivery</h3>
                <p class="text-gray-600">Receive comprehensive insights and analysis results based on the trained AI
                    model.</p>
            </div>
        </div>
    </div>
</div>

Related Examples