タブUIを作りたいのですが、表示がうまく行かない

Question

ユーザー別投稿一覧ページを作っていて、そこに3つのタブUIを設けたいです。しかし挙動がおかしいです。

その様子
具体的には、

・投稿された動画
・つぶやき(ツイート)
・ブログ

をタブUIでまとめて表示したいです
参考サイトは以下です。
CSS3-Only Tabbed Area

#問題のソースコード

一覧ページのビューファイル

    <div class="content-wrapper">
        <div class="content-block">
    <div class="content">
        <div class="user-about">
            <div class="image">
                <% if @user.image.attached? %>
                    <%= image_tag @user.image %>
               <% else %>
                   <%= image_tag 'no.user.png' %>
                <% end %>
             </div>
                    <div class="profile">
                        <div class="name-history">
                            <div class="name">
                                <%= @user.nickname %>
                            </div>
                            <div class="mania-histry">
                               <%= "趣味歴:#{@user.mania_histry}年" %>
                           </div>
                        </div>
    
                        <div class="enjoy-point">
                            <%= "楽しいポイント#{@user.enjoy_point}"%>
                        </div>
                    </div>

                    </div>

                    <div class="tabbed-area">

	<ul class="tabs group">
	    <li><a href="#box-one">Tab 1</a></li>
	    <li><a href="#box-two">Tab 2</a></li>
	    <li><a href="#box-three">Tab 3</a></li>
	</ul>
	
	    <div class="box-wrap">
           <div id="box-one">
            <% @posts.each do |post| %>
                <div class="text">
                   <h2><%= truncate(post.content, length:15) %></h2><%= link_to "コメントor続きをよむ", "/posts/#{post.id}" %>
                 </div>
                 <% if post.images.attached? %>
                     <% post.images.each do |image| %>
                             <div class = 'images'>
                                <%= image_tag image.variant(resize: "1280x720"), class: "content-image" %>
                           </div>
                        <% end %>
                <% end %>
            <% end %>
        </div>
                                
            <div id="box-two">
                <% @movies.each do |movie| %>
                    <div class="text">
                        <h2><%= truncate(movie.title, length:15) %></h2><%= link_to "コメントor続きをよむ", "/movies/#{movie.id}" %>
                        <h3><%= truncate(movie.introduction, length:15) %></h3>
                        <video src=<%= rails_blob_path(movie.movie) %> ,type='movie/mp4 movie/mov', controls>
                    </div>
                <% end %>
            </div>
                                
                <div id="box-three">
                    <% @blogs.each do |blog| %>
                </div>
                <div class="text">
                        <div class="title">
                            <h3>タイトル: <%= blog.title %></h3>
                        </div>
                    <h2><%= truncate(strip_tags(blog.body.to_s),length: 14) %></h2></h2><%= link_to "コメントor続きをよむ", "/blogs/#{blog.id}" %>
                </div>
                <% end %>
                    </div>
                </div>
            </div>
        </div>
              <div class="sidebar">
                 <%= render 'shared/menu'%>       
              </div>
           </div>
        </div>
    </div>
</div>

ビューファイルのCSS

#registrations-new, #sessions-new, #registrations-create,#passwords-new, #registrations-edit{
    h2{
        text-align: center;
    }
    input[type='email'],input[type='password'],input[type='number'], input[type= 'text']{
        width: 100%;
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #ccc;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
    }

    .field{
        margin: 10px 0;
    }
    .actions{
        margin: 15px auto;
        width: 150px;
       
            .button{
                display       : inline-block;
                border-radius : 5%;          /* 角丸       */
                font-size     : 18pt;        /* 文字サイズ */
                text-align    : center;      /* 文字位置   */
                cursor        : pointer;     /* カーソル   */
                padding       : 12px 12px;   /* 余白       */
                background    : #333;     /* 背景色     */
                color         : #ffffff;     /* 文字色     */
                line-height   : 1em;         /* 1行の高さ  */
                transition    : .3s;         /* なめらか変化 */
                box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
                border        : 2px solid #333;    /* 枠の指定 */
              }
              .button:hover {
                box-shadow    : none;        /* カーソル時の影消去 */
                color         : #333;     /* 背景色     */
                background    : #ffffff;     /* 文字色     */
              }
        
    }
}

#profiles-new,#profiles-create, #profiles-edit{
    form{
        .fi{
            margin: 10px 0;
            label{
                margin-bottom: 5px;
                display: block;
            }
            input[type = 'text'],input[type = 'number']{
                width: 100%;
                padding: 5px;
                border-radius: 5px;
                border: 1px solid #ccc;
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
            }    
        }
       
        .submit-block{
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 15px 0;
            .button {
                display       : inline-block;
                border-radius : 5%;          /* 角丸       */
                font-size     : 18pt;        /* 文字サイズ */
                text-align    : center;      /* 文字位置   */
                cursor        : pointer;     /* カーソル   */
                padding       : 12px 12px;   /* 余白       */
                background    : #333;     /* 背景色     */
                color         : #ffffff;     /* 文字色     */
                line-height   : 1em;         /* 1行の高さ  */
                transition    : .3s;         /* なめらか変化 */
                box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
                border        : 2px solid #333;    /* 枠の指定 */
              }
              .button:hover {
                box-shadow    : none;        /* カーソル時の影消去 */
                color         : #333;     /* 背景色     */
                background    : #ffffff;     /* 文字色     */
              }
        }
    
    }
}

#users-show{
    .content{
        border: 2px solid #000;
        padding: 15px;
        margin-bottom: 10px;
         .user-about{
          display: flex;

          .tabs { list-style: none; }
.tabs li { display: inline; }
.tabs li a { color: black; float: left; display: block; padding: 4px 10px; margin-left: -1px; position: relative; left: 1px; background: white; text-decoration: none; }
.tabs li a:hover { background: #ccc; }
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.box-wrap { position: relative; min-height: 250px; }
.tabbed-area div div { background: white; padding: 20px; min-height: 250px; position: absolute; top: -1px; left: 0; width: 100%; }
.tabbed-area div div, .tabs li a { border: 1px solid #ccc; }

#box-one:target, #box-two:target, #box-three:target {
    z-index: 1;
  }
    
          .image{ 
             width: 10%; 
        }
        
        .profile{
          margin-left: 10px;
          
          .name-history{
            margin-bottom: 3px;
              display: flex;
              width: 100%;
              .name{ 
                font-weight: bold;
               }
             
                .mania-histry{
                 margin-left: 20px;            
                }
             }
     
          .enjoy-point{
              width: 100%;
              font-size: 13px;
          }
        }
}
}
}

Answer 1

自己解決しました
以下のサイトを参考にしてみたらできました。
CSSでタブ切り替えを実装する方法を現役エンジニアが解説【初心者向け】