Status Page Feature Using Tailwind UI
A Status Page Feature designed with Tailwind offers a visually engaging and informative tool to keep users updated on the current status of services, ensuring transparency and effective communication during service interruptions or maintenance.
feature
Loading component...
71 lines
<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>
<!-- inspired design by https://dribbble.com/shots/4575629-Status-Page-feature -->
<div class="max-w-screen-xl px-4 mx-auto my-8 sm:my-12 sm:px-6 md:my-16">
<div class="lg:grid lg:grid-cols-12 lg:gap-8 items-center">
<div class="relative sm:max-w-lg sm:mx-auto lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
<img class="mx-auto w-full max-w-full bg-blue-600 object-contain"
src="https://img.freepik.com/free-vector/dashboard-user-panel-template_52683-29382.jpg?size=626&ext=jpg&ga=GA1.1.1171494620.1695214534&semt=sph"
alt="" />
</div>
<div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left p-10">
<h2
class="mt-1 text-4xl font-extrabold leading-10 tracking-tight text-gray-900 sm:leading-none sm:text-6xl lg:text-5xl xl:text-4xl">
Transparency for customers trust
</h2>
<p class="mt-3 text-base text-gray-600 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse minima voluptatum dicta tenetur natus.
Magni
deleniti dolorem ipsam sunt vel soluta.
</p>
<div class="sm:flex sm:justify-center lg:justify-start">
<div class="">
<a href="#"
class="flex items-center justify-center py-3 text-base font-medium leading-6 transition duration-150 ease-in-out text-indigo-600 hover:text-indigo-500 focus:outline-none md:py-4 md:text-lg">
See it live
</a>
</div>
</div>
</div>
</div>
<div class="lg:grid lg:grid-cols-12 lg:gap-8 mt-8 items-center">
<div class="hidden lg:block sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left p-10">
<h2
class="mt-1 text-4xl font-extrabold leading-10 tracking-tight text-gray-900 sm:leading-none sm:text-6xl lg:text-5xl xl:text-4xl">
Keep control your <br> branding
</h2>
<p class="mt-3 text-base text-gray-600 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse minima voluptatum dicta tenetur natus.
Magni
deleniti dolorem ipsam sunt vel soluta.
</p>
</div>
<div class="relative sm:max-w-lg sm:mx-auto lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
<img class="mx-auto w-full max-w-full bg-blue-600 object-contain"
src="https://img.freepik.com/free-vector/dashboard-user-panel-template_23-2148279574.jpg?size=626&ext=jpg&ga=GA1.1.1171494620.1695214534&semt=sph"
alt="" />
</div>
<div class="lg:hidden sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left p-10">
<h2
class="mt-1 text-4xl font-extrabold leading-10 tracking-tight text-gray-900 sm:leading-none sm:text-6xl lg:text-5xl xl:text-4xl">
Keep control your branding
</h2>
<p class="mt-3 text-base text-gray-600 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse minima voluptatum dicta tenetur natus.
Magni
deleniti dolorem ipsam sunt vel soluta.
</p>
</div>
</div>
</div>