JSFiddle - React, Tailwind, and code Playground

by Ercan Cicek

HTML

<div id="head-wrapper">
  <div id="head-top-wrapper">
    <div id="menu-circle">
      <span>P</span>
    </div>
    <svg width="960" height="66" viewBox="0 0 960 66" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 66V0H960C924.187 8.5599 884.058 12.5 849.855 16C815.652 19.5 798.679 20.3329 765.797 22C712.224 24.716 682.899 24.3511 628.406 24.3511C573.913 24.3511 544.969 22.6118 492.174 28.5C456.727 32.4533 437.547 38.2948 402.319 43.5C334.15 53.5723 295.607 58.2253 226.667 63C206.087 64.4253 14.4928 65 0 66Z" fill="#EBFAF8" />
    </svg>
  </div>
  <div id="head-bottom-wrapper">
    <div id="progress-wrapper">
      <div id="progressbar-container">
        <div id="progressbar-fill"></div>
      </div>
      <button id="fab" onClick="nextPage()">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
          <path d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z" /></svg>
      </button>
    </div>
  </div>
</div>
<div id="main-wrapper">
  <div id="item-label">What words describe your general feeling during the past week best?</div>
  <div id="decorative"><svg width="265" height="262" viewBox="0 0 265 262" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_2_1061)">
        <path d="M24.6506 185.115C19.4317 184.963 17.2603 185.011 12.0898 185.712C8.08987 186.253 4.15573 186.229 2.15057 189.646C0.730681 192.062 0.218135 195.551 0.173114 198.833C-0.0831585 216.748 0.00688212 218.505 0.00688212 218.505C0.183503 224.662 0.848429 230.808 0.77224 236.969C0.717338 240.039 1.04185 243.105 1.73846 246.097C2.48303 249.224 2.58693 251.695 5.48904 252.965C7.42148 253.81 9.58595 253.959 11.7019 254.073C21.5096 254.601 34.2574 254.666 44.0685 254.183C47.5524 254.011 51.6078 253.445 53.3359 250.487C54.122 249.141 54.2502 247.536 54.3402...

SCSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  > #head-wrapper {
    position: relative;
    width: 100%;
    height: 138px;
    background-color: #F5FDFD;
    border-bottom: 1px solid #EBEBEB;
    > #head-top-wrapper {
      width: 100%;
      height: 66px;
      > #menu-circle {
        position: absolute;
        left: 24px;
        top: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        background-color: #EA7B7D;
        border-radius: 50%;
        > span {
          font-family: 'Poppins', sans-serif;
          font-style: normal;
          font-weight: 400;
          font-size: 18px;
          line-height: 18px;
          color: #F5FDFD;
        }
      }
    }
    > #head-bottom-wrapper {
      width: 100%;
      height: 72px;
      display: flex;
      justify-content: center;
      align-items: center;
      > #progress-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 500px;
        height: 100%;
        padding: 8px;
        > #progressbar-container {
          width: calc(100% - 72px);
          height: 12px;
          border-radius: 6px;
          background-color: #EBEBEB;
          > #progressbar-fill {
            width: 66%;
            height: 12px;
            border-radius: 6px;
            background-color: #F1A7A8;
            transition: width 0.3s ease-in;
          }
        }
        > button {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background-color: #EBEBEB;
          box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
          outline: none;
          border: none;
         ...

JavaScript

var activeBtnsArr = [];

function toggleBtn(btnId) {
  if(activeBtnsArr.indexOf(btnId) != -1) {
  	activeBtnsArr.splice(activeBtnsArr.indexOf(btnId), 1);
    $("#selectables-wrapper > #" + btnId).css({ display: "block" });
    $("#choices > #" + btnId).css({ display: "none" });
  } else {
  	activeBtnsArr.push(btnId);
    $("#selectables-wrapper > #" + btnId).css({ display: "none" });
    $("#choices > #" + btnId).css({ display: "block" });
  }
  if(activeBtnsArr.length > 0) {
  	$("#fab").css({ backgroundColor: "#2A729D" });
  	$("#fab > svg").css({ fill: "#ffffff" });
  } else {
  	$("#fab").css({ backgroundColor: "#EBEBEB" });
  	$("#fab > svg").css({ fill: "rgba(11, 16, 53, 0.35)" });
  }
}

function nextPage() {
  if(activeBtnsArr.length > 0) {
		$("#choices-container, #selectables-wrapper").css({ display: "none" });
    $("#progressbar-fill").css({ width: "100%" });
    $("#item-label").text("That's it. Thanks!");
  	$("#fab").css({ backgroundColor: "#EBEBEB" });
  	$("#fab > svg").css({ fill: "rgba(11, 16, 53, 0.35)" });
    $("#fab").html('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"/></svg>');
  	$("#decorative").css({ display: "block" });
  }
}