JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Local Magazine Company</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <style>
    .jumbotron {
      background-image: url("https://images.unsplash.com/photo-1531214054766-a8b51e6ddc68?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80");
      background-size: cover;
      color: white;
      text-shadow: 1px 1px 3px black;
    }
    .jumbotron h1 {
      font-size: 4rem;
    }
    .jumbotron p {
      font-size: 1.5rem;
    }
  </style>
</head>
<body>
  <header>
    <div class="jumbotron jumbotron-fluid d-flex align-items-center">
      <div class="container text-center">
        <h1 class="display-4">Local Magazine Company</h1>
        <p class="lead">Bringing you the best in local news, arts, culture, and more.</p>
        <a href="#subscribe" class="btn btn-primary btn-lg">Subscribe Now</a>
      </div>
    </div>
  </header>
  <section id="about-us" class="container my-5">
    <div class="row">
      <div class="col-md-6">
        <img src="https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="img-fluid" alt="Local Magazine Team">
      </div>
      <div class="col-md-6">
        <h2>About Us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, augue a bibendum convallis, massa ipsum congue tellus, in convallis risus ipsum id ligula. Nam convallis, augue id sollicitudin blandit, ipsum velit bibendum metus, a viverra velit justo vel velit. Sed id velit vel velit molestie suscipit. Sed id velit vel velit molestie suscipit.</p>
        <a href="#our-team" class="btn btn-secondary">Meet Our Team</a>
      </div>