JSFiddle - React, Tailwind, and code Playground

HTML

<!-- navigation bar start -->
    <div class="navbar"> 
        <link rel="icon" type="image/png" href="1443409055_editor_pencil_pen_edit_write.png">
        <h2>ProJex</h2>
        <p>Makeing it Better for You</p>
            <ul>
                <li>Home</li>
                <li>Services</li>    
                <li>portfolio</li>
                <li>Our Team</li>
                <li>Blog</li>
                <li>Contact Us</li>    
            </ul>
    </div>
    
    <!-- navigation bar end -->
    <!-- slider start -->
    
    <div class="slider">
        <h1>One Page</h1>
        <h3>Is All you need</h3>
    </div>
    
    <!-- slider end -->
    <!-- What I know start -->
        <div class="container">   

        <div class="meKnow">
       
            <div class="langs">
                <h3>Html5</h3>
                <p>Russland (russ. Россия, Transskription: Rossija) oda                 Russische Fedaration (russ. Российская Федерация,                       Transskription:</p>
            </div>
            
            <div class="langs">
                <h3>CSS3</h3>
                <p>Russland (russ. Россия, Transskription: Rossija) oda                  Russische Fedaration (russ. Российская Федерация,                        Transskription: .</p>
            </div>
            
            <div class="langs">
                <h3>JavaScript</h3>
                <p>Russland (russ. Россия, Transskription: Rossija) oda                 Russische Fedaration (russ. Российская Федерация,                       Transskription: .</p>
            </div>
        </div>    
        </div>
    
    <!-- What I know end -->

CSS

body {
    margin: 0;
    padding: 0;
    
}

.container {
    margin: auto;
    width: 60%;
}

/* navigation bar start */

.navbar {
    background-color: #FF5753;
    height: 115px;
    
}


.navbar ul {
    list-style: none;
    padding: 45px 45px;
    margin-left: 700px;
    
}

.navbar ul li {
    float: left;
    margin-left: 35px;
    color: #FFFFFF;
    font-family: Trebuchet MS,sans-serif;
    font-weight: 800;
    font-size: 15px;
}

.navbar h2 {
    font-family: monospace;
    float: left;
    color: #ffffff;
    padding: 4px 45px;
    font-size: 32px;
    margin-left: 120px;
    
}

.navbar p {
    display: block;
    float: left;
    margin-top: 62px;
    margin-left: -220px;
    color: #fff;
    font-family: monospace;
}

/* navigation bar end */

/* slider bar start */
.slider {
    text-align: center;
    overflow: hidden;
}

.slider h1 {
    color: #FF5753;
    border-bottom: 1px solid #FF5753;
    border-top: 1px solid #FF5753;
    text-transform: uppercase;
    font-family: Trebuchet MS,serif;
    font-size: 80px;
    margin-top: 10px;
} 

.slider h3 {
    color: #FF5753;
    text-transform: uppercase;
    font-family: Trebuchet MS,serif;
    font-size: 16px;
    margin-top: -50px;
} 




/* slider bar end */
/* What I know start */
.meKnow div {
    width: 30%;
    float: left;
    text-align: center;
    overflow: hidden;
    
}

.meKnow .langs {
    border: 2px solid #FF5753;
    margin: 0 5px;
    border-radius: 5px;
}

.meKnow .langs h3 {
    color: #fff;
    background-color: #FF5753;
    font-family: Trebuchet MS;
    margin-top: 0;
    padding: 5px 5px ;
}

.meKnow .langs p {
    padding: 5px 10px
}


/* What I know end */