JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header" role="banner">
<div class="company-introduction-wrap">
					<h1 class="heading-primary u-fz-14 centering">でAAAAAAAAAAの<br />事業を展開しています。</h1>
					<p class="c-logo-wrap"><img alt="logo" src="img/common-img/logo.png" /></p>
					<p class="c-company-name centering">ABCDEF株式会社</p>
					<p class="company-description centering">ぐ<br />グローバルカンパニー</p>
				</div>
				<div class="main-copyright-wrap">
					<nav class="gnavi gnavi-skin centering" role="navigation">
						<ul class="gnavi__inner">
							<li class="gnavi__item text-shadow"><a class="gnavi__item__link gnavi__item__link-skin" href="#js-goto-first">事業一覧</a></li>
							<li class="gnavi__item text-shadow"><a class="gnavi__item__link gnavi__item__link-skin" href="#js-goto-section-second">ニュース</a></li>
							<li class="gnavi__item text-shadow"><a class="gnavi__item__link gnavi__item__link-skin" href="#js-goto-section-third">求人</a></li>
							<li class="gnavi__item text-shadow"><a class="gnavi__item__link gnavi__item__link-skin" href="#js-goto-section-fourｔｈ">会社概要</a></li>
							<li class="gnavi__item text-shadow"><a class="gnavi__item__link gnavi__item__link-skin" href="http://webportfolio.s2.adexd.net/portfolio-2/index.html">問い合わせ</a></li>
						</ul>
					</nav>
					<!-- /.gnavi -->
					<ul class="social-btn-wrap">
						<li class="social-btn social-btn_size_large">
							
		                <li class="social-btn social-btn_size_large">
		                	
		            	</li>
		                <li class="social-btn social-btn_size_large">
		                	
		                </li>
					</ul>
					<h2 class="heading-secondly heading-secondly--skin b-long-shadow">
						に<br class="br-sponly" />そして<br />世界中のあなたに
					</h2>
					<p class="centering">
						AAAAAAAAAAAAA<br />
						AAAAAAAAAAAAAA<br />
						AAAAAAAAAAAA<br />
					</p>
          </div><!-- /.main-copyright-wrap --></header>

CSS

@charset "utf-8";

.header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/* Resetcss-plusalpha
   ----------------------------------------------------------------- */
/*以下html5doctorの一部を抜粋
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;
    vertical-align:baseline;
    background:transparent;
}

/* liの初めに出るドットを削除*/
ul {
    list-style:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
    color: black;
}
/* /html5doctorの一部を抜粋 */



/* Variable
   ----------------------------------------------------------------- */
:root {
    /* color */
    --color-primary: #d1fb3c;
    /*--color-foundation: to left bottom , rgba(153,255,211,.66), rgba(0,255,145,.66) 15%, rgba(115,255,194,.66) 33%, rgba(189,255,226,.66) 49%, rgba(115,255,194,.66) 67%, rgba(0,255,145,.66) 84%, rgba(189,255,226,.66);*/

    /* breakpoint */
    --breakpoint-mobile: 320px;
    --breakpoint-tablet: 768px;
    --breakpoint-pc: 768px;
    --breakpoint-mobile: @media (max-width:320px);
    --breakpoint-tablet: @media (max-width:768px);
    --breakpoint-pc-max: @media (max-width:921px);
    --breakpoint-pc-min: @media (min-width:922px);
}



/* Custom-mediaquerys
   ----------------------------------------------------------------- */
@custom-media --breakpoint-mobile (max-width: 34em);
@custom-media --breakpoint-tablet...