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

2.7k

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

Slide
A slide component which could be used as hero section or in a slideshow

Author:
farid

2 weeks ago

236
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

2 months ago

483
Minimalist Hero Section
A minimal but nice hero section.

Author:
VoltagedDev

3 months ago

374
Background image section

Author:
Marc

11 months ago

4.7k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

5 months ago

894
Hero section with Big Heading
Hero banner with a gradient background, ideal for showcasing products or services. I also support dark mode.

Author:
Mereani Waqa

1 year ago

6.9k
Hero example simply beautiful

Author:
Lucas Martinez

1 year ago

11.7k
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

1 year ago

8.2k
Welcome banner for developers portfolio
A hero section welcoming visitors to a portfolio or website. It features a large, visually appealing title and an image.

Author:
Vikram Choudhary

1 year ago

8.1k
Hero with SVG background
It has a nice 'Sign Up with Google' CTA button

Author:
Santiago Hernandez

7 months ago

989
Hero section

Author:
Mohit Prajapati

2 years ago

10.6k
Advance Designed hero section
We create a Advance animated hero section using tailwindcss and custom css

Author:
Akram Khan

5 months ago

911

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components