JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.js"></script>
<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<div class="navbar-fixed">
    <nav>
    <div class="nav-wrapper">
      <a href="index.html" class="brand-logo center">Recanto Canuto</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="index.html">Home</a></li>
        <li><a href="#estrutura">Estrutura</a></li>
        <li><a href="#servicos">Serviços</a></li>
        <li><a href="mobile.html">Mobile</a></li>
      </ul>
      <ul class="side-nav" id="mobile-demo">
        <li><a href="index.html">Home</a></li>
        <li><a href="#estrutura">Estrutura</a></li>
        <li><a href="#servicos">Serviços</a></li>
        <li><a href="mobile.html">Mobile</a></li>
      </ul>
    </div>
  </nav>
   </div>
    
          <!--Slides com as fotos -->
  <div id="intro" class="section scrollspy">

  <div class="slider">
    <ul class="slides">
      <li>
        <img src="http://3.bp.blogspot.com/-XANwq8Lfs3Y/Tg5owyTsXII/AAAAAAAAAAs/0w3j13_dgKc/s320/canuto008.JPG"> <!-- random image -->
        <div class="caption center-align">
          <h3>Lazer a seu alcance.</h3>
          <h5 class="light grey-text text-lighten-3">Espaço pensado e estruturado para o seu lazer.</h5>
        </div>
      </li>
      <li>
        <img src="http://3.bp.blogspot.com/-qDPl2uKfaBM/Tg5oyc6wyJI/AAAAAAAAAAw/-NBJxGcYTb0/s320/canuto009.JPG"> <!-- random image -->
        <div class="caption left-align">
          <h3>Alojamentos Espaçosos</h3>
          <h5 class="light grey-text text-lighten-3">Descanse e desfrute de todo o espaço com...

CSS

/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */
.body {
	background-image: url("http://www.filoinfo.net/sites/default/files/natureza.jpg") !important;
}
.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
	font-size: inherit;
}

#intro {

    padding-bottom: 1rem !important;
}
.navbar-fixed {
	    height: 70px !important;
}

/* Slides de fotos */
.slider .indicators .indicator-item {
  background-color: #666666;
  border: 3px solid #ffffff;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.slider .indicators .indicator-item.active {
  background-color: #ffffff;
}
.slider {
  width: 100%;
	min-height: 90% !important;
  margin: 0 auto;
}
.slider .indicators {
  bottom: 60px;
  z-index: 100;
  /* text-align: left; */
}

.mdi-navigation-close:before {
    content: "\e8aa" !important;
}

.section .scrollspy{

	margin:1.78rem 0 1.424rem 0  !important;
}
/* */

JavaScript

$(function(){

    $('.button-collapse').sideNav();
    
    //inicio Script dos slide
    $(document).ready(function(){
      $('.slider').slider();
  });