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.7k

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

7.8k
A Fullscreen Hero Section

Author:
Hasan AlDoy (McDoy)

2 months ago

386
Hero Section
Home hero section search bar

Author:
Samuel Abera

1 year ago

6.1k
Hero with video background

Author:
farisubuntu

6 months ago

1.1k
3D Animated Image Gallery
3D Animated Image Gallery

Author:
Samuel Abera

1 year ago

6.5k
Hero (with dark mode)
Full-width hero section with background image overlay. Includes headline, description text and CTA buttons. Supports dark mode and responsive design.

Author:
Maxim

3 months ago

414
Hero

Author:
ABDO-SY

1 month ago

463
Minimalistic hero section

Author:
Sophia Baker

2 years ago

10.9k
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

2 months ago

661
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

2 weeks ago

63
Beautiful Hero Section

Author:
Brandon D

2 years ago

13.7k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

2 months ago

532

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components