JSFiddle - React, Tailwind, and code Playground

by ewerlast

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <title>second</title>
</head>
<body>
<!--***************Container Fluid***************-->
    
   <div class="wrapper container-fluid">
      
<!--************HEADER*****************-->
            
        <header class="header">
           
<!--        nav            -->
                  
            <nav class="nav_background">
             <div class="container wrapper_nav">
                 <div class="row nav">
                  <div class="logo_black_sea col-md-4">
                      <p>Black Sea</p>
                    </div>
                    
                  <div class="col-md-8 navigation">
                      <div class="navigation_list"><a href="#">HOME</a></div>
                      <div class="navigation_list"><a href="#">ABOUT ME</a></div>
                      <div class="navigation_list"><a href="#">PORTFOLIO</a></div>
                      <div class="navigation_list"><a href="#">CONTACTME</a></div>
                 </div>
              </div>
             </div>
             </nav>
    <!--     slider   --->
               <div class="slider__background">
                   <div class="container slider_container">
                       <h1>WE NEED THE TONIC OF<br>
                       WILDNESS
                       </h1>
                        <a href="#" class="slider_button">Read More</a>
                   </div>
            </div>       
                <div class="slider__text">
                    <h2 class="slider__text__h2">At the same  time  that wea are  earnest to ...

CSS

/******** IMPORT  ***********/
@import url('https://fonts.googleapis.com/css2?family=Galada&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
/********* WRAPPER *************/
.wrapper{
    max-height: 1500px;
}


/********    HEADER   **********/
.header{
    min-height: 600px;
}

/*--    nav: ---*/

.nav_background{
    
    background-color: #4d99a5;
    min-height:100px; 
}

.logo_black_sea{
    display: flex;
    justify-content: center;
    margin-top: 2%;
    
}

.logo_black_sea p{
    
    font-size: 3em;
    font-family: 'Galada', cursive;
    color: #ffff;
}

.navigation {
    display: flex;
    justify-content: space-around;
    align-items: center;
    
}

.navigation a{
    display: block;
    padding: 10px;
    text-decoration: none;
    font-size: 1.5em;
    font-family: 'Playfair Display', serif;
    color: #ffff;
    transition: all 0.3s;
}
.navigation .navigation_list{
  
    border-right: 3px solid #24375B;
    padding-right: 20px;
}

.navigation .navigation_list:last-child{
    border-right: 3px solid #4d99a5
}

.navigation a:hover{
    background-color:#7dcbd8;
}

/*--------   slider  -----------*/

.slider__background{
   min-height:  500px;
    background-image: url(../images/slider_background.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.slider_container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.slider_container h1{
    margin-top: 10%;
    text-align: center;
    color: #ffff;
    font-size: 3.5em;
    font-family: 'Playfair Display', serif;
}
.slider_container a{
    display: block;
    text-decoration: none;
    margin-top: 5%;
    width: 228px;
    height: 53px;
    border: 2px solid #ffff;
    border-radius: 10px;
    color: #ffff;
    font-family: 'Playfair Display', serif;
    font-size: 1.5em;
    text-align: center;
    padding-top: 5px;
    transition: all...