JSFiddle - React, Tailwind, and code Playground

by Andry Zirka

HTML

<div class="block-cakes">
        <div class="wrap__inner">
            <div class="block-cakes__message">
                <div class="block-cakes__text">
                    <h2 class="block-cakes__header block-cakes__header_size_l
                               block-cakes__header_font_type_alegreya-bold">
                                    Art of cakes
                    </h2>
                    <p class="block-cakes__header-description block-cakes__header-description_size_s
                              block-cakes__header-description_font_type_alegreya-bold">
                                    we create delicious memories
                    </p>
                    <p class="block-cakes__description block-cakes__description_font_type_proximanova
                              block-cakes__description_size_xs">
                        Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
                        Curabitur ullamcorper ultricies nisi.
                        Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus,
                        sem quam semper libero, sit amet adipiscing sem neque sed.
                    </p>
                </div>
                <div class="block-cakes__information-cook">
                    <div class="block-cakes__post block-cakes__post_size_xl
                                block-cakes__post_font_type_alegreya-bold">
                                    Chef Cook
                    </div>
                    <div class="block-cakes__profile">
                        <span class="block-cakes__name block-cakes__name_font_type_alegreya">Benito</span>
                        <span class="block-cakes__user-img">
                            <img src="http://imgdepo.com/id/10570641.png" alt="Benito Gaspare">
                        </span>
                        <span class="block-cakes__name block-cakes__name_font_type_alegreya">Gaspare</span>
                    </div>
         ...

CSS

.block-cakes {
    background: #fdfcfa;
    text-align: center;
    padding: 105px 0;
}
.wrap__inner {
    width: 1260px;
    margin: 0 auto;
}

.block-cakes__message, .block-cakes__logo {
    display: inline-block;
    width: 628px;
    vertical-align: top;
}

.block-cakes__header {
    padding-bottom: 20px;
}

.block-cakes__header_size_l {
    font-size: 48px;
    color: #56534c;
}

.block-cakes__header-description {
    padding-bottom: 70px;
}

.block-cakes__header-description_size_s {
    font-size: 14px;
    color: #a47d5e;
    text-transform: uppercase;
}

.block-cakes__description {
    width: 490px;
    margin: 0 auto 45px;
    letter-spacing: 1px;
}

.block-cakes__description_size_xs {
    font-size: 14px;
    color: #56534c;
    line-height: 24px;
}

.block-cakes__gallery-item {
    margin: 8px;
    width: 295px;
    height: 250px;
    display: inline-block;
}

.block-cakes__logo {
    position: relative;
}

.block-cakes__header-gallery {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.9;
}

.block-cakes__title-gallery {
    width: 160px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.block-cakes__title-gallery_size_l {
    text-transform: uppercase;
    font-size: 30px;
    color: #c9b176;
}

.block-cakes__post_size_xl {
    font-size: 24px;
    color: #56534c;
}

.block-cakes__name {
    border-bottom: 1px solid #d7d5ca;
    border-top: 1px solid #d7d5ca;
    width: 111px;
    padding: 20px 22px;
    display: inline-block;
}

.block-cakes__name_size_m {
    font-size: 24px;
    color: #56534c;
}

.block-cakes__profile {
    margin: 50px 0 25px;
}

.block-cakes__user-img {
    margin: 0 25px;
    display: inline-block;
    vertical-align: middle;
}

.block-cakes__quote_size_m {
    font-size: 24px;
    line-height: 30px;
    color: #a47d5e;
}

.block-cakes__quote {
    width: 245px;
    margin: 0 auto;
   
}
.block-cakes__quote:before{
  content:...