JSFiddle - React, Tailwind, and code Playground

by osimone

HTML

<section class="catalog">
        <div class="container">
            <div class="catalog__title" align="right">Легкий рюкзак Anello 
                с защитой  от кражи
                <div class="catalog__subtitle">
                    <p align="right">Рюкзаки под маркой Anello — известный   японский бренд, входящий  в холдинг Carrot Co <br> <br>
                        Изюминка бренда — каркас рюкзака,  
                        который держит форму, если распахнуть 
                        центральную секцию. Такое конструкционное 
                        решение позволяет видеть всё внутреннее 
                        содержание сразу, исключая нудный 
                        и долгий поиск необходимой вещи.</p>
                </div>
                <button class="button button_mini">Узнать цену</button>
            </div>

            <div class="catalog__knopki">
                <img name="img" class="catalog__knopki_img" src="https://downloader.disk.yandex.ru/preview/38637a344abb3225bddd9730c48ff80fabfd4f8ee99dce076edf62ed418532a9/5eb98273/fX6RZPMsWKv-9w6OlvpROWHvfPKDSxOFRZWi51QBZ1DMfg11baXjrzZztLg6eOVAsWR5cK6Ointu8RloBgskuw==?uid=0&filename=%E2%84%961blue.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&tknv=v2&owner_uid=1068777574&size=1440x789">
                <div class="btn_round">
                    <input type="button" class="btn_red" onclick="javascript:img.src='https://downloader.disk.yandex.ru/preview/9f3754ab006cb8a3ebfc1b6c4bf6796bc91d1e1b81dc91cc3fdc478cf77f226a/5eb98273/eHP5ZJDan644ie8Bwoz3I04g9O9EJV85SCxOr6r8dgac1O_s4bDirRJ0_uiE5vskSyGHhaj7eDlzKduXYS_Lkw==?uid=0&filename=%E2%84%961Red.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&tknv=v2&owner_uid=1068777574&size=1440x789'">
                    <input type="button" class="btn_blue"...

CSS

.catalog {
    position: relative;
    margin-top: 62px;
    padding: 62px 0 71px 0;
    background-color: #fff;
    &__title {
        max-width: 650px;
        margin-left: 350px;
        position: absolute;
        z-index: 10;
        margin-top: 14px;
        font-family: 'Nexa Script';
        font-size: 48px;
        line-height: 1.2;
        font-weight: 400;
        color: #000000;
    }
    &__subtitle {
        display: flex;
        vertical-align: middle;
        align-items: flex-end;
        justify-content: flex-end;
        margin-top: 51px;
        z-index: 10;
        font-size: 24px;
        line-height: 1.2;
        font-weight: 400;
        color: #000000;
    }

    
    &__knopki {
        margin-top: 90px;
        margin-left: -80px;
        &_img {
            max-width: 100%;
        }

    }

    .btn_round {
        position: absolute;
        left: 9%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .btn1_black {
            display: block;
            width: 50px;
            height: 50px;
            // left: 12%;
            margin-left: -520px;
            top: 100%;
            border-radius: 100%;
            border: none;
            background-color: #000000;
        }
        .btn_blue {
            display: block;
            width: 50px;
            height: 50px;
            margin-left: -520px;
            top: 100%;
            border-radius: 100%;
            border: none;
            background-color: #1d6887;
        }
        .btn_red {
            display: block;
            width: 50px;
            height: 50px;
            margin-left: 110px;
            top: 100%;
            border-radius: 100%;
            border: none;
            background-color: #d24a43;
        }
        .btn_grey {
            display: block;
            width: 50px;
            height: 50px;
            margin-left: 20px;
            top: 100%;
            border-radius: 100%;
         ...