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

10.4k

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