JSFiddle - React, Tailwind, and code Playground

Onboarding UI - on page

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.0/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.0/css/swiper.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">

      <div class="onboarding-holder">
        <div class="onboarding-content">
          <div class="ob-top-nav">
            <div class="ob-skip"><span>Skip</span></div>
          </div>
          <div class="swiper-container">
            <div class="swiper-wrapper animated">
              <div class="swiper-slide">
                <img src="https://s-media-cache-ak0.pinimg.com/originals/a5/ee/b3/a5eeb3f3061d81478eb7bbc43dc99669.jpg" />
                <h1>Slide 1</h1>
                <p>Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor.</p>
              </div>
              <div class="swiper-slide">
                <img src="https://pbs.twimg.com/profile_images/553572195390091265/IeHWVVMX.png" />
                <h1>Slide 1</h1>
                <p>Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere...

CSS

/* DO NOT USE THIS */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
html,
body {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* END OF DO NOT USE THIS */

img {
  max-width: 100%;
  height: auto;
}


/* Buttons */

.btn-primary {
  display: block;
  clear: both;
  width: 100%;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border: none;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
}

.btn-secondary {
  display: block;
  clear: both;
  width: 100%;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border: none;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
}

.btn-primary:focus,
.btn-primary:hover,
.btn-secondary:focus,
.btn-secondary:hover,
.btn:active:focus {
  outline: none;
}

.btn-danger {
  display: block;
  clear: both;
  width: 100%;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border: none;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
}

.btn-danger:active,
.btn-danger:active:focus,
.btn-danger:active:hover,
.btn-danger:focus,
.btn-danger:hover {
  color: #FFF;
  background-color: #c9302c;
  border-color: #c9302c;
  outline: none;
}


/* ONBOARDING */

.onboarding-holder {
  position: relative;
}

.onboarding-content {
  position: relative;
  background-color: #FFFFFF;
}


.ob-top-nav {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background-color: #FFFFFF;
  line-height: 34px;
  padding: 5px 15px;
  z-index: 2;
}

.ob-top-nav .ob-skip {
  color: #777777;
  font-size: 1em;
  text-align: right;
}

.ob-top-nav .ob-skip span {
  cursor: pointer;
  padding: 5px 0;
}

.ob-bottom-nav {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #FFFFFF;
  color: #777777;
  font-size: 1em;
  line-height: 34px;
  padding: 5px 15px;
  z-index: 5;
 ...

JavaScript

var swiper = new Swiper('.swiper-container', {
  direction: 'horizontal',
  loop: false,
  autoHeight: true,

	pagination: '.swiper-pagination',
  paginationClickable: true,
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  grabCursor: true
});