Responsive Hero Header Section Using Tailwind UI
The responsive hero header section, crafted with Tailwind CSS, adapts elegantly across devices, delivering a captivating introduction to the web page.
section
Loading component...
100 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>
<!-- design inpired by https://www.profounderscapital.com/?ref=land-book.com -->
<section class="text-gray-600 body-font bg-[#FDFFE7]">
<div class="container flex flex-col items-center px-5 mx-auto py-11 md:flex-row">
<div
class="flex flex-col items-center mb-16 text-center lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 md:items-start md:text-left md:mb-0">
<h1 class="sm:text-5xl text-3xl mb-4 font-medium text-[#16453a] leading-6">We are pan-European early-stage
technology investors</h1>
<p class="mb-8 text-lg font-medium leading-5 text[#16453a] text-opacity-70">We’ve been investing since 2009 in
entrepreneurs from all corners of Europe</p>
<button
class="inline-flex text-[#16453a] bg-[#ddf498] group-hover:text-[#16453a] py-2 px-4 focus:outline-none hover:bg-opacity-80 rounded text-base font-medium">Our
Approach</button>
</div>
<div class="w-5/6 lg:max-w-lg lg:w-full md:w-1/2">
<div class="flex flex-col space-y-4">
<div class="w-full group">
<div
class="flex bg-[#16453a] rounded-lg border-gray-200 border-opacity-50 py-6 pl-4 pr-8 items-start sm:flex-row flex-col group-hover:bg-[#e7dbff]">
<div class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mr-4 -ml-2 rounded-full">
<svg class="fill-current text-[#ddf498] group-hover:text-[#16453a]" width="27" height="26"
viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M26.7024 1.62154C27.0955 2.00947 27.0997 2.64262 26.7118 3.03572L13.5539 16.3691C13.366 16.5595 13.1096 16.6666 12.8421 16.6666C12.5746 16.6666 12.3182 16.5595 12.1303 16.3691L8.18296 12.3691C7.79503 11.976 7.79923 11.3428 8.19233 10.9549C8.58543 10.5669 9.21858 10.5711 9.60651 10.9642L12.8421 14.243L25.2882 1.6309C25.6762 1.2378 26.3093 1.23361 26.7024 1.62154Z"
fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.63158 2C3.20316 2 2.78958 2.17233 2.48255 2.48346C2.17507 2.79503 2 3.2204 2 3.66667V22.3333C2 22.7796 2.17507 23.205 2.48255 23.5165C2.78958 23.8277 3.20316 24 3.63158 24H22.0526C22.481 24 22.8946 23.8277 23.2017 23.5165C23.5091 23.205 23.6842 22.7796 23.6842 22.3333V13C23.6842 12.4477 24.1319 12 24.6842 12C25.2365 12 25.6842 12.4477 25.6842 13V22.3333C25.6842 23.3016 25.3048 24.2327 24.6252 24.9214C23.9452 25.6104 23.0201 26 22.0526 26H3.63158C2.66412 26 1.739 25.6104 1.059 24.9214C0.379438 24.2327 0 23.3016 0 22.3333V3.66667C0 2.69845 0.379438 1.76726 1.059 1.07864C1.739 0.389571 2.66412 0 3.63158 0H18.1053C18.6575 0 19.1053 0.447715 19.1053 1C19.1053 1.55228 18.6575 2 18.1053 2H3.63158Z"
fill="currentColor"></path>
</svg>
</div>
<div class="flex-grow">
<h2 class="text-xl title-font font-medium mb-3 text-[#efead6] group-hover:text-[#16453a]">Early Stage</h2>
<p class="leading-relaxed text-base text-[#efead6] text-opacity-70 group-hover:text-[#16453a]">We invest
an initial €500k to €3m, as lead or part of a syndicate, in teams with a working product and early
validation with customers</p>
</div>
</div>
</div>
<div class="w-full group">
<div
class="flex bg-[#16453a] rounded-lg border-gray-200 border-opacity-50 py-6 pl-4 pr-8 items-start sm:flex-row flex-col group-hover:bg-[#e7dbff]">
<div class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mr-4 -ml-2 rounded-full">
<svg class="fill-current text-[#ddf498] group-hover:text-[#16453a]" xmlns="http://www.w3.org/2000/svg"
width="24" height="14" fill="none">
<path fill="currentColor" fill-rule="evenodd"
d="M23.707.293a1 1 0 0 1 0 1.414l-9.5 9.5a1 1 0 0 1-1.414 0L8.5 6.914l-6.793 6.793a1 1 0 0 1-1.414-1.414l7.5-7.5a1 1 0 0 1 1.414 0L13.5 9.086 22.293.293a1 1 0 0 1 1.414 0Z"
clip-rule="evenodd"></path>
<path fill="currentColor" fill-rule="evenodd"
d="M16 1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V2h-5a1 1 0 0 1-1-1Z" clip-rule="evenodd">
</path>
</svg>
</div>
<div class="flex-grow">
<h2 class="text-xl title-font font-medium mb-3 text-[#efead6] group-hover:text-[#16453a]">Tech-Enabled
</h2>
<p class="leading-relaxed text-base text-[#efead6] text-opacity-70 group-hover:text-[#16453a]">We are
looking for disruptive B2B or B2C models that leverage technology (primarily software) to transform the
customer experience</p>
</div>
</div>
</div>
<div class="w-full group">
<div
class="flex bg-[#16453a] rounded-lg border-gray-200 border-opacity-50 py-6 pl-4 pr-8 items-start sm:flex-row flex-col group-hover:bg-[#e7dbff]">
<div class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mr-4 -ml-2 rounded-full">
<svg class="fill-current text-[#ddf498] group-hover:text-[#16453a]" width="22" height="26"
viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11.1758 2.59912C8.95459 2.59912 6.82438 3.48148 5.25376 5.0521C3.68314 6.62272 2.80078 8.75293 2.80078 10.9741C2.80078 14.218 4.91027 17.3596 7.21423 19.7916C8.34577 20.986 9.4807 21.9636 10.3339 22.643C10.6633 22.9054 10.9495 23.1223 11.1758 23.289C11.402 23.1223 11.6882 22.9054 12.0177 22.643C12.8709 21.9636 14.0058 20.986 15.1373 19.7916C17.4413 17.3596 19.5508 14.218 19.5508 10.9741C19.5508 8.75293 18.6684 6.62272 17.0978 5.0521C15.5272 3.48148 13.397 2.59912 11.1758 2.59912ZM11.1758 24.5158C10.6211 25.3478 10.6205 25.3475 10.6205 25.3475L10.6176 25.3455L10.6107 25.3409L10.587 25.3249C10.5668 25.3112 10.538 25.2915 10.5011 25.2659C10.4274 25.2148 10.3213 25.1403 10.1875 25.0437C9.91996 24.8505 9.54113 24.5684 9.08801 24.2076C8.18336 23.4872 6.97454 22.4466 5.76233 21.1671C3.37879 18.6511 0.800781 15.0219 0.800781 10.9741C0.800781 8.2225 1.89386 5.58358 3.83955 3.63789C5.78524 1.6922 8.42416 0.599121 11.1758 0.599121C13.9274 0.599121 16.5663 1.6922 18.512 3.63789C20.4577 5.58358 21.5508 8.2225 21.5508 10.9741C21.5508 15.0219 18.9728 18.6511 16.5892 21.1671C15.377 22.4466 14.1682 23.4872 13.2636 24.2076C12.8104 24.5684 12.4316 24.8505 12.1641 25.0437C12.0303 25.1403 11.9242 25.2148 11.8504 25.2659C11.8135 25.2915 11.7847 25.3112 11.7645 25.3249L11.7408 25.3409L11.7339 25.3455L11.7318 25.347C11.7318 25.347 11.7305 25.3478 11.1758 24.5158ZM11.1758 24.5158L11.7305 25.3478C11.3946 25.5718 10.9564 25.5714 10.6205 25.3475L11.1758 24.5158Z"
fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11.1758 8.84912C10.0022 8.84912 9.05078 9.80052 9.05078 10.9741C9.05078 12.1477 10.0022 13.0991 11.1758 13.0991C12.3494 13.0991 13.3008 12.1477 13.3008 10.9741C13.3008 9.80052 12.3494 8.84912 11.1758 8.84912ZM7.05078 10.9741C7.05078 8.69595 8.89761 6.84912 11.1758 6.84912C13.454 6.84912 15.3008 8.69595 15.3008 10.9741C15.3008 13.2523 13.454 15.0991 11.1758 15.0991C8.89761 15.0991 7.05078 13.2523 7.05078 10.9741Z"
fill="currentColor"></path>
</svg>
</div>
<div class="flex-grow">
<h2 class="text-xl title-font font-medium mb-3 text-[#efead6] group-hover:text-[#16453a]">European Focus
</h2>
<p class="leading-relaxed text-base text-[#efead6] text-opacity-70 group-hover:text-[#16453a]">We back
ventures headquartered in Europe or with significant team and commercial focus here</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>