JSFiddle - React, Tailwind, and code Playground

by Vaniljs

HTML

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
 <div class="container-html">
       <div class="square-bank">
        <div class="DIV_1">
            <div class="DIV_2">
                <a href="#" class="A_3">
            <img alt="" src="1.svg" class="IMG_4" />
            <span class="SPAN_5">Акция<br class="BR_6" />по кредитам</span> 
            <span class="SPAN_7">Ставка от 12,5%</span>
           <span id="SPAN_10">Узнать больше</span>
            </a>
            </div>
        </div>
        <div class="DIV_1">
            <div class="DIV_2">
                <a href="#" class="A_3">
            <img alt="" src="1.svg" class="IMG_4" />
            <span class="SPAN_5">Акция<br class="BR_6" />по кредитам</span> 
            <span class="SPAN_7">Ставка от 12,5%</span>
           <span id="SPAN_10">Узнать больше</span>
            </a>
            </div>
        </div>
        <div class="DIV_1">
            <div class="DIV_2">
                <a href="#" class="A_3">
            <img alt="" src="1.svg" class="IMG_4" />
            <span class="SPAN_5">Акция<br class="BR_6" />по кредитам</span> 
            <span class="SPAN_7">Ставка от 12,5%</span>
           <span id="SPAN_10">Узнать больше</span>
            </a>
            </div>
        </div>
        <div class="DIV_1">
            <div class="DIV_2">
                <a href="#" class="A_3">
            <img alt="" src="1.svg" class="IMG_4" />
            <span class="SPAN_5">Акция<br class="BR_6" />по кредитам</span> 
            <span class="SPAN_7">Ставка от 12,5%</span>
           <span id="SPAN_10">Узнать больше</span>
            </a>
            </div>
        </div>
        </div>
        <ul class="credit-list">
            <li>
                <div class="item-list fl">
                    <div class="logo-item fl">
                        <img src="logo-item.png" alt="">
                        <div...

CSS

.container-html {
            width: 70%;
            margin-right: auto;
            margin-left: auto;
        }

        a {
            text-decoration: none;
        }
        
        .square-bank {
            position: relative;
        }

        .DIV_1 {
            bottom: 0px;
            float: left;
            height: 250px;
            left: 0px;
            min-height: 1px;
            position: relative;
            right: 0px;
            text-align: left;
            top: 0px;
            width: 249.5px;
            perspective-origin: 124.75px 125px;
            transform-origin: 124.75px 125px;
            font: normal normal 400 normal 15px / 20.1px Arial, Helvetica, sans-serif;
        }

        /*#DIV_1*/

        .DIV_2 {
            bottom: 0px;
            box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 1px 0px;
            box-sizing: border-box;
            height: 232px;
            left: 0px;
            position: relative;
            right: 0px;
            text-align: left;
            top: 0px;
            width: 231.5px;
            perspective-origin: 115.75px 116px;
            transform-origin: 115.75px 116px;
            background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
            border: 1px solid rgb(228, 228, 228);
            border-radius: 1px 1px 1px 1px;
            font: normal normal 400 normal 15px / 20.1px Arial, Helvetica, sans-serif;
            margin: 0px 9px 18px;
            padding: 22px 0px 0px;
        }

        .DIV_2:hover img {
            display: none;
        }

        .DIV_2:hover #SPAN_10 {
            display: block;
        }

        /*#DIV_2*/

        .A_3 {
            color: rgb(0, 0, 0);
            cursor: pointer;
            text-align: left;
            text-decoration: none solid rgb(0, 0, 0);
            column-rule-color: rgb(0, 0, 0);
            caret-color: rgb(0, 0, 0);
            border-top: 0px none rgb(0, 0, 0);
            border-right:...

JavaScript

(function($) {
            $('.accordion > li:eq(0) a').addClass('active').next().slideDown();

            $('.accordion a').click(function(j) {
                var dropDown = $(this).closest('li').find('p');

                $(this).closest('.accordion').find('p').not(dropDown).slideUp();

                if ($(this).hasClass('active')) {
                    $(this).removeClass('active');
                } else {
                    $(this).closest('.accordion').find('a.active').removeClass('active');
                    $(this).addClass('active');
                }

                dropDown.stop(false, true).slideToggle();

                j.preventDefault();
            });
        })(jQuery);