JSFiddle - React, Tailwind, and code Playground

by Sreemaan_KCKS

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Para</title>
  </head>
 <body>
    <div class="parallax1" id="section1">
        <a class="anchor" href="#section2">Section 1</a>
    </div>
    <div class="content">
      <h1>Parallax Effect</h1>
      <h3>Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight and is measured by the angle or semi-angle of inclination between those two lines.</h3>
      <h1>Floating Button</h1>
      <h3>
        Image result for floating button
        A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center.</h3>
      <h1>Smooth Scroll</h1>
      <h3>The smooth Scrolling feature for web pages allows the user to scroll smoothly while navigating across a webpage. This feature came into wide use because the normal scrolling is choppy and annoying for a lot of users who have to read long pages on the web.</h3>
    </div>
    <div class="parallax2" id="section2">
        <a class="anchor" href="#section1">Section 2</a>
    </div>
    <div class="floating-wrapper">
        <input id="floatingCheckbox" type="checkbox" class="floating-checkbox" />
        <label class="floating" for="floatingCheckbox">
            <div class="circle-icon"></div>
        </label>
        <div class="floating-wheel">
          <a class="floating-action floating-action-1">
            <p>!</p>
          </a>
          <a class="floating-action floating-action-2">
            <p>@</p>
          </a>
          <a class="floating-action floating-action-3">
            <p>#</p>
          </a>
          <a class="floating-action floating-action-4">
            <p>&</p>
          </a>
        </div>
    </div>
    <footer>
      <h4>Parallax, Floating button and Smooth Scroll in one page</h4> <br/>
      <h4>Author: Sreemaan<h4>
   ...

CSS

body  {
    margin: 0;
}
html {
  scroll-behavior: smooth;
}
#section1 {
    display: flex;
    justify-content: center;
    padding-top: 50px;
}

#section2 {
    display: flex;
    justify-content: center;
    padding-top: 50px;
}
.anchor{    
    max-width: 300px;
    width: 100%;
    padding: 10px;
    text-decoration: none;
    cursor: pointer;
    height: 42px;
    text-align: center;
    border: 1px solid rgb(234, 232, 235);
    border-radius: 12px;
    color: white;
    font-size: 2.2rem;
    box-shadow: 0px 5px 20px #81a4f1;
}
.parallax1 {
   background: url("https://enviragallery.com/wp-content/uploads/2019/02/adults-backlit-beach-950047.jpg");
   height: 100vh;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
}

.parallax2{
    background-image: url("https://www.pixelstalk.net/wp-content/uploads/wallpapers/Building-Bridge-Sea-Fullscreen-HD-Wallpaper.jpg");
    position: relative;
    height: 800px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}
.content{
  padding: 4rem 0 1rem;
  background: linear-gradient(109.6deg, #91EAE4 11.2%,#86A8E7 100.2%);
  cursor: default;
}
h1{
    display: flex;
    justify-content: center;
    margin: 0 auto 30px;
    border: 2px solid white;
    border-radius: 25px;
    max-width: 300px;
    color: white;
    background: linear-gradient(109.6deg, rgb(255, 78, 80) 11.2%, rgb(249, 212, 35) 100.2%);
    padding: 1rem;
}
h3{
    max-width: 500px;
    margin: 0 auto 40px;
    text-align: center;
    letter-spacing: 1px;
    color: #4f3267;
}
h4{
  margin: 0;
  text-align: center;
}
footer{
  background: rgb(246, 239, 246);
  padding: 3rem;
}
.floating-wrapper {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
}
.floating {
  position: absolute;
  bottom: -1rem;
  right: -1rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: #126ee2;
  box-shadow: 0px...