JSFiddle - React, Tailwind, and code Playground

by andyjh07

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">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <title>Document</title>


  </head>

  <body style="overflow:hidden">
    <div class="container" style="height: 100vh; overflow-y:scroll; scroll-snap-type: y mandatory;">
      <!-- Intro ---------------------------->
      <div class="row scroll-snap">
        <div class="col-6 booking-left min-vh-100 d-flex align-items-center justify-content-center">
          <div class=" ">
            <div class="div">
              <img src="/img/tbw-logo.svg" style="width: 50%" alt="" class="pb-5 margin-auto">
              <h1 class="display-5">Welcome Nicola!</h1>
              <p class="text-muted">Let's get your wedding booked in.</p>
              <a href="#step-1" class="btn gradient-primary text-white">Start</a>
            </div>

          </div>

        </div>
        <div class="col-6 booking-right gradient-primary-lr min-vh-100">

        </div>
      </div>

      <!-- Step 1 - Your Details ---------------------------->
      <div class="row scroll-snap" id="step-1">
        <div class="col-6 booking-left min-vh-100 d-flex align-items-center justify-content-center">
          <div...

CSS

.package-select:hover {
    background: #ddc190 !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
    color: white;
    cursor: pointer;
}

.contract-full-screen {
    padding: 20px;
    overflow: hidden;
    }

.scroll-snap {
    scroll-snap-align: center;
}


.gradient-primary {
    background: rgb(212, 204, 191);
    background: linear-gradient(129deg, rgba(212,204,191,1) 7%, rgba(221,193,144,1) 100%);

}

.gradient-primary-lr {
background: rgb(221, 193, 144);
background: linear-gradient(270deg, rgba(221, 193, 144, 1) 0%, rgba(221, 205, 178, 1) 100%);
}

.gradient-secondary {
background: rgb(177, 189, 190);
background: linear-gradient(129deg, rgba(177, 189, 190, 1) 13%, rgba(63, 128, 131, 1) 100%);
}

.gradient-warning {
    background: rgb(203, 118, 118);
    background: linear-gradient(129deg, rgba(203, 118, 118, 1) 0%, rgba(147, 48, 48, 1) 100%);
}

.gradient-blue {
    background: rgb(76, 117, 157);
    background: linear-gradient(90deg, rgba(76, 117, 157, 1) 0%, rgba(39, 67, 111, 1) 100%);
}

.brand1 {
    color: #ddc190;
}