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

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

16.4k
Hero

Author:
Aman kumar

11 months ago

4.9k
Hero Section
Home hero section search bar

Author:
Samuel Abera

10 months ago

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

8 months ago

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

7 months ago

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

Author:
Samuel Abera

7 months ago

5.3k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

6 months ago

965
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Author:
Coastal UI

3 months ago

656
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Author:
Coastal UI

3 months ago

696
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

2 months ago

573
Portfolio Hero Section 4

Author:
Samuel Abera

2 months ago

1.3k
Single Page Portfolio

Author:
Samuel Abera

3 weeks ago

337

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components