<section class="py-4 overflow-hidden" x-data="{ step: 1 }">
<div class="container px-4 mx-auto">
<div class="p-11 px-12 sm:px-24 bg-white border rounded-xl">
<img class="mb-9 mx-auto" src="dashy-assets/logos/dashy-logo-dark.svg" alt="">
<div class="flex flex-wrap mb-4 -m-2">
<div class="flex-1 p-2">
<div x-on:click="step = 1" :class="{'bg-gradient-purple-left': step == 1, 'bg-neutral-100 hover:bg-gradient-purple-left': step != 1}" class="h-1 bg-gradient-purple-left hover:bg-gradient-purple-left rounded-full cursor-pointer"></div>
</div>
<div class="flex-1 p-2">
<div x-on:click="step = 2" :class="{'bg-gradient-purple-left': step == 2, 'bg-neutral-100 hover:bg-gradient-purple-left': step != 2}" class="h-1 bg-neutral-100 hover:bg-gradient-purple-left rounded-full cursor-pointer"></div>
</div>
<div class="flex-1 p-2">
<div x-on:click="step = 3" :class="{'bg-gradient-purple-left': step == 3, 'bg-neutral-100 hover:bg-gradient-purple-left': step != 3}" class="h-1 bg-neutral-100 hover:bg-gradient-purple-left rounded-full cursor-pointer"></div>
</div>
<div class="flex-1 p-2">
<div x-on:click="step = 4" :class="{'bg-gradient-purple-left': step == 4, 'bg-neutral-100 hover:bg-gradient-purple-left': step != 4}" class="h-1 bg-neutral-100 hover:bg-gradient-purple-left rounded-full cursor-pointer"></div>
</div>
</div>
<p :class="{'hidden': step != 1}" class="font-semibold text-center">1. Create A Project</p>
<p :class="{'hidden': step != 2}" class="hidden font-semibold text-center">2. Customize Your Workspace</p>
<p :class="{'hidden': step != 3}" class="hidden font-semibold text-center">3. Configure Project Settings</p>
<p :class="{'hidden': step != 4}" class="hidden font-semibold text-center">4. Define Project Parameters</p>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
