佛祖保佑 ASCII React Tailwind 響應式

說明

分享使用 react, tailwind 字元顯示佛祖保佑，手機版會出現比較小的圖像。

裡面有一段詩出自於中國的網友，我將這篇詩改成繁體中文版。

預覽

程式

我是用 tsx 檔，但 js 也相容。

buddhism.tsx

/**
 * 佛教 ASCII 藝術，保佑永不當機，永無 BUG
 */
export default function Buddhism() {
  return (
    <div>
      <div className="hidden md:block">
        <p className="font-mono leading-5 whitespace-pre">
          {'                           _'}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {'                        _oo0oo_'}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {'                       o8888888o'}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {'                       88" . "88'}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {'                       (| -_- |)'}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {'                       0\\  =  /0'}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {"                    ____/`---'\\____"}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {"                  .'  \\\\|     |//  `."}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {'                 /  \\\\|||  :  |||//  \\'}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {'                /  _||||| -:- |||||_  \\'}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {"                |   | \\\\\\  -  /'| |   |"}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {"                | \\_|  `\\`---'//  |_/ |"}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {"                \\  .-\\__ `-. -'__/-.  /"}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {"              ___`. .'  /--.--\\  `. .'___"}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {'           ."" \'<  `.___\\_<|>_/___.\' _> \\"".'}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {"          | | :  `- \\`. ;`. _/; .'/ /  .' ; |"}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {"          \\  \\ `-.   \\_\\_`. _.'_/_/  -' _.' /"}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {"      =====`-.`___`-.__\\ \\___  /__.-'_.'_.-'====="}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {"                        `=--=-'"}
        </p>
        <br />
        <br />
        <p className="font-mono whitespace-pre">
          {'      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~'}
        </p>
        <br />
        <p className="font-mono whitespace-pre">
          {'            佛祖保佑     永不當機     永無BUG'}
        </p>
        <br />
        <p className="font-mono whitespace-pre">{'        佛曰:'}</p>
        <p className="font-mono whitespace-pre">
          {'                寫字樓裡寫字間，寫字間裡程式員；'}
        </p>
        <p className="font-mono whitespace-pre">
          {'                程式人員寫程式，又拿程式換酒錢。'}
        </p>
        <p className="font-mono whitespace-pre">
          {'                酒醒只在網上坐，酒醉還來網下眠；'}
        </p>
        <p className="font-mono whitespace-pre">
          {'                酒醉酒醒日復日，網上網下年復年。'}
        </p>
        <p className="font-mono whitespace-pre">
          {'                但願老死電腦間，不願鞠躬老闆前；'}
        </p>
        <p className="font-mono whitespace-pre">
          {'                賓士米漿貴者趣，公車腳踏程式員。'}
        </p>
        <p className="font-mono whitespace-pre">
          {'                別人笑我太瘋癲，我笑自己命太賤；'}
        </p>
        <p className="font-mono whitespace-pre">
          {'                不見滿街漂亮妹，哪個歸得程式員？'}
        </p>
      </div>
      <div className="md:hidden">
        <p className="font-mono leading-5 whitespace-pre">
          {'               _=_'}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {'             q(-_-)p'}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {"             '_) (_`"}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {'             /__/  \\'}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {'           _(<_   / )_'}
        </p>
        <p className="font-mono leading-5 whitespace-pre">
          {'          (__\\_\\_|_/__)'}
        </p>
        <br />
        <br />
        <p className="font-mono whitespace-pre">
          {'~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~'}
        </p>
        <br />
        <p className="font-mono whitespace-pre">
          {'   佛祖保佑    永不當機    永無BUG'}
        </p>
        <br />
        <p className="font-mono whitespace-pre">{'佛曰:'}</p>
        <p className="font-mono whitespace-pre">
          {'     寫字樓裡寫字間，寫字間裡程式員；'}
        </p>
        <p className="font-mono whitespace-pre">
          {'     程式人員寫程式，又拿程式換酒錢。'}
        </p>
        <p className="font-mono whitespace-pre">
          {'     酒醒只在網上坐，酒醉還來網下眠；'}
        </p>
        <p className="font-mono whitespace-pre">
          {'     酒醉酒醒日復日，網上網下年復年。'}
        </p>
        <p className="font-mono whitespace-pre">
          {'     但願老死電腦間，不願鞠躬老闆前；'}
        </p>
        <p className="font-mono whitespace-pre">
          {'     賓士米漿貴者趣，公車腳踏程式員。'}
        </p>
        <p className="font-mono whitespace-pre">
          {'     別人笑我太瘋癲，我笑自己命太賤；'}
        </p>
        <p className="font-mono whitespace-pre">
          {'     不見滿街漂亮妹，哪個歸得程式員？'}
        </p>
      </div>
    </div>
  );
}

參考

• https://www.asciiart.eu/religion/buddhism
• https://gist.github.com/edokeh/7580064