JSFiddle - React, Tailwind, and code Playground

by first web

HTML

<div class='Header'>
            
            <div class='Head-img'>
        
            <div class='head-text'>
            
                 <h1 class='head-text-h1'>
                
                     Web &amp; Graphic Designer
                
                </h1>
                
            </div>
            
            <div class='learn-more'>
                
                    <h2 class='learn-more-h2'>
                
                     learn more
                
                </h2>
                
                </div>
            
        </div>
            
            <div class='nevbar'>
                
                <h2 class='Head-first'> H head </h2>
                
                <ul class='ul-first'>
                        
                    <li><a href="#" class="home-first">Home</a></li>
                        
                    <li><a href="#" class="list-Head">About Us</a></li>
                        
                    <li><a href="#" class="list-Head">Skills</a></li>
                        
                    <li><a href="#" class="list-Head">Resume</a></li>
                        
                    <li><a href="#" class="list-Head">Testemonials</a></li>
                        
                    <li><a href="#" class="list-Head">Portofolio</a></li>
                        
                    <li><a href="#" class="list-Head">Contact Me</a></li>
                        
                </ul>
                
            </div>
        
        </div>
        
        <div class='body'>
            
            <div class='under-Head'>
                
                <div class='Values'>

                    <h2>Values</h2>

                    <p class='para'>Lorem ipsum dolor sit amet, ea doming until epicuri iudicabit nam, te usu virtute placerat. Purto brute disputando cu est.</p>

                </div>

                <div class='Goals'>

                    <h2>Goals</h2>

                   ...

CSS

body

{
    
    margin: 0;
    padding: 0;

    
}

.Head-img

{
    
    background-image: url('http://store2.up-00.com/2016-06/1466781508051.jpg');
    background-size:cover; /* منقول */
    height:600px;
    margin: 0px;
    padding: 0px;
    
}

.head-text

{
    
    padding-top:200px;
    text-align: center;
    color: white
    
}

.head-text-h1

{
    
    margin: auto;
    font-size: 50px;
    border-top:3px solid #fff;
    border-bottom:3px solid #fff;
    width:600px;
    padding: 5px;

    
}

.learn-more

{
    
    margin: 20px;
    color:white
    
}

.learn-more-h2 

{
    
    padding: 5px;
    border:3px solid #fff;
    text-align: center;
    margin: auto;
    width:15%;
    cursor: pointer;
    font-family: "Comic Sans MS", cursive, sans-serif
}

.nevbar

{
    
    background-color:#252F31;
    color:white;
    padding: 6px;
    max-height: 71px;
    padding-left: 40px
    
}

.Head-first:first-letter

{
    
    color:white;
    font-size:25px
    
}

.Head-first

{
    
    color:#2ECC71;
    font-size:20px;
    
}

.Header .nevbar ul

{
    
    list-style:none;
    padding-left:0;
    overflow:hidden;
    float:right;
        
}

.Header .nevbar ul li

{
    
    display: inline; 
    float:left;
    padding:10px
}

.Header .nevbar ul li a

{
    
    color:#FFF;
    text-decoration:none
    
}

.Header .nevbar h2

{
    
   display:inline-block;
    
}

.home-first

{
    
    color:#30B576 !important ; 

}

.list-Head:hover

{
    
    color:#30B576 !important ; 
    
}

.under-Head

{
    

    background-color:white;
    width: 1260px;
    margin: auto;
    height:213px;
    overflow: hidden
    
}

.Values,.Goals,.Hobbies

{
    
    width:350px;
    padding: 10px;
    margin: 10px;
    float:left
    
    
}

.Values

{
    
    padding-left: 61px;

}

.body

{
    
    color:#777;
    
}

.about-me

{
    
    background-color: #F2F2F2;
    width:auto;
    height: 500px
    
}

.about-me

{

    overflow: hidden

}

.image-me

{
 ...