Responsive Process Steps - Tailwind Component
A card responsive process steps, it is made with Tailwind CSS.
steps
Loading component...
89 lines
<div class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
<h1 class="font-bold text-indigo-900 text-4xl text-center ">
Connect Touch with your phone to send stuff between your devices.
</h1>
</div>
<div class="grid gap-8 row-gap-0 lg:grid-cols-3">
<div class="relative text-center">
<div
class="flex items-center text-3xl font-black justify-center w-16 h-16 mx-auto mb-4 rounded-full bg-indigo-50 sm:w-20 sm:h-20">
1
</div>
<div class="flex flex-col items-center justify-center">
<div class="w-52 text-center">
<p class="max-w-md mb-3 text-sm text-gray-900 sm:mx-auto">
Download touch from <span class="font-bold">Google Play</span> or the <span class="font-bold">App
Store</span>
</p>
</div>
<div class="inline-flex items-center mb-4">
<span>
<img src="https://cdn-icons-png.flaticon.com/128/300/300218.png" alt="Google Play" class="w-8 mr-4">
</span>
<span>
<img src="https://cdn-icons-png.flaticon.com/128/179/179310.png" alt="App Store" class="w-8">
</span>
</div>
</div>
<div class="top-0 right-0 flex items-center justify-center h-24 lg:-mr-8 lg:absolute">
<svg class="w-8 text-gray-700 transform rotate-90 lg:rotate-0" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<line fill="none" stroke-miterlimit="10" x1="2" y1="12" x2="22" y2="12"></line>
<polyline fill="none" stroke-miterlimit="10" points="15,5 22,12 15,19 "></polyline>
</svg>
</div>
</div>
<div class="relative text-center">
<div
class="flex items-center text-3xl font-black justify-center w-16 h-16 mx-auto mb-4 rounded-full bg-indigo-50 sm:w-20 sm:h-20">
2
</div>
<div class="flex flex-col items-center justify-center">
<div class="w-52 text-center">
<p class="max-w-md mb-3 text-sm text-gray-900 sm:mx-auto">
Scan the QR code with <span class="font-bold">Touch</span>
</p>
</div>
<div class="flex flex-row justify-between items-center mt-2 py-3 px-8 bg-indigo-400 text-gray-100 rounded">
Reveal the QR Code
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M3 4a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm2 2V5h1v1H5zM3 13a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1H4a1 1 0 01-1-1v-3zm2 2v-1h1v1H5zM13 3a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1V4a1 1 0 00-1-1h-3zm1 2v1h1V5h-1z"
clip-rule="evenodd" />
<path
d="M11 4a1 1 0 10-2 0v1a1 1 0 002 0V4zM10 7a1 1 0 011 1v1h2a1 1 0 110 2h-3a1 1 0 01-1-1V8a1 1 0 011-1zM16 9a1 1 0 100 2 1 1 0 000-2zM9 13a1 1 0 011-1h1a1 1 0 110 2v2a1 1 0 11-2 0v-3zM7 11a1 1 0 100-2H4a1 1 0 100 2h3zM17 13a1 1 0 01-1 1h-2a1 1 0 110-2h2a1 1 0 011 1zM16 17a1 1 0 100-2h-3a1 1 0 100 2h3z" />
</svg>
</div>
<div class="top-0 right-0 flex items-center justify-center h-24 lg:-mr-8 lg:absolute">
<svg class="w-8 text-gray-700 transform rotate-90 lg:rotate-0" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<line fill="none" stroke-miterlimit="10" x1="2" y1="12" x2="22" y2="12"></line>
<polyline fill="none" stroke-miterlimit="10" points="15,5 22,12 15,19 "></polyline>
</svg>
</div>
</div>
</div>
<div class="relative text-center">
<div
class="flex items-center text-3xl font-black justify-center w-16 h-16 mx-auto mb-4 rounded-full bg-indigo-50 sm:w-20 sm:h-20">
3
</div>
<div class="flex flex-col items-center justify-center">
<div class="w-52 text-center">
<p class="max-w-md mb-3 text-sm text-gray-900 sm:mx-auto">
<span class="font-bold">That's it. you'he all set!</span> No login or password needed <span
class="text-4xl">🎉</span>
</p>
</div>
</div>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
</style>