JSFiddle - React, Tailwind, and code Playground

Fliplet Viewer 2.0 - example

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.3/css/swiper.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.3/js/swiper.min.js"></script>
<div class="splash-screen animated">
  <div class="splash-footer">
    <button type="button" class="btn btn-lg btn-primary get-started"><span class="btn-content">Get started</span></button>
  </div>
</div>

<div class="onboarding animated hidden">
  <div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">
        <div>
          <img src="https://vericampus.com/wp-content/uploads/2017/05/build-icon.png" />
          <h3>Build apps without code</h3>
          <p>Fliplet allows anyone to rapidly build apps using a drag and drop interface</p>
        </div>
      </div>
      <div class="swiper-slide">
        <div>
          <img src="http://www.solutionavenues.com/wp-content/uploads/2017/07/Cloud-and-Mobile-Solutions-Icon.png" />
          <h3>Make apps for every task</h3>
          <p>There's no additional fee for multiple apps. Empower users across your business to build the apps they want</p>
        </div>
      </div>
      <div class="swiper-slide">
        <div>
          <img src="https://www.shareicon.net/data/512x512/2016/10/12/843225_time_512x512.png" />
          <h3>Get an app live in 5 minutes</h3>
          <p>No expensive development bottlenecks. Get an app on your device in minutes</p>
        </div>
      </div>
      ...
    </div>

    <div class="footer-holder">
...

CSS

html,
body {
  height: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.btn {
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

.btn-content {
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
  display: inline-block;
}

.btn-primary {
  background: transparent;
  border: 2px solid #fff;
  border-radius: 0;
  color: #fff;
  padding: 12px 25px;
  -webkit-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:active:hover,
.btn-primary:active:focus {
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid #fff;
  color: #fff;
}

.splash-screen,
.login {
  background-image: url('https://i.imgur.com/g2syhVt.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.splash-screen .splash-footer,
.login .login-holder {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 35px 25px;
  text-align: center;
}

.onboarding {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #00abd2;
}

.onboarding .swiper-container {
  height: 100%;
  color: #fff;
}

.onboarding .swiper-wrapper {
  height: calc(100% - 110px);
}

.onboarding .swiper-slide {
  padding: 0 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.onboarding .footer-holder {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 25px 15px;
  text-align: center;
  background: #fff;
}

.onboarding .footer-holder:before {
  content: '';
  position: absolute;
  top: -20px;
  left: -10px;
  right: -10px;
  background-color: #fff;
  height: 50px;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

.swiper-pagination {
  position: relative;
}

.swiper-pagination-bullet {
  margin: 0...

JavaScript

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  init: false,
  direction: 'horizontal',
  effect: 'slide',
  grabCursor: true,
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  },
  navigation: {
    nextEl: '.swiper-button-next'
  }
});

$('.get-started').on('click', function() {
  $('.splash-screen').addClass('fadeOut');
  $('.onboarding').removeClass('hidden');
  $('.onboarding').addClass('fadeIn');
  mySwiper.init();
});


$(document).on('click', '.continue, .skip', function(event) {
  $('.onboarding').addClass('fadeOut');
  $('.login').removeClass('hidden');
  $('.login').addClass('fadeIn');
});