JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>My product page</title>
        <link rel = "stylesheet" type = "text/css" href = "product_page.css" />
    </head>
    <body>
        <main>
            <header id="header">
            <div class="logo">
      <img
        id="header-img"
        src="devsor.png"
        alt="DEVSOR LOGO"
      /></div><div>

                <nav id="nav-bar">
                    <a  class="nav-link" href="#Home">Home</a>
                    <a class="nav-link" href="#Products">Products</a>
                    <a class="nav-link" href="#About">About</a>
                    <a class="nav-link" href="#contact">Contact</a>
                    <a class="nav-link" href="#Team">Team</a>
                </nav>

            </div>
            </header>
            <br>
            <section id="Home">
            <img src="devsor.png" style="margin:auto; display:block;"/>
            <h1 id="titl">Devsor :-Go digital</h1>
            <div><p> We are here to help you with all the digital issues and demands.
                We can help you with going digital and all the steps related to that.
                So if you are planning to have any software or need help with being online 
                and enhance your product by selling or advertising it to gloabal market.
                <br> Contact us Devsor.</p></div>
            </p>

        </section>

        <section id="Products">
            <div class="product" id="tenor">
                <div class="level">Basic website</div>
                <h2>$850</h2>
                <img src="stx.jpg" style="height:40%; width:50%;"/>
                <ul>
                  <p>Important functions</p>
                  <p>Notifications</p>
                  <p>Login Credential</p>
                  <p>Blog posting</p>
                </ul>
                <button class="btn">Select</button>
              </div>

              <div class="product" id="app">
                <div...

CSS

body{
    background-color: rgb(184, 241, 167);
    font-family: Arial, Helvetica, sans-serif;
}
#header{
  width: 100%;
        position: fixed;        
        background: #893;
        padding: 10px 0;
        background-color: skyblue;
        top: 0;
        display: flex;
        justify-content: space-around;
}
nav a{
  color: #fff;
  text-decoration: none;
  padding: 7px 25px;
  display: inline-block;
}
#header-img{
  height:35px;
  width:35px;
  background-color:#4568;
}
#titl{
  color:rgb(255, 0, 0);
  margin:auto;
  text-align:center;
  font-size: 40px;
  font-weight: 600;
  font-family: cursive;
}

#video{
  width:80%;
  margin: auto;
  display: table;
}


#Products {
  margin-top: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 60px;
}
.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 33.33%;
  border: 1px solid #000;
  border-radius: 3px;
}
.product > .level {
  background-color: #ddd;
  color: black;
  width: 100%;
  padding 15px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 500;
}

@media (max-width: 800px) {
  #pricing {
    flex-direction: column;
  }
  .product {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 10px;
  }
}





/*For form    add full-width input fields*/
h2{margin: auto;
    display: table;
}
  form{width:50%;
    margin: auto;
    display: table;
    border-radius:5px;}
    input[type=email],
    textarea[type=text]{
        width: 100%;
        padding: 6px 15px;
        margin: 8px 0;
        display: inline-block;
        border: 2px solid #ccc;
        border-radius:5px;
        box-sizing: border-box;
    }
    /* set a style for all buttons*/
     
    #submit{
        background-color: Green;
        color: white;
        padding: 10px 15px;
        margin: 8px 0;
        cursor: pointer;
        width: 100%;
    }
    /*float signup buttons and add an equal width*/
     
   ...