JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">

    <!-- HEADER -->
    <header>
        <div id="header-top" class="cf">
            <div id="header-inner">
                <h1>
                    <a href="#"><img src="img/DMM_WEBCAMP_white.png" alt="logo" width="136" height="14"></a>
                </h1>

                <h2 id="pc-head-logo">
                    <img src="img/DMM_WEBCAMP.svg" alt="pc-h-logo" width="215" height="21">
                </h2>
                <p class="head-st xl-display">
                    Webスキルの<br>パーソナルジム
                </p>
                <div id="tel-time">
                    <h3>03-6869-4700</h3>
                    <p>営業時間:10:00~19:00</p>
                </div>
                <ul id="head-btn">
                    <li><a href="#">受講申込</a></li>
                    <li><a href="#">無料説明会に申込む</a></li>
                    <i class="fas fa-bars fa-3x bar-icon"></i>
                </ul>
            </div>
        </div>
    </header>



    <!-- WHAT -->
    <section id="what">
        <h2><i>WHAT'S <span class="orange">"</span>WEBCAMP<span class="orange">"</span>?</i></h2>
        <p id="what-st">WEBCAMPとは？</p>
        <h3>
            <p id="masule-text">
                WEBCAMPは<br class="br-none"><span>「本気でスキルを習得させること」<br class="br-none"></span>を<br class="br-block">追求した<br>
                <small><span class="orange">"</span>Webスキルのパーソナルジム<span class="orange">"</span></small><br class="br-none">です。
            </p>
        </h3> 
    </section>

CSS

@charset "utf-8";

/* FONT  デフォルトで"Noto Sans Japanese" */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);


/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/




/*要素のフォントサイズやマージン・パディングをリセットしています*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    /*font-size: 62.5%;*/
    vertical-align:baseline;
    background:transparent;
    color: #383948;
}

/*行の高さをフォントサイズと同じにしています*/
body {
    line-height:1;
    font-family: "Noto Sans Japanese", sans-serif;
}



/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています*/
/*nav ul {
    list-style:none;
}*/
ol, ul {
    list-style: none;
}

/*引用符の表示が出ないようにしています*/
blockquote, q {
    quotes:none;
}

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
a {
    margin:0;
    padding:0;
    font-size: 62.5%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
}



/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/
table {
    border-collapse:collapse;
    border-spacing:0;
}


/*縦方向の揃え位置を中央揃えに指定しています*/
input, select {
    vertical-align:middle;
}

/*画像を縦に並べた時に余白が出ないように*/
img {
    vertical-align: top;
    font-size: 0;
    line-height: 0;
}

/*box-sizingを全ブラウザに対応*/
*, *:before,...