I am trying to create a curved line between sections similar to what is shown here. The issue I am facing is that when I attempt to curve the border, the top also curves as well. My project utilizes nuxt.js and tailwind CSS. Although I have not completed the code yet, you can see where I intend to place these lines. Additionally, I am exploring how to properly position the images.
Code
<template>
<div class="bg-gray-100 h-auto">
<div class="lg:mx-32 xl:mx-60 h-96 w-auto text-blue-900">
<div class="py-20">
<h3 class="text-4xl font-bold text-center">Our Check-in Process</h3>
</div>
<h1 class="font-bold text-7xl text-gray-300 ml-10">1</h1>
<div class="relative border-l-2 border-b-2 border-dashed rounded-xxl border-blue-900 w-1/2">
<div class="m-10">
<h3 class="text-3xl font-bold items-end col-start-1 row-start-2 h-auto"><u>Scan</u> the traveler's document<br></h3>
<p class="col-start-1 row-start-3">
By simply scanning the MRZ code located at the bottom of the traveler's ID or Passport, our app instantly records all their personal data.
</p>
</div>
</div>
<div class="relative w-1/2">
<!-- <div class="layer0 bg-contain bg-no-repeat h-full w-2/3" :style="passport"></div>
<div class="layer1 bg-contain bg-no-repeat h-full w-2/3" :style="phone"></div> -->
</div>
<div class="relative grid grid-cols-2 grid-rows-5 h-96 w-auto">
<div class="absolute border-r-2 border-dashed rounded-xxl border-blue-900 bg-contain bg-no-repeat h-full w-1/2 row-span-4" :style="sign"></div>
<div class="col-start-2 ml-5">
<h1 class="font-bold text-7xl text-gray-300 col-start-2 row-start-1">2</h1>
<h3 class="text-3xl font-bold items-end col-start-2 row-start-2 h-auto"><u>Guest's Signature</u></h3>
<p class="col-start-2 row-start-3">
After scanning their document, complete the registration with your guest's digital signature, using their finger or a stylus.
</p>
</div>
</div>
</div>
</div>
</template>
<style>
.layer0 {
position: relative;
top: 0;
left: 0;
z-index: 0;
}
.layer1 {
position: absolute;
top: 0;
left: 62%;
z-index: 1;
}
</style>
<script>
export default {
components: {},
data() {
return {
passport: {backgroundImage: "url(passport.png)"},
phone: {backgroundImage: "url(phone_scan.png)"},
sign: {backgroundImage: "url(sign.png)"}
};
}
}
</script>