Home
Umutoniwase Yvette
Markert shop

Markert shop

wellcome tothe my online shoping

This tailwind example is contributed by Umutoniwase Yvette, on 27-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Header

Author Umutoniwase Yvette

452

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Online Marketing Landing Page</title>
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background-color: #f7f7f7;
      color: #333;
    }
    header {
      background: #0a66c2;
      color: white;
      padding: 60px 20px;
      text-align: center;
    }
    header h1 {
      font-size: 3em;
      margin: 0;
    }
    header p {
      font-size: 1.2em;
      margin-top: 10px;
    }
    .features {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 40px 20px;
      background: white;
    }
    .feature {
      flex: 1 1 300px;
      max-width: 300px;
      background: #e9f3ff;
      margin: 10px;
      padding: 20px;
      border-radius: 10px;
    }
    .feature h3 {
      margin-top: 0;
      color: #0a66c2;
    }
    .subscribe {
      background: #d9edff;
      padding: 40px 20px;
      text-align: center;
    }
    .subscribe input {
      padding: 10px;
      width: 250px;
      max-width: 80%;
      margin-right: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .subscribe button {
      padding: 10px 20px;
      background: #0a66c2;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    .subscribe button:hover {
      background: #084a96;
    }
    footer {
      text-align: center;
      padding: 20px;
      background: #333;
      color: white;
    }
  </style>
</head>
<body>

<header>
    <h1>Boost Your Business Online</h1>
    <p>Reach thousands of customers with powerful digital marketing tools</p>
  </header>

<section class="features">
    <div class="feature">
      <h3>SEO Optimization</h3>
      <p>Get found on Google and improve your search engine rankings.</p>
    </div>
    <div class="feature">
      <h3>Social Media Ads</h3>
      <p>Target the right audience with optimized Facebook and Instagram ads.</p>
    </div>
    <div class="feature">
      <h3>Email Campaigns</h3>
      <p>Send professional emails that convert leads into loyal customers.</p>
    </div>
  </section>

<section class="subscribe">
    <h2>Join Our Newsletter</h2>
    <p>Stay updated with the latest tips & offers</p>
    <form id="subscribeForm">
      <input type="email" id="email" placeholder="Enter your email" required />
      <button type="submit">Subscribe</button>
    </form>
  </section>

<footer>
    &copy; 2025 Online Marketing Co. All rights reserved.
  </footer>

Related Examples

Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

2 years ago

11.7k
Production-Ready Responsive Navigation
This is a sample content area. Scroll down to see the fixed header in action.

Author:
zobaidul kaziex

1 year ago

3.5k
Basic sidebar

Author:
Rajesh Maheshwari

9 months ago

1.9k
Movies are a popular form
Movies are a popular form of entertainment that combine storytelling, visuals, and sound to create immersive experiences. They can be fictional or based on real events, spanning genres like action, comedy, drama, horror, sci-fi, romance, and more. Here’s a quick overview:

Author:
nii fanny

6 months ago

642
home
html , css

Author:
Hacker Development

7 months ago

1.7k
Admin panel with collapsible menus

Author:
Rajesh Maheshwari

9 months ago

4.9k
Enhanced Modern Navbar
The navbar now feels premium and modern while maintaining all original functionality. The glassmorphism effect, smooth animations, and professional styling create a cutting-edge user experience that would fit perfectly on any modern website!

Author:
Rathanak Phan

6 months ago

676
Sticky Changelog

Author:
Michael Andreuzza

1 year ago

2.2k
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

1.7k
Sidebar with Tailwind CSs and alpinejs

Author:
Michael Andreuzza

1 year ago

3.6k
Section Heading
A gorgeous section heading with a smooth blur element.

Author:
Coastal UI

1 year ago

1.7k
Header with logo, menu and buttons
Header with logo, menu and buttons. If you want to toggle the visibility of the mobile menu when clicking on the hamburger menu icon you can achieve this with JavaScript by adding and removing a class that controls the visibility of the mobile menu

Author:
Mike Varen

1 year ago

4.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components