404 Page
404 Page
=
<div class="flex flex-col min-h-full bg-gray-50">
<header class="flex items-center justify-between w-full px-4 py-6 space-x-4 font-medium text-gray-600 lg:px-12">
<a href="#">
<img src="http://demo-assets.uibak.com/themesdev/runway-logo.svg" alt="Runway Logo" class="h-12">
</a>
<!-- desktop menu -->
<nav class="hidden lg:block">
<ul class="flex items-center space-x-6 2xl:space-x-8">
<li x-data="{ open: false }" class="relative">
<a href="#" class="flex items-center space-x-2 hover:text-blue-600" @click="open = !open">
<span>
Services
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7" />
</svg>
</a>
<div
class="absolute transition-all z-50 origin-top-left -translate-x-12 translate-y-6 bg-white rounded shadow-lg shadow-slate-300 w-[500px] p-8"
x-transition:enter="ease-out duration-150 scale-75"
x-transition:enter-start="opacity-0 scale-75"
x-transition:enter-end="opacity-100 translate-y-6 scale-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-end="opacity-0 -translate-y-2"
x-show="open"
x-cloak
@click.away="open = false">
<ul class="grid grid-cols-2 gap-4 text-sm font-semibold text-slate-500 ">
<li>
<a href="#" class="block hover:text-blue-600">Automated Follow Up</a>
</li>
<li>
<a href="#" class="block hover:text-blue-600">Payment Services</a>
</li>
<li>
<a href="#" class="block hover:text-blue-600">Credit Scores</a>
</li>
<li>
<a href="#" class="block hover:text-blue-600">Internal Notes</a>
</li>
<li>
<a href="#" class="block hover:text-blue-600">Dialogue</a>
</li>
<li>
<a href="#" class="block hover:text-blue-600">Payment Plans</a>
</li>
<li>
<a href="#" class="block hover:text-blue-600">Invoicing</a>
</li>
<li>
<a href="#" class="block hover:text-blue-600">Financing</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#" class="hover:text-blue-600">About</a>
</li>
<li>
<a href="#" class="underline underline-offset-8 decoration-blue-600 decoration-2 hover:text-blue-600">Support</a>
</li>
<li>
<a href="#" class="hover:text-blue-600">Blog</a>
</li>
<li>
<a href="#" class="hover:text-blue-600">Pricing</a>
</li>
<li>
<a href="#" class="hover:text-blue-600">Contact</a>
</li>
</ul>
</nav>
<div class="items-center hidden space-x-4 lg:flex xl:space-x-8">
<div class="flex space-x-2 2xl:space-x-4">
<a href="#" class="flex items-center space-x-2 hover:text-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
<span>
Sign in
</span>
</a>
<span class="border-l-2 border-gray-300"> </span>
<a href="#" class="hover:text-blue-600">Create account</a>
</div>
<a href="#" class="hidden px-4 py-3 rounded-full xl:inline bg-gradient-to-br text-blue-50 from-blue-600 via-blue-700 to-blue-500 leading-0 hover:from-blue-700 hover:via-blue-500 hover:to-blue-600 hover:text-white">Schedule demo</a>
</div>
<!-- desktop menu -->
<!-- mobile menu -->
<div class="relative lg:hidden" x-data="{ open: false }">
<!-- toggle menu -->
<button type="button" class="px-4 py-2 bg-white border-2 rounded-full border-zinc-100" @click="open = !open">
<span class="sr-only">Open Menu</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<!--/ toggle menu -->
<!-- menu overlay -->
<div
class="fixed inset-0 z-50 p-4 transition-all origin-top-right bg-gradient-to-b from-gray-300 to-transparent bg-opacity-20"
x-show="open"
x-transition:enter="ease-out duration-50"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-100"
x-transition:leave-end="opacity-0 "
>
<div
class="relative transition-all origin-top-right bg-white rounded shadow"
x-transition:enter="ease-out duration-150 scale-75"
x-transition:enter-start="opacity-0 -translate-y-2 scale-75"
x-transition:enter-end="opacity-100 translate-y-0 scale-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-end="opacity-0 -translate-y-2"
@click.away="open = false"
>
<button type="button" class="absolute top-4 right-4" @click="open = false">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<nav class="p-6">
<span class="block mb-4 text-xs font-bold tracking-widest uppercase text-slate-500">Services</span>
<ul class="grid grid-cols-2 gap-2 text-sm font-semibold md:grid-cols-4 text-slate-700 ">
<li>
<a href="#" class="block hover:text-blue-600">Automated Follow Up</a>
</li>
<li>
<a href="#" class="block hover:text-blue-600">Payment Services</a>
</li>
<li>
<a href="#" class="block hover:text-blue-600">Credit Scores</a>
</li>
<li>
<a href="#" class="block hover:text-blue-600">Internal Notes</a>
</li>
<li>
<a href="#" class="block hover:text-blue-600">Dialogue</a>
</li>
<li>
<a href="#" class="block hover:text-blue-600">Payment Plans</a>
</li>
<li>
<a href="#" class="block hover:text-blue-600">Invoicing</a>
</li>
<li>
<a href="#" class="block hover:text-blue-600">Financing</a>
</li>
</ul>
<ul class="grid grid-cols-2 gap-2 pt-6 mt-6 text-sm font-semibold border-t border-gray-200 md:grid-cols-4 text-slate-700">
<li>
<a href="#" class="block hover:text-blue-600">About</a>
</li>
<li>
<a href="#" class="block hover:text-blue-600">Support</a>
</li>
<li>
<a href="#" class="block hover:text-blue-600">Blog</a>
</li>
<li>
<a href="#" class="block hover:text-blue-600">Pricing</a>
</li>
<li>
<a href="#" class="block hover:text-blue-600">Contact</a>
</li>
</ul>
</nav>
<div class="px-6 py-4 rounded-b-md bg-slate-100">
<div class="flex items-center justify-center space-x-4">
<a href="#" class="flex items-center space-x-1 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
<span>
Sign in
</span>
</a>
<span class="border-l-2 border-gray-300"> </span>
<a href="#" class="text-sm">Create account</a>
</div>
</div>
</div>
</div>
<!--/ menu overlay-->
</div>
</header>
<!-- Content -->
<div class="px-4 pt-12 sm:px-8 lg:pt-20 lg:px-12">
<div class="flex flex-col w-full max-w-screen-xl mx-auto space-y-6 lg:justify-between lg:items-end lg:flex-row">
<div class="flex flex-col items-center justify-center max-w-2xl pt-24 pb-32 mx-auto text-center lg:pb-48">
<div class="relative w-8 h-8 mb-6 ml-3 bg-blue-100 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="absolute w-10 h-10 mb-6 text-blue-600 -top-2 -left-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
</svg>
</div>
<span class="block text-sm font-bold tracking-widest uppercase text-slate-600">404 error</span>
<h1 class="mt-3 text-4xl font-bold text-blue-600 md:text-5xl">Page not found</h1>
<p class="mt-6 text-base lg:text-lg text-slate-500">
Corporate travel leader leverages Runway global payments infrastructure to better serve business travelers around the world. Commodo duis proident mollit eu nostrud cillum laborum est ipsum sunt non amet.
</p>
<!-- call to actions -->
<div class="flex flex-col items-center justify-between mt-8 space-y-4 md:space-y-0 md:space-x-4 md:flex-row lg:space-x-10">
<a href="#" class="relative inline-flex items-center px-5 py-3 space-x-2 rounded-full bg-gradient-to-br from-slate-600 via-slate-800 to-slate-700 leading-0 text-zinc-50">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
<span>
Chat with support
</span>
<span class="absolute right-0 w-4 h-4 bg-green-500 border-2 border-white rounded-full shadow-lg -top-1 shadow-green-500"> </span>
</a>
<a href="#" class="font-semibold text-slate-500 hover:text-blue-600">Return to homepage </a>
</div>
<!--/ call to actions-->
</div>
</div>
</div>
<!--/ Content -->
<div class="pt-48">
<footer class="px-4 pb-6 sm:px-8 lg:pb-20 bg-slate-800 lg:px-12">
<!-- Cta Banner -->
<div class="relative py-12 -mb-12 overflow-hidden -translate-y-24 rounded-lg md:rounded-tr-full md:-translate-x-8 lg:py-24 bg-gradient-to-tl from-blue-700 via-indigo-600 to-blue-500 lg:-translate-x-12 lg:-translate-y-32">
<div class="absolute inset-0">
<img src="http://demo-assets.uibak.com/themesdev/cta-bg.png" alt="" class="object-cover w-full h-full opacity-20">
</div>
<div class="relative z-20 w-full max-w-screen-xl px-4 mx-auto lg:px-12">
<div class="flex flex-col items-start space-y-6 md:pr-24 lg:justify-between lg:items-center lg:flex-row 2xl:pr-0 lg:space-y-0">
<div class="max-w-md space-y-6">
<span class="text-2xl font-semibold md:text-4xl text-slate-100">A fully integrated suite of payments products</span>
</div>
<a href="#" class="inline-flex items-center px-4 py-3 space-x-1 font-semibold text-indigo-600 transition-colors duration-300 rounded-full bg-gradient-to-bl from-white via-indigo-100 to-white leading-0 hover:from-blue-600 hover:via-blue-700 hover:to-blue-500 hover:text-white">
<span>
Start with payments
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
<!-- usps -->
<div class="flex flex-col pt-6 space-y-3 md:space-y-0 md:space-x-6 md:items-center md:flex-row lg:pt-10 lg:space-x-10">
<span class="flex items-center space-x-3">
<span class="flex items-center justify-center w-8 h-8 border-2 rounded-full md:w-10 md:h-10 border-opacity-20 border-indigo-50">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-indigo-100" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
</svg>
</span>
<span class="text-sm font-semibold lg:text-lg text-slate-200">
Close to the metal
</span>
</span>
<span class="flex items-center space-x-3">
<span class="flex items-center justify-center w-8 h-8 border-2 rounded-full md:w-10 md:h-10 border-opacity-20 border-indigo-50">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-indigo-100" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.933 12.8a1 1 0 000-1.6L6.6 7.2A1 1 0 005 8v8a1 1 0 001.6.8l5.333-4zM19.933 12.8a1 1 0 000-1.6l-5.333-4A1 1 0 0013 8v8a1 1 0 001.6.8l5.333-4z" />
</svg>
</span>
<span class="text-sm font-semibold lg:text-lg text-slate-200">
Fastest-improving platform
</span>
</span>
<span class="flex items-center space-x-3">
<span class="flex items-center justify-center w-8 h-8 border-2 rounded-full md:w-10 md:h-10 border-opacity-20 border-indigo-50">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-indigo-100" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4" />
</svg>
</span>
<span class="text-sm font-semibold lg:text-lg text-slate-200">
Battle-tested reliability
</span>
</span>
</div>
<!--/ usps -->
</div>
</div>
<!--/ Cta Banner -->
<!-- Footer -->
<div class="max-w-screen-xl mx-auto">
<div class="grid lg:grid-cols-2">
<div class="space-y-8">
<div class="space-y-3">
<a href="#">
<img src="http://demo-assets.uibak.com/themesdev/runway-logo-white.svg" alt="Runway Logo" class="h-12">
</a>
<p class="italic tracking-wider text-slate-200">The SaaS website template for Tailwind CSS</p>
</div>
<address class="not-italic leading-7 text-slate-400">
Torli Turnpike Street<br>
80129 KM Lejiso<br>
Antarctica
</address>
<a href="mailto:info@themes.dev" class="inline-block text-slate-400 hover:text-blue-600">info@themes.dev</a>
</div>
<div class="pt-12 space-y-8 lg:pt-14">
<span class="block tracking-wider text-slate-200">Runway services</span>
<div class="grid grid-cols-2 gap-12 text-slate-400">
<nav class="space-y-2">
<a href="#" class="block hover:text-blue-600">Automated Follow Up</a>
<a href="#" class="block hover:text-blue-600">Payment Services</a>
<a href="#" class="block hover:text-blue-600">Credit Scores</a>
<a href="#" class="block hover:text-blue-600">Internal Notes</a>
</nav>
<nav class="space-y-2">
<a href="#" class="block hover:text-blue-600">Dialogue</a>
<a href="#" class="block hover:text-blue-600">Payment Plans</a>
<a href="#" class="block hover:text-blue-600">Invoicing</a>
<a href="#" class="block hover:text-blue-600">Financing</a>
</nav>
</div>
</div>
</div>
<div class="flex flex-col pt-6 mt-12 space-y-4 border-t lg:space-y-0 lg:justify-between lg:items-center lg:flex-row border-slate-600 lg:pt-8 lg:mt-24">
<span class="text-slate-400">
Copyright 2021 Runway. All rights reserved.
</span>
<nav class="flex flex-col space-y-2 sm:space-y-0 sm:space-x-2 sm:flex-row lg:space-x-6">
<a href="#" class="text-slate-400 hover:text-blue-600">Terms & Conditions</a>
<a href="#" class="text-slate-400 hover:text-blue-600">Privacy Policy</a>
<a href="#" class="text-slate-400 hover:text-blue-600">Processor Agreement</a>
</nav>
</div>
</div>
<!--/ Footer -->
</footer>
</div>
</div>