Steps Left Using Tailwind UI

<!-- Component Inspired design by Ildiko Gaspar from dribbble https://dribbble.com/shots/11091943-Steps-Left-UI-Design  -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
    href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
    rel="stylesheet">

<style>
    body {
        font-family: 'Plus Jakarta Sans', sans-serif;
    }
</style>

<section class="bg-[#7A90FD] pt-32 h-screen">
    <div class="flex flex-col justify-center max-w-2xl p-12 mx-auto bg-white rounded-lg">
        <div class="mb-12">
            <div class="flex items-center justify-center sm:flex-row">
                <div class="flex items-center">
                    <div
                        class="inline-flex w-7 h-7 justify-center items-center rounded-full bg-[#7A90FD] text-sm font-bold text-white">
                        1
                    </div>
                </div>
                <span class="mx-2 sm:mx-4 h-0.5 w-32 bg-[#7A90FD] rounded-full"></span>
                <div class="flex items-center">
                    <div
                        class="inline-flex items-center justify-center font-bold text-white bg-gray-600 rounded-full w-7 h-7">
                        2
                    </div>
                </div>
                <span class="my-4 md:my-0 mx-0 sm:mx-4 h-0.5 w-32 bg-gray-400 rounded-full"></span>
                <div class="flex items-center">
                    <div
                        class="inline-flex items-center justify-center text-sm font-bold text-white bg-gray-600 rounded-full w-7 h-7">
                        3
                    </div>
                </div>
            </div>
        </div>
        <div class="space-y-6 text-center">
            <h1 class="text-2xl font-bold">Welcome Data Studio</h1>
            <p class="pl-8 text-sm text-gray-600">
                Turn your data into informative dashboards and reports that are easy to
                read, easy to share, and fully customizable. Data Studio allows you to tell
                great data stories to support better business decisions.
            </p>
            <button type="button"
                class="text-white bg-[#7A90FD] hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 focus:outline-none">Get
                Started</button>
        </div>
    </div>
</section>