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.1k

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

Welcome to Cinema
The design captures the magic and glamour of cinema with a modern, interactive interface that would definitely make users stop scrolling and say "whoa!" The color scheme uses cinematic blacks and golds with vibrant accent colors, while the animations bring the interface to life without overwhelming the content

Author:
Augustin

4 months ago

471
Home banner video background
Home banner video background

Author:
Rameez Rami

1 year ago

6.6k
animated hero

Author:
Crimson

9 months ago

2.6k
Hero Slider with Alpine.js
This responsive hero slider features full-screen image backgrounds with elegant text overlays and smooth transitions.

Author:
Juraj

5 months ago

1.3k
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

1.6k
Hero Section>> visually striking and incorporates some different elements.
Key features of this alternative hero section: 1. Background: - Uses a gradient overlay on top of a background image for depth. - Incorporates a semi-transparent dark overlay for better text contrast. 2. Layout: - Maintains a two-column layout on larger screens, stacking on mobile. - Left side focuses on a bold, three-line tagline and concise description. - Right side features a glassmorphic card with key selling points. 3. Design Elements: - Uses a custom Google Font (Poppins) for a modern look. - Incorporates rounded buttons with hover effects. - Features colorful icons for the selling points. - Adds a decorative wave SVG at the bottom for visual interest. 4. Responsiveness: - Adjusts padding, font sizes, and layout for different screen sizes. - Stacks buttons vertically on very small screens. 5. Interactivity: - Includes hover effects on buttons and links. This design aims to create a more visually impactful first impression while still maintaining clarity and focus on the key messages and call-to-action elements. The use of a background image with overlays adds depth, while the glassmorphic card on the right adds a modern touch. You can further customize this by: - Changing the background image URL to one that fits your brand. - Adjusting colors in the gradient, buttons, and icons to match your brand colors. - Modifying the tagline, description, and selling points to fit your company's message. Would you like me to explain any part of this code or make any further adjustments?

Author:
zobaidul kaziex

1 year ago

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

2 years ago

8.3k
SHOES SHOP
all categories of shoes like women ,men ,and children

Author:
ineza aime stella

5 months ago

508
Hero with Background Image

Author:
ariaw

1 week ago

70
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

176
Banner - Hero - Splash Section

Author:
ABDO-SY

8 months ago

796
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 days ago

40

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components