Add tabs for user edit profile (html/css)

Tabs (html css)

html section (erb)
==================

<div class="wrapper">
  <h3 class='text-center mt-3 mb-4'><%= t('.edit_profile') %></h3>
  <input type="radio" name="slider" checked id="home">
  <input type="radio" name="slider" id="code">
  <input type="radio" name="slider" id="about">
  <nav class='mx-auto mb-4'>
    <!-- Icon and name Tab 1 ('Main') -->
    <label for="home" class="home"><i class="fas fa-user-lock"></i>Main</label>
    <!-- Icon and name Tab 2 ('Avatar') -->
    <label for="code" class="code"><i class="fas fa-user-circle"></i>Avatar</label>
    <!-- Icon and name Tab 3 ('More') -->
    <label for="about" class="about"><i class="fas fa-user-tag"></i>More</label>
    <div class="slider"></div>
  </nav>
  <section>
    <!-- Tab 1 -->
    <div class="content content-1">
      .. content tab 1 (open by default) ..
    </div>
    <!-- Tab 2 -->
    <div class="content content-2">
      .. content tab 2 ..
    </div>
    <!-- Tab 3 -->
    <div class="content content-3">
      .. content tab 3 ..
    </div>
  </section>
</div>

2) css section
==============

// Tabs
.wrapper{
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  padding: 25px 30px 30px 30px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper header{
  font-size: 30px;
  font-weight: 600;
  padding-bottom: 20px;
}
.wrapper nav{
  position: relative;
  width: 80%;
  height: 50px;
  display: flex;
  align-items: center;
}
.wrapper nav label{
  display: block;
  height: 100%;
  width: 100%;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  // color text/icon (bootstrap)
  color: #0D6EFD;
  // color: #17a2b8;
  font-size: 17px;
  border-radius: 5px;
  margin: 0 5px;
  transition: all 0.3s ease;
}
.wrapper nav label:hover{
  // background hover color (bootstrap)
  background: rgba(13,110,263,0.4);
  // background: rgba(23,162,184,0.3);
}

#home:checked ~ nav label.home,
#code:checked ~ nav label.code,
#about:checked ~ nav label.about {
  // color selected tab text (bootstarp) 
  color: #fff;
}
nav label i{
  padding-right: 7px;
}
nav .slider{
  position: absolute;
  height: 100%;
  width: 33%;
  left: 0;
  bottom: 0;
  z-index: 0;
  border-radius: 5px;
  // slider background color (bootsrap)
  background: #0D6EFD;
  // background: #17a2b8;
  transition: all 0.3s ease;
}
input[type="radio"]{
  display: none;
}
#code:checked ~ nav .slider{
  // offset for slider (4 tabs: 25%, 50%, 75%; 5 tabs: 20%, 40%, 60%, 80%)
  // second position slider
  left: 33%;
}
#about:checked ~ nav .slider{
  // last position slider
  left: 66%;
}
section .content{
  // for tabs 2+
  display: none;
  background: #fff;
}

#home:checked ~ section .content-1,
#code:checked ~ section .content-2,
#about:checked ~ section .content-3{
  // show tab after checked 
  display: block;
}
section .content .title{
  font-size: 21px;
  font-weight: 500;
  margin: 30px 0 10px 0;
}
section .content p{
text-align: justify;
}



PS. Sample erb
==============
app/views/devise/registrations/edit.html.erb
---------------------------------------------

<div class="mx-auto mt-4 edit-user">
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
  <%= render partial: 'devise/shared/error_messages', resource: resource %>

  <div class="wrapper">
    <h3 class='text-center mt-3 mb-4'><%= t('.edit_profile') %></h3>
    <input type="radio" name="slider" checked id="home">
    <input type="radio" name="slider" id="code">
    <input type="radio" name="slider" id="about">
    <nav class='mx-auto mb-4'>
      <label for="home" class="home"><i class="fas fa-user-lock"></i>Main</label>
      <label for="code" class="code"><i class="fas fa-user-circle"></i>Avatar</label>
      <label for="about" class="about"><i class="fas fa-user-tag"></i>More</label>
      <div class="slider"></div>
    </nav>
    <section>
      <!-- Tab 1 -->
      <div class="content content-1">
        <div class="form-group mt-3">
          <%= f.label :email %>
          <%= f.email_field :email, autofocus: false, class: 'form-control', placeholder: "Email Address" %>
        </div>
        <div class="form-group mt-3">
          <%= f.label :username %>
          <%= f.text_field :username, autofocus: false, class: 'form-control', placeholder: "Username" %>
        </div>
        <div class='mt-4'>
          <%= f.select :language, options_for_select([['English', 'en'], ['Russian', 'ru']], @user.language),  {}, { class: 'form-select' } %>
        </div>
      </div>
      <!-- Tab 2 -->
      <div class="content content-2">
        <div class="form-group mt-4">
          <div class="row">
            <div class="col-sm-3">
              <%= image_tag user_avatar(resource, 100), class: "rounded-circle original-avatar" %>
            </div>
            <div class="offset-1 col-sm-7 d-flex align-items-end">
              <%= f.file_field :avatar, class: 'form-control photo_upload', id: "image_#{current_user.avatar.id}" %>
            </div>
            <div class="d-none mx-auto" style='position: absolute; width: 100px;'>
                <%= image_tag("Default_image.png", class: 'rounded-circle', id: "image_#{current_user.avatar.id}_medium", style: 'width: 120px; margin: 0 -9px;') %>
            </div>
          </div>
        </div>
      </div>
      <!-- Tab 3 -->
      <div class="content content-3">
        <div class="form-group mt-4">
          <%= f.label :first_name %>
          <%= f.text_field :first_name, autofocus: true, class: 'form-control', placeholder: "First name" %>
        </div>
        <div class="form-group mt-3">
          <%= f.label :last_name %>
          <%= f.text_field :last_name, autofocus: false, class: 'form-control', placeholder: "Last name" %>
        </div>
        <div class='personal-info'>
          <div class="form-group optinal-attr mt-3">
            <%= f.label :about %>
            <%= f.text_area :about, autofocus: false, class: 'form-control', placeholder: "About info" %>
          </div>
          <div class="form-group mt-3">
            <%= f.label :birthday %>
            <%= f.date_field :birthday, autofocus: false, class: 'form-control', placeholder: "You birthday" %>
          </div>
        </div>
      </div>
    </section>
    <hr class='my-4'>
    <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
      <div class="alert alert-warning">Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
    <% end %>

    <% if resource.authorizations(&:provider).blank? %>
      <div class="form-group mt-3">
        <%= f.password_field :password, autocomplete: "off", class: 'form-control', placeholder: 'Password'  %>
        <p class="form-text text-muted"><small>Leave password blank if you don't want to change it</small></p>
      </div>

      <div class="form-group mt-3">
        <%= f.password_field :password_confirmation, autocomplete: "off", class: 'form-control', placeholder: 'Confirm Password'  %>
      </div>

      <div class="form-group mt-3">
        <%= f.password_field :current_password, autocomplete: "off", class: 'form-control', placeholder: 'Current Password'  %>
        <p class="form-text text-muted"><small>We need your current password to confirm your changes</small></p>
      </div>
    <% end %>

    <div class="form-group mt-4 mb-5">
      <%= f.submit "Save Changes", class: 'btn btn-block btn-primary' %>
    </div>
  <% end %>
  <hr>
    <div class="mt-4">
      <p class="text-center">
        <%= link_to "Deactivate my account", registration_path(resource_name), data: { confirm: "Are you sure? You cannot undo this." }, method: :delete, class: 'btn btn-link text-decoration-none' %>
      </p>
    </div>
  </div>
</div>

Nice. Will try it in an app now