JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Isara head</title>
    <meta name="Author" content="" />
    <link rel="stylesheet" href="doctor_css_reset.css">
    <link rel="stylesheet" href="isara_head.css">
</head>

<body>
    <section class="head">
        <div class="head_in">
            <header class="bar">
                <div class="logo">
                    <img src="https://isara.life/wp-content/themes/isara_v2/img/isaralogo.png" alt="">
                </div>
                <div class="subtitle txtxs">
                    <p>バンコクのノマドエンジニア育成講座</p>
                </div>
                <div class="headcontact">
                    <div class="contactsp">
                        <p class="txtxs">お問い合わせ / 資料請求はこちら</p>
                    </div>
                    <div class="contactpc"></div>
                </div>
            </header>
        </div>
    </section>
    <div class="box">
    </div>
</body>
</html>

CSS

* {
    box-sizing: border-box;
}

.head {
    position: fixed;
    z-index: 10;
    width: 100%;
    background: #fff;
}

.bar {
    padding: 20px 0;
    height: 75px;
    width: 1170px;
    max-width: calc(100% - 20px);
    margin: 0 auto;
    position: relative;
}

.logo img {
    width: 128px;
}

.bar .logo,
.subtitle {
    display: inline-block;
}

.logo {
    margin-top: -6px;
}

img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
		vertical-align: middle;
}

.subtitle {
    position: relative;
    bottom: -10px;
    font-weight: 600;
}

.txtxs {
    font-size: 14px;
}

.bar .contactsp {
    cursor: pointer;
    position: absolute;
    background: rgb(216, 73, 64);
    color: #ffffff;
    border-radius: 25px;
    right: 0px;
    top: 16px;
    padding: 11px 40px;
}

.box {
    background-color: blueviolet;
    height: 3000px;
}