JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>LIFF v2測試</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
	
	<!-- LIFF v1只能用到2021年4月 https://developers.line.biz/en/docs/liff/versioning-policy/ -->
	<!-- LIFF v2從2019年10月啟用 https://developers.line.biz/en/docs/liff/developing-liff-apps/#developing-a-liff-app -->
    <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
	
    <script>
	
         document.addEventListener("DOMContentLoaded", function(){
		    // 參考 https://developers.line.biz/en/reference/liff/#initialize-liff-app
            liff
                .init({
					// 這裡要改成自己的LIFF URL的後半段 https://liff.line.me/##########-XXXXXXXX
                    liffId: '##########-XXXXXXXX'    
                })
                .then(() => {
				
					// 參考 https://developers.line.biz/en/reference/liff/#get-line-version
					document.getElementById("getLineVersion").innerHTML = liff.getLineVersion();

					// 參考 https://developers.line.biz/en/reference/liff/#is-in-client
					document.getElementById("isInClient").innerHTML = liff.isInClient();

					// 參考 https://developers.line.biz/en/reference/liff/#get-context
					document.getElementById("getContextViewType").innerHTML = liff.getContext().viewType;
					document.getElementById("getContextType").innerHTML = liff.getContext().type;
					document.getElementById("getContextUtouId").innerHTML = liff.getContext().utouId;
					document.getElementById("getContextGroupId").innerHTML = liff.getContext().groupId;
					document.getElementById("getContextRoomId").innerHTML =...