JSFiddle - React, Tailwind, and code Playground

by SKAIT

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.min.css">
  </head>

  <body>
    <header>
      <nav>
        <div class="container">


          <ul class="ull">
            <li class="ull_item"><a href="" class="ull_lind">главная</a></li>
            <li class="ull_item"><a href="" class="ull_lind">блог</a></li>
            <li class="ull_item"><a href="" class="ull_lind">о нас</a></li>
            <li class="ull_item"><a href="" class="ull_lind">за вас</a></li>
            <li class="ull_item"><a href="" class="ull_lind">за кем?</a></li>
          </ul>
        </div>
      </nav>
    </header>
  </body>

</html>

SASS

*
	box-sizing: border-box
	margin: 0
	padding: 0

header
	position: relative
	min-height: 50px

.container
	width: 1440px
	margin: 0 auto
nav
	position: fixed
	background-color: #000000
	width: 100%
	min-height: 50px
	z-index: 2
.ull
	
	display: flex
	justify-content: space-between
	padding: 13px 170px
	list-style-type: none
	&_item
		
		position: relative
		padding: 0 70px
		
			
	&_lind
		text-decoration: none
		color: #8eb688
		font-size: 23px
		font-weight: 400
		
				
		&:after
			
			content: ''
			width: 3px
			height: 27px
			position: absolute
			left: 100%
			background-color: #222222
		&:last-child
			&:after
				width: 3px
			
			
		&:hover
			color: #a4ff98