JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header_two_advencher">
                <div class="advencher_btn advencher_btn_1">
                    <div class="advencher_btn_content_1">
                        <img src="https://i.imgur.com/T4Y9om6.png" alt="">
                        <img src="https://i.imgur.com/tJRpX0y.png" alt="">
                        <div class="advencher_btn_content_1_after">
                        </div>
                    </div>
                    <div class="advencher_btn_content_2">
                        <span>Разработка<br>
                            нейминга</span>
                    </div>
                    <div class="advencher_btn_content_3">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum
                    </div>
                </div>
            </div>

CSS

.advencher_btn_content_1 img:nth-child(1){
    width: 27px;
    height: auto;
}.advencher_btn_content_1 img:nth-child(2){
    width: 26px;
    height: auto;
    display: none;
}.advencher_btn_content_1{
    background-color: rgb(253, 205, 52);
    background-image: linear-gradient(to top, rgb(252, 196, 22) 0%, rgb(255, 244, 175) 100%);
    border-radius: 50px;
    padding:7px;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    cursor: pointer;
    transition:0.3s;
}.advencher_btn_content_1_after{
    width: 52px;
    height: 52px;
    top: -2px;
    left: -2px;
    position: absolute;
    z-index: -1;
    border: 3px solid white;
    border-radius: 100px;
    box-shadow: 0px 0px 0px 1px #000000;
    transition:0.3s;
}.advencher_btn_content_2{
    color: rgb(41, 38, 38);
    font-family: "Roboto Condensed";
    font-size: 20px;
    font-weight: 400;
    line-height: 25px;
    margin-top: 17px;
    transition:0.3s;
}.advencher_btn:hover .advencher_btn_content_1 img:nth-child(1){
    display: none;
}.advencher_btn:hover .advencher_btn_content_1 img:nth-child(2){
    display: block;
}.advencher_btn:hover .advencher_btn_content_1_after{
    border: 8px solid white;
    /* box-shadow: 0px 0px 0px 1px rgb(182, 182, 182); */
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.33);

}.advencher_btn{
    position: relative;
}.advencher_btn_content_3{
    position: absolute;
    height: 218px;
    left: -100%;
    top: 47px;
    width: 265px;
    background-color: rgb(255, 255, 255);
    z-index: 2;
    color: rgb(41, 38, 38);
    font-family: "Roboto Condensed";
    font-size: 19px;
    font-weight: 400;
    line-height: 24px;
    z-index: 4;
    border: 1px solid rgb(182, 182, 182);
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.33);
}.advencher_btn_content_3::before{
    width: 106%;
    height: 106%;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    z-index: -3;
   ...