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

Hero banner

Author:
Piet Vriend

3 years ago

16.8k
Drinkware 2

Author:
Maxim

10 months ago

992
Cyamunara
used to sell everything someone need to sell

Author:
INGRIDE MUZIRANENGE

8 months ago

834
Home banner video background
Home banner video background

Author:
Rameez Rami

2 years ago

7k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Author:
Ayyamperumal S

1 month ago

229
Tailwind flex Hero
Show Image with flex image gallery

Author:
Riaz Uddin Masum

3 weeks ago

146
Hero section with large image
Hero section with large image

Author:
Emdadul Islam

1 year ago

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

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.5k
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

Author:
ishimwe prince

8 months ago

1k
login_form
used for user to logging in

Author:
nii fanny

8 months ago

476
hero section

Author:
Omer fils ELENGA

2 months ago

114
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.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components