JSFiddle - React, Tailwind, and code Playground

HTML

<!-- front page start -->
    <div class="slider">
    <!-- navigation bar start -->
    <div class="navbar">
        <div class="container">
        <h2>Jewelery</h2>
        <ul>
            <li>Home</li>
            <li>News</li>
            <li>Work</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
        </div>    
    </div>
        <!-- navigation bar end -->
        <div class="container">
        <h4>Creating realistic</h4>
            <h1>WorkShop Unique Decoration</h1>
            <button>Learn more</button>
            <button>Choose decoration</button>
        </div>
    </div>
    
    <!-- front page end -->
    
    
    
    
    <!-- history start -->
    <div class="container">
    <div class="div1">
        
        <div>
            <h1>Our intersting History</h1>
        </div>
            
        <div>
            <p>The Islamic holy books are the records which most Muslims believe were dictated by God to various prophets. Muslims believe that parts of the previously revealed scriptures, the Tawrat (Torah) and the Injil (Gospels), had become distorted—either in interpretation, in text, or both.[5] The Qur'an (literally, "Reading" or "Recitation") is viewed by Muslims as the final revelation and literal word of God and is widely regarded as the finest literary work in the Arabic language
            by Muslims as the final revelation and literal word of God and is widely regarded as the finest literary work in the Arabic languag
            by Muslims as the final revelation and literal word of God              </p>
                
            
            <p> The Islamic holy books are the records which most Muslims believe were dictated by God to various prophets. Muslims believe that parts of the previously revealed scriptures, the Tawrat (Torah) and the Injil (Gospels), had become distorted—either in interpretation, in text, or both.[5] The Qur'an (literally, "Reading" or "Recitation") is viewed by Muslims as...

CSS

body {
    margin: 0;
    padding: 0;
    height: 10000px;
}
 
.container {
    margin: auto;
    width: 70%;
    clear: both;
}
 
.navbar {
    background-color: #071733;
    height: 100px;
    width: 100%;
    border-bottom: 1px solid #fff;
}
 
 
.navbar h2 {
    color: #fff;
    display: inline-block;
    float: left;
    margin-top: 30px;
    font-size: 30px;
    font-family: monospace;
}
 
 
.navbar ul {
    list-style: none;
    color: #fff;
    float: right;
}
 
.navbar ul li {
    display: inline-block;
    padding-right: 30px;
    margin-top: 20px;
    font-family: Trebuchet MS;
    font-weight: bold;
}

/* navigation bar end */

/* Slider start */
.slider {
    background-image: url(slider.jpg);
    height: 600px;
}

.slider h4 {
    font-family: Trebuchet MS;
    color: #fff;
    font-size: 30px;
}

.slider h1 {
    font-family: Trebuchet MS;
    color: #fff;
    font-size: 60px;
    text-transform: uppercase;
    max-width: 800px;
}

.slider button {
    padding: 10px 30px ;
    font-family: Trebuchet MS;
    font-weight: bold;
    background: none;
    font-size: 20px;
    color: #fff;
    margin: 0 10px;
    border: 2px solid;
    
    
}

/* Slider end */


/* history start */

.div1 {
    width: 1000px;
    height: 600px;
}

.div1  div {
    float: left;
    width: 50%;
}


.div1  div h1 {
   
    color: #0B203F;
    font-size: 50px;
    text-transform: uppercase;
    font-family: Arial,serif;
    max-width: 400px;
    padding-top: 200px;
}


.div1  div p {
    padding-top: 60px;
    color: #143046;
    font-family: Trebuchet MS;
    line-height: 25px;
}

/* How does it work start */
.howToWork {
    background-color: #071733;
    padding: 8px;
}
.howToWork p {
    text-align: center;
    font-family: Trebuchet MS;
    color: #fff;
    font-size: 15px;
}

.howToWork p span {
    font-size: 30px;
    font-weight: bold;
    padding-top: 20px;
}


/* how does it work end */


/* Services start */

.services {
    margin: 100px;
    clear:...