JSFiddle - React, Tailwind, and code Playground

by Artem Borovikov

HTML

<div class="left_fixed_block">
    <div class="block-header">
        <div class="block-title">
            <img src="" alt="" class="block-title-icon"> Предварительная запись
        </div>
        <a href="tel:+74952553101" class="block-phone">+7 (495) 255-31-01</a>
    </div>

    <div class="block-body">
        <ul class="actions-list">
            <li class="action-item">
                <a href="#order" class="btn btn-danger">Заказать звонок</a>
            </li>
            <li class="action-item">
                <a href="#order" class="btn btn-warning">Записаться на ремонт</a>
            </li>
        </ul>
    </div>

    <div class="block-footer">
        <ul class="contacts-list">
            <li class="contact-item time">
                <img src="" alt="" class="contact-icon">
                <div class="contact-value">Пон.-суб. с 9.00 - 20.00</div>
            </li>
            <li class="contact-item">
                <img src="" alt="" class="contact-icon">
                <div class="contact-value">Москва, ул. Клары Цеткин, 33к33А</div>
            </li>
        </ul>

        <a href="#contact" class="block-map">
Мы на карте</a>
    </div>
</div>

CSS

.left_fixed_block {
    max-width: 300px;
    border: 1px solid #5f5f5f;
    font-family: "Trebuchet MS";
}

.left_fixed_block img {
    max-width: 100%;
}

.left_fixed_block .btn {
    display: inline-block;
    min-width: 210px;
    padding: 8px 10px;
    border-radius: 30px;
    box-shadow: 0 1px 2px rgba(2, 2, 2, 0.26);
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.45px;
    text-decoration: none;
    text-align: center;
}

.left_fixed_block .btn.btn-danger {
    border: 1px solid rgba(96, 0, 0, 0.72);
    background-color: #e47600;
    background-image: linear-gradient(to top, #981e1e 0%, #ca1010 100%);
    color: #fff;
}

.left_fixed_block .btn.btn-warning {
    border: 1px solid rgba(153, 79, 0, 0.72);
    background-color: #e47600;
    background-image: linear-gradient(to top, rgba(199, 142, 20, 0.43) 0%, rgba(228, 181, 39, 0.43) 39%, rgba(241, 222, 59, 0.43) 67%, rgba(211, 178, 25, 0.43) 100%);
    color: #fff;
}

.left_fixed_block .btn:hover {
    text-decoration: none;
}

.left_fixed_block .block-header,
.left_fixed_block .block-footer {
    padding: 5px 10px;
    background-color: #5f5f5f;
    color: #fff;
    text-align: center;
}

.left_fixed_block .block-body {
    padding: 10px;
}

.left_fixed_block .block-title {
    margin: 0;
    font-size: 18px;
    letter-spacing: -0.45px;
}

.left_fixed_block .block-title .block-title-icon {
    display: inline-block;
    vertical-align: middle;
    width: 31px;
}

.left_fixed_block .block-phone {
    margin: 0;
    font-size: 29px;
    color: inherit;
    text-decoration: none;
    letter-spacing: -0.45px;
}

.left_fixed_block .actions-list {
    margin: 0 0 -10px;
    padding: 0;
    list-style: none;
    text-align: center;
}

.left_fixed_block .actions-list .action-item {
    margin: 0 0 10px;
}

.left_fixed_block .contacts-list {
    margin: 0 0 -10px;
    padding: 0;
    font-size: 16px;
    letter-spacing: -0.45px;
    list-style:...