Home
Laurits
Hero banner

Hero banner

This tailwind example is contributed by Laurits, on 01-Feb-2023. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author Laurits

12k

Fork Fullscreen

<div class="w-full mx-auto text-center mb-10 -mt-0 -sm:mt-4 max-w-[1024px]">
    <h1 class="semibold text-[2.6rem] leading-10 sm:text-6xl sm:leading-auto mb-6 block">
        Crypt AI and beyond
    </h1>
    <h2 class="semibold text-[1.75rem] leading-9 sm:text-4xl sm:leading-auto mb-6 block">
        not your average crypto coin
    </h2>
    <div class="w-screen sm:w-auto max-w-[1024px] ml-[-32px] sm:ml-0">
        <button type="button"
			class="inline-flex items-center shadow-sm text-sm rounded-lg text-white active:ring-2 hover:ring-2 ring-slate-100 ring-offset-2 mx-1 text-[1.1rem] sm:text-[1.5rem] font-light px-3 sm:px-6 py-3 bg-gradient-to-bl from-fuchsia-500 to-indigo-500 hover:from-fuchsia-600 hover:to-indigo-600">
            Create a coin
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
				stroke="currentColor" class="w-8 h-8 ml-2">
				<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75">
				</path>
			</svg>
		</button>
        <button type="button"
			class="inline-flex items-center shadow-sm text-sm rounded-lg text-white active:ring-2 hover:ring-2 ring-slate-100 ring-offset-2 mx-1 text-[1.1rem] sm:text-[1.5rem] font-light px-3 sm:px-6 py-3 bg-[#5965f3] hover:bg-[#3e4be0] sm:ml-4 mt-2">Join
			Discord
			<svg xmlns="http://www.w3.org/2000/svg" fill="none" class="ml-2 h-8" height="28" viewBox="0 0 34 34"
				width="28">
				<g fill="#fff">
					<path
						d="m26.2543 6.96724c-2.0063-.91902-4.1515-1.58695-6.3942-1.96724-.2754.48755-.5972 1.14329-.819 1.66497-2.3841-.35103-4.7463-.35103-7.0865 0-.2219-.52168-.551-1.17742-.8289-1.66497-2.24507.38029-4.39272 1.05066-6.39895 1.97212-4.046649 5.98708-5.143625 11.82548-4.595136 17.58088 2.683936 1.9624 5.284976 3.1544 7.842166 3.9345.63135-.8508 1.19448-1.7552 1.67958-2.7083-.92388-.3437-1.80878-.7679-2.64492-1.2603.22186-.1609.43878-.3291.64842-.5022 5.09974 2.3354 10.64074 2.3354 15.67944 0 .2121.1731.4291.3413.6485.5022-.8386.4948-1.7259.919-2.6499 1.2627.4852.9507 1.0458 1.8576 1.6797 2.7083 2.5596-.78 5.1631-1.9721 7.847-3.9369.6436-6.672-1.0994-12.4568-4.6073-17.58576zm-15.9062 14.04616c-1.53084 0-2.78631-1.3992-2.78631-3.1032s1.22862-3.1056 2.78631-3.1056c1.5577 0 2.8132 1.3992 2.7864 3.1056.0024 1.704-1.2287 3.1032-2.7864 3.1032zm10.297 0c-1.5309 0-2.7863-1.3992-2.7863-3.1032s1.2286-3.1056 2.7863-3.1056 2.8131 1.3992 2.7863 3.1056c0 1.704-1.2286 3.1032-2.7863 3.1032z">
					</path>
				</g>
			</svg>
		</button>
    </div>
</div>

Related Examples

SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

2 years ago

9.1k
Hero

Author:
ORGIN_DREAMS

5 months ago

895
strawbery
by salvator

Author:
Baraka Salvator

5 months ago

782
Modern CV Template - Stylish HTML and Tailwind CSS Design for Professionals
Download this modern CV template crafted with HTML and Tailwind CSS. Featuring a clean, stylish design and easy customization, this CV template is perfect for professionals looking to make a strong impression. Showcase your skills, experience, and education with a visually appealing and responsive layout.

Author:
Hezron Okoko

1 year ago

2.8k
Landing page

Author:
Maxim

7 months ago

1.6k
Login_Form
help to logging in

Author:
ineza aime stella

5 months ago

507
Clean hero section
Hero template with buttons

Author:
Laurits

2 years ago

15.1k
Simple hero example

Author:
Task Master

3 years ago

11k
Hero Section Fashion Page

Author:
ABDO-SY

7 months ago

825
Hero Section
Created a good and responsive web Hero Page

Author:
Ravi.Kumar Kumar

9 months ago

2.2k
Hero section - Htmlwind
Simple centered hero section

Author:
Htmlwind

5 months ago

583
Extra large hero

Author:
Gbenga Adegoke

2 years ago

10.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components