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

11.8k

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

1 year ago

8.4k
tiket token
enter in stadium using tecinology

Author:
Uwase Alliance

1 month ago

138
Hero Slider with Alpine.js
This responsive hero slider features full-screen image backgrounds with elegant text overlays and smooth transitions.

Author:
Juraj

1 month ago

581
login form
this login form it will be used for sign in to every website

Author:
nii fanny

1 month ago

41
Welcome to Cinema
The design captures the magic and glamour of cinema with a modern, interactive interface that would definitely make users stop scrolling and say "whoa!" The color scheme uses cinematic blacks and golds with vibrant accent colors, while the animations bring the interface to life without overwhelming the content

Author:
Augustin

4 weeks ago

112
Magic Sound
by salvator

Author:
Baraka Salvator

1 month ago

237
Managing Finance Hero
Create a modern and responsive Hero Section using TailwindCSS. This section features a bold headline, a subheading, and a call-to-action button, designed to grab user attention instantly. With a clean layout, engaging typography, and a visually appealing background, this hero section enhances the first impression of your website. Ideal for landing pages, e-commerce, and SaaS platforms, it ensures a seamless experience across all devices.

Author:
SHARIFUL ISLAM

4 months ago

492
Digital banking hero
Create a professional and trustworthy hero section for a banking landing page using TailwindCSS. This section features a bold, confidence-inspiring headline, a clear subheading emphasizing security and ease of banking, and a call-to-action button for account sign-ups or exploring services. With a modern, clean design, a background that reflects stability and innovation, and visually appealing elements, this hero section establishes credibility and trust. Ideal for online banking, fintech startups, and financial institutions, ensuring a seamless and engaging user experience.

Author:
SHARIFUL ISLAM

4 months ago

1k
Product Page
Showcase for the product.

Author:
Prem..

2 years ago

29.4k
Responsive Header and Hero Section Design
Responsive Header and Hero Section Design provides flexible adaptability across all screen sizes and devices.

Author:
ABDO-SY

4 months ago

1.6k
login
Sign in page on computer screen. Desktop computer with login form and sign in button. User account. Modern concept for web

Author:
Augustin

1 month ago

141
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components