Section Header Using Tailwind UI
A section header designed with Tailwind adds visual structure and appeal to content sections, helping users easily identify and navigate to specific parts of a webpage or document.
section
Loading component...
146 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>
<!-- Component Inspired design by https://wise.com/us/pricing/ -->
<section class="bg-[#9FE870] text-[#163300]">
<div class="overflow-x-hidden">
<header
class="relative flex flex-col max-w-screen-xl px-4 py-4 overflow-hidden lg:mx-auto lg:flex-row lg:items-center">
<a href="#" class="flex items-center text-2xl font-black whitespace-nowrap">
<span class="w-8 mr-2">
<img src="/images/JOJj79gp_Djhwdp_ZOKLL.png" alt="" />
</span>
O'conner
</a>
<input type="checkbox" class="hidden peer" id="navbar-open" achecked />
<label class="absolute cursor-pointer top-5 right-5 lg:hidden" for="navbar-open">
<span class="sr-only">Toggle Navigation</span>
<svg class="h-7 w-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16">
</path>
</svg>
</label>
<nav aria-label="Header Navigation"
class="flex flex-col items-center w-full overflow-hidden transition-all peer-checked:pt-8 peer-checked:max-h-60 max-h-0 lg:ml-24 lg:max-h-full lg:flex-row">
<ul
class="flex flex-col items-center w-full space-y-2 font-medium lg:flex-row lg:justify-center lg:space-y-0">
<li class="lg:mr-12">
<a class="transition rounded focus:outline-none focus:ring-1 focus:ring-blue-700 focus:ring-offset-2"
href="#">Features</a>
</li>
<li class="lg:mr-12">
<a class="transition rounded focus:outline-none focus:ring-1 focus:ring-blue-700 focus:ring-offset-2"
href="#">Pricing</a>
</li>
<li class="lg:mr-12">
<a class="transition rounded focus:outline-none focus:ring-1 focus:ring-blue-700 focus:ring-offset-2"
href="#">Help</a>
</li>
</ul>
<hr class="w-full mt-4 lg:hidden" />
<div class="flex items-center my-4 space-x-6 space-y-2 lg:my-0 lg:ml-auto lg:space-x-8 lg:space-y-0">
<a href="#" title=""
class="font-medium transition-all duration-200 rounded whitespace-nowrap focus:outline-none focus:ring-1 focus:ring-blue-700 focus:ring-offset-2 hover:text-opacity-50">
Log in
</a>
<a href="#" title=""
class="whitespace-nowrap rounded-xl text-white bg-[#163300] px-5 py-3 font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-offset-2">Register</a>
</div>
</nav>
</header>
<div class="relative py-12 sm:py-16 lg:pt-20 xl:pb-0">
<div class="relative px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto text-center">
<h1
class="mt-5 text-3xl font-extrabold leading-tight sm:text-5xl sm:leading-tight lg:text-7xl lg:leading-tight">
Wise fees: <br class="sm:hidden" />
Only pay for what you use
</h1>
<p class="max-w-md mx-auto mt-12 text-xl font-medium leading-7">
For residents in United States.
</p>
<div class="relative inline-flex mt-10 group">
<a href="#" title=""
class="flex items-center px-10 py-3 font-bold underline transition-all duration-200 rounded-xl underline-offset-8 decoration-wavy hover:decoration-white">Get
Switch to Wise Business
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6 ml-1">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
</div>
</div>
</div>
<div class="max-w-6xl px-6 pb-8 mx-auto">
<div class="grid grid-cols-1 gap-6 mt-16 md:grid-cols-2">
<div class="flex items-center p-6 bg-white rounded-lg shadow-md hover:bg-opacity-50">
<svg fill="currentColor" focusable="false" viewBox="0 0 24 24" class="w-20 h-20">
<path
d="M21.343 10.543 12.77 1.972a.829.829 0 0 0-1.2 0L3 10.543l1.2 1.2 7.114-7.114v17.657h1.715V4.63l7.114 7.114 1.2-1.2Z">
</path>
</svg>
<div class="ml-4">
<h2 class="mb-4 text-3xl font-extrabold uppercase">Send money</h2>
<p class="text-lg font-medium">
Transfer money between banks, or from your account.
</p>
</div>
</div>
<div class="flex items-center p-6 bg-white rounded-lg shadow-md hover:bg-opacity-50">
<svg class="w-20 h-20" fill="currentColor" focusable="false" viewBox="0 0 24 24">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M21.424 4.714c.476 0 .862.386.862.862v6.423c0 .237-.2.424-.415.526a1.295 1.295 0 0 0-.416.322 1.783 1.783 0 0 0-.33.568 2.144 2.144 0 0 0-.125.728c0 .255.044.502.126.728.081.225.196.416.328.567.132.15.276.256.417.323.203.096.393.268.413.486h.002v2.606a.861.861 0 0 1-.862.861H2.576a.861.861 0 0 1-.862-.861V5.576c0-.476.386-.862.862-.862h18.848Zm-.853 12.242V18H3.428V6.429h17.143v4.9a3.136 3.136 0 0 0-.407.39c-.278.318-.5.696-.65 1.112-.15.416-.228.862-.228 1.312 0 .45.077.896.228 1.312.15.416.372.794.65 1.112.126.144.262.274.407.39Zm-15-5.813h2.572V9.429H5.57v1.714Z">
</path>
</svg>
<div class="ml-4">
<h2 class="mb-4 text-3xl font-extrabold uppercase">Use the Wise debit <br> card</h2>
<p class="text-lg font-medium">
Get a new card, spend abroad, and get cash out from ATMs.
</p>
</div>
</div>
<div class="flex items-center p-6 bg-white rounded-lg shadow-md hover:bg-opacity-50">
<svg class="w-20 h-20" fill="currentColor" focusable="false" viewBox="0 0 24 24">
<path
d="m20.143 12.256-7.114 7.114V1.713h-1.715V19.37L4.2 12.256l-1.2 1.2 8.571 8.571a.847.847 0 0 0 .6.257.846.846 0 0 0 .6-.257l8.572-8.571-1.2-1.2Z">
</path>
</svg>
<div class="ml-4">
<h2 class="mb-4 text-3xl font-extrabold uppercase">Receive and add <br> money</h2>
<p class="text-lg font-medium">
Get paid into or add money to your account.
</p>
</div>
</div>
<div class="flex items-center p-6 bg-white rounded-lg shadow-md hover:bg-opacity-50">
<svg class="w-24 h-24" fill="currentColor" focusable="false" viewBox="0 0 24 24">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.662 3.429a6.23 6.23 0 0 1 5.323 2.987 7.948 7.948 0 0 0-8.57 8.57A6.234 6.234 0 0 1 9.663 3.429ZM6.887 17.113A7.948 7.948 0 1 1 17.112 6.888 7.948 7.948 0 1 1 6.888 17.113Zm13.684-2.775a6.234 6.234 0 1 1-12.467 0 6.234 6.234 0 0 1 12.468 0Z">
</path>
</svg>
<div class="ml-4">
<h2 class="mb-4 text-3xl font-extrabold uppercase">Hold money in <br> your account</h2>
<p class="text-lg font-medium">
Hold 40+ currencies in your Wise Account.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>