JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html lang="es">

<head>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="styles/main.css">
    <meta charset="utf-8">
    <title>Apple - iPhone</title>
    
</head>
    
<body>
    

    
    <ul id="ul">
        <a href="index.html"><img src="images/logo.png"></a>
        <li><a href="#">iPhone</a></li>
        <li><a href="#">iPad</a></li>
        <li><a href="#">iPod</a></li>
        <li><a href="#">Mac</a></li>
        <li><a href="#">Watch</a></li>
        <li><a href="#">TV</a></li>
        <li><a href="#">Support</a></li>
    </ul>
    
    <div id="ad">
        
        <center>
        <h3 class="blackh1">iPhone</h3>
        <h2 class="blackh1">This is 7.</h2>
        <img src="images/iphone.jpg" class="iphoneimg">
        </center>
    
    </div>
    <div id="product-container">
        <div class="cont"><div class="product">
    
            <h1 class="h1">iPhone</h1><br>
            <img src="images/iPhone7.png" class="contentimg">
            <p class="ptext">
            This is 7.
            iPhone 7 dramatically improves the most important aspects of the iPhone experience. It introduces advanced new camera systems. The best performance and battery life ever in an iPhone. Immersive stereo speakers. The brightest, most colorful iPhone display. Splash and water resistance.1 And it looks every bit as powerful as it is. This is iPhone 7.</p>
            <button class="buy">Buy from 649$</button>
    
        </div>
        
        <div class="product">
            
            <h1 class="h1">iPad</h1><br>
            <img src="images/IPad.png"...

CSS

html,body {
    background-color: #E9E9E9;
    padding:0;
    margin:0;
}

/* Nav bar */

#ul {
    list-style-type: none;
    background-color: rgba(10,10,10,0.85);
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
}

#ul img {
    margin-top: 15px;
    margin-left: 10px;
    margin-right:30px;
    float: left;
    height: 23px;
}

#ul li a {
    font-family: 'Open Sans Condensed', sans-serif;
    display: block;
    color: white;
    text-align: center;
    padding: 18px 16px;
    text-decoration: none;
}

#ul li a:hover {
    color:#969696;
    text-decoration:none;
    transition:.5s;
}

/* Advertisement */

#ad {
    padding: 50px 20px;
    background-color: rgb(10,10,10);
    height: auto;
    
}

.blackh1 {
    font-family: 'Dosis', sans-serif;
    color: white;
}

/* Products */

#product-container {
    background-color: white;
    margin: 0px;
    padding: 0px;
    display:flex;
}

.cont {
    display:flex;
}

.product {
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 18px;
    margin-top: 30px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 30px;
    background-color: white;
    border-style: solid;
    border-color: #0A97DD;
    border-radius: 20px;
    border-width: 1px;
    width: 50%;
    text-align: center;
}

.h1 {
    font-family: 'Dosis', sans-serif;
    color: #000;
    text-align: center;
}

.iphoneimg {
    width: 45%;
}

.contentimg {
    width: 65%;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}

.contentimg2 {
    width: 58%;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}

.contentimg3 {
    width: 87%;
    display: block;
    margin: 0 auto;
    margin-bottom: 21px;
}

.contentimg4 {
    width: 48%;
    display: block;
    margin: 0 auto;
    margin-bottom: 22px;
}

.buy {
    background-color: rgb(61,157,233);
    border-radius: 8px;
    border-style: solid;
    border-width: 1px;
    border-color:...