Chrome extension

by Eugene Trounev

HTML

<link rel="stylesheet" href="https://appcdn2.docsie.io/js/onboarding/current/css/main.css">
<div id="root">
  <h1>
    Setup wizard
  </h1>
  <div id="main" class="d-flex flex-column">
    <div class="step-container container-fluid border-bottom">
      <div class="card-group my-3">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Getting started</h5>
            <form>
              <div class="form-group">
                <label for="exampleFormControlSelect1">1. To get started, please select a product shelf</label>
                <select class="custom-select">
                  <option value=""></option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
                </select>
              </div>
              <div class="form-group">
                <label for="exampleFormControlSelect1">2. then select tour book to update</label>
                <select class="custom-select">
                  <option value=""></option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
                </select>
              </div>
            </form>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Choose a tourguide</h5>
            <form>
              <div class="form-group">
                <label for="exampleFormControlSelect1">3. Select a flow to update</label>

                <select class="custom-select">
                  <option value=""></option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
                </select>
              </div>
              <div class="form-group">
                <label...

CSS

html {
	font-size: 12px;
}

.step-container {
	background-color: #efefef
}

.card-deck {
	overflow-x: auto;
	flex-wrap: nowrap;
	margin: 1rem 0;
	padding-bottom:1rem;
}

.card.step {
	min-width: 260px;
	max-width: 260px;
}

.card.step:first-child {
	margin-left: 0;
}

.card.step:not(:last-child) {
	margin-right: 0;
}

.card.step:last-child {
	min-width: 200px;
	max-width: 200px;
}

.card.step .btn-icon {
	border: none;
	padding: 0;
}

.card.step .card-header {
	font-size: 80%;
	
}

.card.disabled {
	opacity: 0.5;
	pointer-events: none;
}