Home
Samuel Abera
Hero Beer

Hero Beer

This tailwind example is contributed by Samuel Abera, on 10-Jun-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Front page

Hero Landing Page

Author Samuel Abera

1.5k

Fork Fullscreen

<div class="hidden md:flex md:items-center md:w-auto w-full z-10" id="menu">
            <nav>
                <ul class="md:flex items-center justify-between text-base text-gray-800 pt-4 md:pt-0">
                    <li><a class="md:p-4 py-3 px-0 block text-gray-100" href="#">Home</a></li>
                    <li><a class="md:p-4 py-3 px-0 block" href="#">Products</a></li>
                    <li><a class="md:p-4 py-3 px-0 block" href="#">Shop</a></li>
                    <li><a class="md:p-4 py-3 px-0 block" href="#">About</a></li>
                    <li><a class="md:p-4 py-3 px-0 block md:mb-0 mb-2" href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    <div
        class="[&>*:last-child]:hover:top-0 md:[&>*:last-child]:hover:left-[15rem] lg:[&>*:last-child]:hover:left-[18rem] md:[&>*:last-child]:hover:left-[13rem] xs:[&>*:last-child]:hover:left-[7rem] group absolute top-[30%] md:left-[30%] sm:left-[25%] xs:left-[15%]">
        <div
            class="[transition:all_400ms_ease] group-hover:rotate-0 lg:w-[18rem] lg:h-[22rem] md:w-[14rem] md:h-[18rem] sm:w-[12rem] sm:h-[16rem] xs:w-[10rem] xs:h-[12rem] border-[0.4rem] border-transparent shadow-xl absolute -rotate-[10deg] origin-bottom-left">
            <img src="https://images.unsplash.com/photo-1436076863939-06870fe779c2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwzfHxiZWVyfGVufDB8MHx8fDE3MTI3NDU4Njh8MA&ixlib=rb-4.0.3&q=80&w=1080" class="w-full h-full rounded-sm" alt="Frame Two">
        </div>
        <div
            class="[transition:all_400ms_ease] absolute -rotate-[10deg] last:rotate-[20deg] -top-[2rem] left-[2rem] group-hover:rotate-0 lg:w-[18rem] lg:h-[22rem] md:w-[14rem] md:h-[18rem] sm:w-[12rem] sm:h-[16rem] xs:w-[10rem] xs:h-[12rem] border-[0.4rem] border-transparent shadow-xl origin-bottom-left">
            <img src="https://images.unsplash.com/photo-1608270586620-248524c67de9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw0fHxiZWVyfGVufDB8MHx8fDE3MTI3NDU4Njh8MA&ixlib=rb-4.0.3&q=80&w=1080" class="w-full h-full rounded-sm" alt="Frame One">
        </div>
    </div>

<div class="absolute bg-black/20 py-2 md:top-[75%] sm:top-[70%] xs:top-[60%]">
        <h1 class="w-full md:px-4 xs:px-2 xl:text-7xl lg:text-5xl sm:text-4xl xs:text-3xl text-white text-center font-serif font-semibold">Farm-Fresh Brews: From Field to Glass, an Unforgettable Beer Journey.</h1>
    </div>
</div>

Related Examples

A Fullscreen Hero Section

Author:
Brandon D

2 years ago

13.9k
Hero

Author:
Aman kumar

7 months ago

3.7k
Hero Section
Home hero section search bar

Author:
Samuel Abera

6 months ago

2.9k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

4 months ago

5.2k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

3 months ago

1.3k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

Author:
Samuel Abera

3 months ago

2.3k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

2 months ago

311
Hero block with image

Author:
Simon Scheffer

1 year ago

10.8k
Typical SAAS hero section

Author:
Eamon Carter

1 year ago

6.8k
Responsive hero section

Author:
Amit Pachange

1 year ago

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

3 weeks ago

213
Simple app landing page with video preview

Author:
Prajwal Hallale

1 year ago

9.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1600+ componenent