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

249

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

Sticky Changelog

Author:
Michael Andreuzza

1 year ago

2.1k
Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

9.1k
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.2k
Home page
Home page для ПО, страница для входа в приложение.

Author:
Алла Телегина

8 months ago

1k
Yoga Coach Hero Section

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

1 year ago

5.4k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

3.4k
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.1k
navigation header
responsive navigation header

Author:
Abid Ullah

1 year ago

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

Author:
Coastal UI

11 months ago

1.5k
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

1 year ago

4.6k
Active Beauty Main Page

Author:
Maxim

7 months ago

918
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components