Home
Maxim
Hero (with dark mode)

Hero (with dark mode)

Full-width hero section with background image overlay. Includes headline, description text and CTA buttons. Supports dark mode and responsive design.

This tailwind example is contributed by Maxim, on 02-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Hero

Author Maxim

1.4k

Fork Fullscreen

<div class="relative w-full md:w-[600px] lg:w-[700px] p-8 md:p-12 mt-8 md:mt-12 mx-auto md:mr-8 lg:mr-12">
        <div class="bg-white/90 dark:bg-gray-800/90 p-8 rounded-lg backdrop-blur-sm">
            <div class="max-w-2xl">
                <h2 class="text-2xl md:text-3xl font-bold mb-4 dark:text-white">
                    დუბროვნიკი - ადრიატიკის მარგალიტი
                </h2>

<p class="text-gray-700 dark:text-gray-300 text-base md:text-lg mb-6">
                    აღმოაჩინეთ ჯადოსნური დუბროვნიკი, ქალაქი სადაც ისტორია ცოცხლობს. შუასაუკუნეების კედლები, ულამაზესი ადრიატიკის ზღვა და უძველესი არქიტექტურა გთავაზობთ დაუვიწყარ შთაბეჭდილებებს.
                </p>
                <div class="flex flex-col sm:flex-row gap-4">
                    <button class="bg-red-600 dark:bg-red-700 text-white px-6 py-2 rounded-md hover:bg-red-700 dark:hover:bg-red-800 transition-colors">
                        მეტის გაგება
                    </button>
                    <a href="#" class="text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 flex items-center transition-colors">
                        ყველა მიმართულება
                        <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

1 year ago

3k
Hero banner

Author:
Piet Vriend

3 years ago

16.8k
Banner - Hero - Splash Section

Author:
ABDO-SY

10 months ago

1.1k
future ai robot
this an ai template by salvator

Author:
Baraka Salvator

8 months ago

1k
Standard Hero

Author:
Anonymous

1 year ago

4k
Real Estate Website • Hero Section
polished, professional Hero section

Author:
UI-Templates

3 months ago

388
composent section presentation société
composent section presentation société

Author:
Omer fils ELENGA

1 year ago

1.7k
Rwandan farmers with Canadian markets through sustainable, fair trade practices.
Key Features of This Website: Professional Design: Clean, modern interface with orange/green color scheme representing mangoes and agriculture Fully responsive layout that works on all devices Comprehensive Sections: Hero section highlighting the Rwanda-Canada mango trade Product showcase with different mango varieties Current market pricing table Detailed farm-to-table process explanation Company information and impact metrics Testimonials from partners Contact form and information Trade-Specific Content: Focus on Rwandan mango varieties suitable for Canadian markets Pricing in both USD and kg units common in agricultural trade Information about certifications and compliance Shipping and logistics details User Experience: Clear calls-to-action for quotes and orders Easy navigation between sections Newsletter signup for market updates Contact information prominently displayed Trust Elements: Certifications and compliance badges Impact statistics showing benefits to Rwandan farmers Testimonials from Canadian partners

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

1k
Hero with Background Image

Author:
ariaw

3 months ago

263
Extra large hero

Author:
Gbenga Adegoke

2 years ago

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

1 year ago

1.8k
Hero section for website

Author:
Leon Bachmann

3 years ago

11.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components