JSFiddle - React, Tailwind, and code Playground

by Good Muyis

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?
	family=Ubuntu+Mono&display=swap" rel="stylesheet">
  </head>

  <body>
    <header>
      <h1 id="top">Online</h1>
      <h1 id="top1">FoodShop</h1>
    </header>
    <hr>
    <nav id="navbar">
      <img src="5.jpeg">
      <ul id="navcontent">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="contact.html">ContactUs</a></li>
      </ul>
    </nav>
    <div id="container1">
      <div id="row1">
        Welcome to Online FoodShop
      </div>
      <button class="btn">ORDER NOW</button>
      <div id="container3">
        <div id="row2">
          <button class="btn">Prices</button>
        </div>
        <div id="row3">
          <button class="btn">Specials</button>
        </div>
      </div>
    </div>
    <hr>
    <h1 id="top3">Featured Products</h1>
    <div id="container4">
      <div id="row4">
        <button class="btn">ORDER NOW</button>
      </div>
      <div id="row5">
        <button class="btn">ORDER NOW</button>
      </div>
      <div id="row6">
        <button class="btn">ORDER NOW</button>
      </div>
    </div>
    <footer>Copyright © 2020-2021 OnlineFoodShop.
      All Rights are reserved</footer>
  </body>

</html>