如何将选项卡 css 从选项卡 1 转换为选项卡 2？

Question

How do i translate tab 1 Neumorphic css to tab 2 when I click on tab 2 like the example below like sliding from tab 1 to tab 2?

https://dribbble.com/shots/10805627-Neumorphic-Tab

import styled from 'styled-components';

const PostsTabWrapper = styled.div`
  .react-tabs {
    width: 100%;
    font-size: 20px;
    font-weight: 500;
    @media (max-width: 768px) {
      font-size: 16px;
    }
  }
  
  .react-tabs__tab-list {
    margin: 0 25px 20px 25px;
    background: 3af740;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 
      inset 0 0 15px rgba(55, 84, 170,0),
      inset 0 0 20px rgba(255, 255, 255,0),
      7px 7px 15px rgba(55, 84, 170,.15),
      -7px -7px 20px rgba(255, 255, 255,1),
      inset 0px 0px 4px rgba(255, 255, 255,.2);
  }
  
  .react-tabs__tab {
    display: inline-block;
    position: relative;
    list-style: none;
    padding: 16px 24px;
    cursor: pointer;
  }
  
  .react-tabs__tab--selected {
    border-radius: 10px;
    box-shadow: 
    inset 7px 7px 15px rgba(55, 84, 170,.15),
    inset -7px -7px 20px rgba(255, 255, 255,1),
    0px 0px 4px rgba(255, 255, 255,.2);
    transition: 0.4s ease-in-out;
  }
  
  .react-tabs__tab--disabled {
    // color: GrayText;
    cursor: default;
  }
  
  .react-tabs__tab:focus {
    // box-shadow: 0 0 5px hsl(208, 99%, 50%);
    // border-color: hsl(208, 99%, 50%);
    // outline: none;
  }
  
  .react-tabs__tab:focus:after {
    content: "";
    position: absolute;
    height: 5px;
    left: -4px;
    right: -4px;
    bottom: -5px;
    // background: #fff;
  }
  
  .react-tabs__tab-panel {
    display: none;
  }
  
  .react-tabs__tab-panel--selected {
    display: block;
  }
`;

export default PostsTabWrapper

Answer 1

check when you click on the input then you do translateX(distance)

for exemple:

input{
&.active {
    background: #7395D2;
    color: #7395D2;
    #swipe{
      transform: translateX(120px);
      background: #C6CEF6;
    }
   }
}