JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<!--***************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 explore <br>
        &#38 learn all things
      </h2>
      <div class="slider__text__p">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis dignissimos inventore cum amet consequatur deleniti iste sed eos aut dolore.
      </div>

      <div class="slider_icons container">
        <a href="#" class="slider_icons_button"><img src="images/slider_text_basket.png" alt=""></a>

        <a href="#" class="slider_icons_button"><img src="images/slider_text_world.png" alt=""></a>

        <a href="#" class="slider_icons_button"><img src="images/slider_text_bag.png" alt=""></a>
      </div>
    </div>





  </header>

  <!--******************** PORTFOLIO *****************-->

  <div class="portfolio_backgroud">
    <div class="container portfolio">
      <div class="portfolio_icon">
        <img...

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: inline-block;
    padding: 10px;
    text-decoration: none;
    font-size: 1.5em;
    font-family: 'Playfair Display', serif;
    color: #ffff;
    transition: all 0.3s;
}
.navigation a:after {
  margin-left: 20px;
  display: inline-block;
  height: 20px;
  width: 3px;
  content: '';
  background: #24375B;
  transform: rotate(45deg);
}

.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...