JSFiddle - React, Tailwind, and code Playground

by ph822720355

HTML

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&amp;display=swap" rel="stylesheet" />
<style>
.neon-effect{
  font-family: 'Noto Sans TC', sans-serif;
}

.neon-effect{
  color:gray;
  letter-spacing:2px;
}

.neon-effect:nth-of-type(2){
  text-shadow:
    0 0 5px rgba(67,232,216, 1),
    0 0 10px rgba(67,232,216, 1),
    0 0 20px rgba(67,232,216, 1),
    0 0 40px rgba(67,232,216, 1);
  animation:neon-shine 10s linear infinite;
  
}

.neon-effect:nth-of-type(1){
  text-shadow:
    0 0 5px rgba(247, 245, 41,.1),
    0 0 10px rgba(247, 245, 41,1),
    0 0 20px rgba(247, 245, 41,1),
    0 0 40px rgba(247, 245, 41,1);
   animation:neon-shine 10s 1s linear infinite;
}
 
.neon-effect:nth-of-type(3){
  text-shadow:
    0 0 5px rgba(255, 65, 65, 1),
    0 0 10px rgba(255, 65, 65, 1),
    0 0 20px rgba(255, 65, 65, 1),
    0 0 40px rgba(255, 65, 65, 1);
  animation:neon-shine 10s linear infinite;
}

/* 先不要使用霓虹燈
@keyframes neon-shine{
  0%{opacity:1;}
  90%{opacity:0;}
  100%{
  color:#232323;}
}  
*/
</style>

<div>
    <a href="https://www.buymeacoffee.com/iinhen" target="_blank"><img class="alignnone lazyloaded" style="display: block; margin-left: auto; margin-right: auto;" title="Buy Me A Coffee 建立免費、漂亮的個人贊助頁面，接收 PayPal 小額付款" src="https://free.com.tw/blog/wp-content/uploads/2018/05/2018-05-24_1307.png" alt="Buy Me A Coffee 建立免費、漂亮的個人贊助頁面，接收 PayPal 小額付款" width="260" height="120" border="0" data-ll-status="loaded" /></a>
<br />
<a class="neon-effect" style="font-size:large" href="https://www.buymeacoffee.com/iinhen" target="_blank">如果文章有幫助到您，且您也喜歡我的文章，可以透過 PayPal 贊助我一杯咖啡來支持我喔！</a>
</div>