JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.min.css">
<a id="line-button" class="btn btn-block btn-social button">
  <i class="fab fa-line"></i> LINEでログイン
</a>

CSS

.button { 
  color: #FFFFFF;
  font-size: 15px;
  background-color: #00C300;  
}
  
.button:hover {
  color: #FFFFFF;
  background-color: #00E000
}
  
.button:active {
  background-color: #00B300
}

JavaScript

$('#line-button').on('click', function() {
  // app public keyを使用してOAuth.ioを初期化します
  OAuth.initialize('HwAr2OtSxRgEEnO2-JnYjsuA3tc');
  // ポップアップを開きます。
  OAuth.popup('line').then(line => {
    console.log('line:', line);
    // ログインに成功したら、ユーザーの名前を表示させます。
    // #me() は便利なメソッドです。
    // 取得したユーザーのデータをコンソールで確認出来ます。
    line.me().then(data => {
      console.log('me data:', data);
      alert('LINE からの情報では、あなたの名前は ' + data.displayName + ".\n詳細はブラウザのコンソールを確認して下さい。");
    });
    // また、.get()にてLINE APIから取得も出来ます。
    line.get('/v1/users/self').then(data => {
      console.log('self data:', data);
	  })
  });
})