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.3k
Hero Banner
visually striking banner section It features pattern background with using SVG

Author:
Cosimo Fazio

1 year ago

5.7k
tradition music
by salvator

Author:
Baraka Salvator

1 week ago

49
portifolio
skills

Author:
ishimwe prince

1 week ago

23
A hero component
It has a gradient background, a large title with a creative emphasis, and a call-to-action button.

Author:
Vikram Choudhary

1 year ago

8.2k
Responsive hero section

Author:
Amit Pachange

2 years ago

14.2k
Hero section with bold heading

Author:
Abigail

2 years ago

11.2k
Single Page Portfolio

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

5 months ago

1.4k
strawbery
by salvator

Author:
Baraka Salvator

1 week ago

28
Hero Section>> visually striking and incorporates some different elements.
Key features of this alternative hero section: 1. Background: - Uses a gradient overlay on top of a background image for depth. - Incorporates a semi-transparent dark overlay for better text contrast. 2. Layout: - Maintains a two-column layout on larger screens, stacking on mobile. - Left side focuses on a bold, three-line tagline and concise description. - Right side features a glassmorphic card with key selling points. 3. Design Elements: - Uses a custom Google Font (Poppins) for a modern look. - Incorporates rounded buttons with hover effects. - Features colorful icons for the selling points. - Adds a decorative wave SVG at the bottom for visual interest. 4. Responsiveness: - Adjusts padding, font sizes, and layout for different screen sizes. - Stacks buttons vertically on very small screens. 5. Interactivity: - Includes hover effects on buttons and links. This design aims to create a more visually impactful first impression while still maintaining clarity and focus on the key messages and call-to-action elements. The use of a background image with overlays adds depth, while the glassmorphic card on the right adds a modern touch. You can further customize this by: - Changing the background image URL to one that fits your brand. - Adjusting colors in the gradient, buttons, and icons to match your brand colors. - Modifying the tagline, description, and selling points to fit your company's message. Would you like me to explain any part of this code or make any further adjustments?

Author:
zobaidul kaziex

11 months ago

4.2k
Life Tree
by salvator

Author:
Baraka Salvator

1 week ago

15
Nature Hero

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

4 months ago

933

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components