Curve Header Center Content Using Tailwind UI
A ‘Curve Header Center Content’ component created with Tailwind combines a unique curved header design with centered content, providing an aesthetically pleasing and engaging layout for web pages or documents.
header
Loading component...
45 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>
<section>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="800" viewBox="0 0 1500 500" preserveAspectRatio="none"
class="relative w-full">
<defs>
<linearGradient id="myGradient" gradientTransform="rotate(45)">
<stop offset="35%" stop-color="#4b4bc8" />
<stop offset="65%" stop-color="#00d4ff" />
</linearGradient>
</defs>
<path d="M 0,0
L 0,250
Q 750,500 1500,250
L 1500, 0
Z" fill="url('#myGradient')" />
</svg>
<div class="absolute flex flex-col justify-center w-full mx-auto overflow-x-hidden text-center top-14">
<div class="max-w-xl mx-auto mt-12 md:max-w-5xl">
<h1 class="text-3xl font-extrabold leading-tight sm:text-5xl sm:leading-tight lg:text-7xl lg:leading-tight">
Build with the power of code — without writing any
</h1>
<p class="mt-6 text-xl font-medium leading-7">Take control of HTML, CSS, and JavaScript in a visual
canvas. Webflow generates clean,
semantic code
that’s ready to publish or hand to developers.Start building.
</p>
<button type="button"
class="mt-12 text-white bg-[#16164f] hover:bg-[#0a0a2d] focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-base px-8 py-4 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700">Get
Start Building
</button>
</div>
</div>
</section>