JSFiddle - React, Tailwind, and code Playground

by saturn721

HTML

<body>
<!-- preloader -->
 <div id="page-preloader"><i class="spinner fa fa-spin fa-refresh"></i>
 </div>
  <!-- begin container header -->
  <div class="header" id="header">
        <nav class="navbar navbar-inverse navbar-fixed-top">
              <div class="container">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>                        
                  </button>
                  <a style="opacity: .5" class="navbar-brand" title="Резюме" href="http://ekaterinburg.hh.ru/resume/b3dec478ff0391bc880039ed1f44466443426b" target="_blank"><i class="fa fa-envira" aria-hidden="true"></i></a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                  <ul class="nav navbar-nav">
                    <li><a href="#header" title="Вверх"><small><i class="fa fa-arrow-up" aria-hidden="true"></i></small></a></li>
                    <li class="divider"></li>
                    <li><a href="#about" title="Кто мы"><small><i class="fa fa-user-o" aria-hidden="true"></i></small></a></li>
                    <li class="divider"></li>
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="Тексты"><i class="fa fa-file-text-o" aria-hidden="true"></i><span class="caret"></span><small></small></a>
                    <ul role="menu" class="dropdown-menu">
                      <li><a href="plazma.html" target="_blank">Плазма</a></li>
                      <li class="divider"></li>
                      <li><a href="laser.html" target="_blank">Лазер</a></li>
                      <li class="divider"></li>
                      <li><a href="#" target="_blank">Page 1-3</a></li>
                    </ul> 
                    </li>
...

CSS

@import url('https://fonts.googleapis.com/css?family=Exo+2|Playfair+Display')
$exo-2: 'Exo 2', serif
$playfair-display: 'Playfair Display', sans-serif

body
    font-family: $exo-2
    line-height: 1.7
    //min-width: 100%
    padding-top: 52px
    background-color: #C7BA91
    background-image: url("../img/girls1.jpeg")
    background-repeat: no-repeat
    //background-position: 
    margin: 0
    padding: 0
    background-size: 100% auto
    width: auto
    backface-visibility: hidden


#page-preloader
    position: fixed
    left: 0
    top: 0
    right: 0
    bottom: 0
    background: #fff
    opacity: 0.7
    z-index: 1001
#page-preloader i
    font-size: 70px
    position: absolute
    left: 50%
    top: 50%
    margin: -35px 0 0 -35px

// css preloader finish
.navbar
    margin-bottom: 0
    border-radius: 0
    opacity: .8
    
.divider
    height: 1px
    margin: 9px 0 
    overflow: hidden
    background-color: #222222
    box-shadow: 0px 0px .5px grey
.form-control
    border-radius: 16px
.btn-basic
    border-radius: 16px

// navbar css finish
.jumbotron
    margin: 0 0 0
    background: transparent
    color: #DDDDDD
    text-align: left
    overflow: hidden
    padding-left: 15px!important
    //line-height: 0px
.jumbotron h3, h1 

    text-shadow: 0 0 2px white, 0 0 4px black, 0 0 7px #417CBB, 0 0 10px #417CBB

.content
    
    background-color: #BFBFBF
    

.intro
    color: #DDDDDD
    margin-left: 0px
    padding-left: 0px
    text-shadow: 0 2px 2px black
    font-size: 16px
    text-align: justify
    font-family: $playfair-display
    line-height: 24px
.bodier
    width: 100%

.text-info
    text-shadow: 0 0 0 !important
    text-align: left!important
    font-size: 19.5px
.main
    //margin: 15px
    margin-top: 11%
    //border: solid 6px red
.main 
    div 
        @for $i from 1 through 4
            &:nth-child(#{$i})
                overflow: hidden
                height: 400px
                border-radius: 6px
               ...

JavaScript

(function() {

  $(document).ready(function() {
    $(".line").hover(function() {
      $(this).siblings().css({opacity: '0.7',});
    }, function() {
      return $(this).siblings().css({
        opacity: '1'
      });
    });
  });

}).call(this);