---
# System prepended metadata

title: "\U0001F3C5 Day 1｜React JSX"
tags: [2022 React 新手讀書會]

---

---
tags: 2022 React 新手讀書會
---
# 🏅 Day 1｜React JSX

在開始寫 React 之前，一定要先了解 JSX，因為在 React 中會大量的使用到這樣的寫法。JSX 是一個 JavaScript 的語法擴充，在寫 React 的時候會透過這樣的語法來做出使用者介面，相當於 template 和 JS 的混合用法，簡單的範例如下：
```jsx=
const element = <h1>你好，世界！</h1>;
```

[完整的 JSX 介紹請參考此文件](https://zh-hant.reactjs.org/docs/introducing-jsx.html)

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/hexschool/pen/QWmWVXP)，並撰寫 JSX 完成以下畫面：
![](https://i.imgur.com/7Syc5na.png)

備註：
- 請用 `<h1>` 標籤
- 請使用 formatName 函式來組合 firstName、lastName



## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
![](https://i.imgur.com/vftL5i0.png)

<!-- 解答： 
```
// 練習區塊ㄧ
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
// 區塊結束

// 練習區塊二
const element = <h1> {formatName(user)} 是一位 {user.description}</h1>;
// 區塊結束

```
-->


回報區
---


|         Discord         |                              CodePen / 答案                              |
|:-----------------------:|:------------------------------------------------------------------------:|
|        Rice#8043        |     [Codepen](https://codepen.io/riecball/pen/GRxvNGM?editors=1010)      |
|       yunyun#5215       |           [Codepen](https://codepen.io/yun_yunni/pen/oNqpqwj)            |
|      rainbow#3329       |    [Codepen](https://codepen.io/g901612002/pen/eYMyMGX?editors=1010)     |
|        LEO#7779         |            [Codepen](https://codepen.io/nekorice/pen/XWEVEaw)            |
|     DIANAxAKKO#4298     |           [Codepen](https://codepen.io/redfire29/pen/gOeoeGR)            |
|        Ayre#0016        |    [Codepen](https://codepen.io/yichunlin09/pen/OJvzvxx?editors=0010)    |
|       Morris#8755       |            [Codepen](https://codepen.io/morrisss/pen/wvmpmrp)            |
|   Midnightdinner#6220   |           [Codepen](https://codepen.io/woowooyong/pen/oNqpqob)           |
|       布魯諾#7239       |            [Codepen](https://codepen.io/bruno-yu/pen/NWYXYXY)            |
|        lingxuan         |          [Codepen](https://codepen.io/lingxuan0618/pen/LYdedzp)          |
|       黃士桓#7654       |         [codePen](https://codepen.io/shr-huan-huang/pen/poLpLaQ)         |
|       AllenW#1132       |      [codePen](https://codepen.io/AllenW/pen/YzaYaxW?editors=1011)       |
|     Bumble幫啵#0255     |      [codePen](https://codepen.io/lmpzezvw-the-lessful/pen/gOeoeBX)      |
|      Timothy#5863       |   [codePen](https://codepen.io/timothy_hippo/pen/jOzYzxv?editors=1011)   |
|       Paper#1658        |          [CodePen](https://codepen.io/paper_hsiao/pen/XWEVEor)           |
|       Evonne#7078       |     [CodePen](https://codepen.io/Hsu1Fang/pen/vYRpRRg?editors=1010)      |
|      Mr.Sean#3825       |     [CodePen](https://codepen.io/sean_1215/pen/ExEoEpx?editors=1010)     |
|     kevinhes #2881      |     [CodePen](https://codepen.io/kevinhes/pen/wvmpmNX?editors=1011)      |
|       huch09#1426       | [Codepen](https://codepen.io/subarashii-huch09/pen/WNzdzPa?editors=1010) |
|        ZengZeng         |            [Codepen](https://codepen.io/tyzyoko/pen/YzaYagV)             |
|       Kelvin#3296       |          [Codepen](https://codepen.io/kelvinchang/pen/xxWpWNV)           |
|      YenYing#4029       |    [Codepen](https://codepen.io/yenying0804/pen/QWmamVV?editors=1010)    |
|        L0F0#8733        |       [Codepen](https://codepen.io/l0f0/pen/wvmpmbx?editors=1011)        |
|       CofCat#9226       |     [Codepen](https://codepen.io/cofcat456/pen/MWVrVNM?editors=1010)     |
|        RON#2813         |             [Codepen](https://codepen.io/Ron115/pen/yLKpKWW)             |
|       Yukon#2618        |            [Codepen](https://codepen.io/ukowork/pen/QWmaryo)             |
|       KuoMin#4931       |             [Codepen](https://codepen.io/KuoMin/pen/dymJeMz)             |
|       Overy#4545        |         [Codepen](https://codepen.io/oceanwhale52hz/pen/oNqpdLw)         |
|        Iris#8462        |            [Codepen](https://codepen.io/irissamy/pen/WNzdJxm)            |
|        小熊#0685        |     [Codepen](https://codepen.io/YuHan0704/pen/MWVrGbY?editors=1010)     |
|        無名#6427        |      [Codepen](https://codepen.io/Nomoney/pen/wvmpjdN?editors=1010)      |
|         Mischa          |          [Codepen](https://codepen.io/mischa_0528/pen/abYEGpB)           |
|        m_m#5493         |           [Codepen](https://codepen.io/minnn7716/pen/OJvzZXo)            |
|      LinaChen#1796      |            [Codepen](https://codepen.io/LinaChen/pen/mdxpxjw)            |
|        威爾#1694        |            [CodePen](https://codepen.io/WILL_Wu/pen/yLKpjPN)             |
|         JC#8658         |           [Codepen](https://codepen.io/jcsamoyed/pen/rNdpvqj)            |
|        Kimi#2092        |           [Codepen](https://codepen.io/a3216lucy/pen/VwXyxNB)            |
| React-慧茹(拉拉醬)#3414 |         [Codepen](https://codepen.io/lala-lee-jobs/pen/OJvzELK)          |
|      fannnny#7112       |      [Codepen](https://codepen.io/fannyHO/pen/BarJxXX?editors=1010)      |
|       露易莎#7673       |           [Codepen](https://codepen.io/louisa-lin/pen/xxWpzGW)           |
|           Ada           |     [Codepen](https://codepen.io/zggsoagv-the-scripter/pen/jOzYKEq)      |
|      ChloeLo#4858       |            [Codepen](https://codepen.io/chloelo/pen/abYEGXL)             |
|           aki           |             [codepen](https://codepen.io/aki168/pen/WNzdyQr)             |
|       Arista#5802       |          [codepen](https://codepen.io/arista-hsieh/pen/JjLMZdv)          |
|     hiYifang #0736      |            [codepen](https://codepen.io/hiYifang/pen/GRxydLz)            |
|       Seijo #1585       |    [codepen](https://codepen.io/SeijoHuang/pen/YzaYvWB?editors=1010)     |
|     座標33129#8748      |      [Codepen](https://codepen.io/ad80352/pen/xxWpzXa?editors=1010)      |
|       HedgehogKU        |   [CodePen](https://codepen.io/hedgehogkucc/pen/gOeoKob?editors=1010)    |
|          Aaron          |           [CodePen](https://codepen.io/narrowd4c/pen/WNzdyOG)            |
|        niel#2413        |     [CodePen](https://codepen.io/danielhsu/pen/NWYXzLd?editors=1111)     |
|   Carolkiki2003#7399    |            [CodePen](https://codepen.io/wasfzuig/pen/MWVrXPQ)            |
|     JimmyChang#5558     |        [CodePen](https://codepen.io/JimmyChangWenChi/pen/gOeoKep)        |
|       wenyun#2362       |            [CodePen](https://codepen.io/wenyuncc/pen/JjLMBdQ)            |
|        𝓛𝓊𝒸𝓎#8635        |            [CodePen](https://codepen.io/lucygirl/pen/KKoZBdo)            |
|        Rui#5058         |            [CodePen](https://codepen.io/rui0208/pen/BarJPpd)             |
|        yuyu#6310                 |  [CodePen](https://codepen.io/yuyu0905/pen/wvmpxpp)                                                                        |
|       zzly#9134       |            [CodePen](https://codepen.io/ly00/pen/abYEjqo)            |
|       葉秋#2335       |            [CodePen](https://codepen.io/as880074/pen/dymJjjp)            |
|       Stacy#1442       |            [CodePen](https://codepen.io/keebibmh/pen/wvmpxxm)            |
|       Kunda#2800       |            [CodePen](https://codepen.io/kunda0818/pen/jOzYpjd)            |
|lloyd#8224| [CodePen](https://codepen.io/thanatus25/pen/NWYXBmL) |
| JarDar#6980 |[codepen](https://codepen.io/jardarpen/pen/VwXyGEx) |
| Robert Lo#9653 |[codepen](https://codepen.io/Robert-Lo/pen/BarJOdv?editors=1010) |
|Tuhacrt#0008|[CodePen](https://codepen.io/Tuhacrt/pen/WNzdgPN)|
|hw#0715|[Codepen](https://codepen.io/Lhwei/pen/RwMxYXE)|
|pollylien|[Codepen](https://codepen.io/cianying/pen/bGvaxmP?editors=1010)|
|小夜|[Codepen](https://codepen.io/Naito_K/pen/vYRpVBQ?editors=1010)
|BEAN#8402|[Codepen](https://codepen.io/Beanhuang/pen/NWYXOdx)
|Joechiboo|[Codepen](https://codepen.io/joe-chiboo/pen/RwMxeOP)
|sihyun#6318|[Codepen](https://codepen.io/siyuch/pen/ExEoOYG)
|SHIN#6075|[Codepen](https://codepen.io/shin9626/pen/vYRpVvY)
| moitw | [codepen](https://codepen.io/tsuifei/pen/dymJQpo?editors=1010)|
|       yunyun#2239      |            [CodePen](https://codepen.io/jarita0826/pen/qBopQQb)            |
|灰塵貓#7994|[Codepen](https://codepen.io/rjk66268/pen/mdxpQjm?editors=0011)|
|布魯布魯#6177|[CodePen](https://codepen.io/akai-huang/pen/PoRExBJ)|
|RayRayHuang#1998|[CodePen](https://codepen.io/hongrueihuang/pen/dymJwbv)
|Vivi0225#3634|[Codepen](https://codepen.io/vivian820225/pen/GRxyPjd)|
|shin#5792|[Codepen](https://codepen.io/hah1030/pen/YzaYdJv)|
|Yiling#4054|[Codepen](https://codepen.io/lin010/pen/WNzdLKV?editors=1010)|
|TaoDoris#5230|[Codepen](https://codepen.io/taomaomao/pen/mdxpvPg?editors=1011)|
|Yanyan#3555 |[Codepen](https://codepen.io/wei-yi-lee/pen/WNzdPow)|
史蒂夫#5075 |[Codepen](https://codepen.io/TaroPanda/pen/jOzYdLV)|
 | Stanley#2505         | [Codepen](https://codepen.io/bigbearada/pen/OJvzdGX)                              |
 | -------------------- | --------------------------------------------------------------------------------- |
 | Neal#0665            | [Codepen](https://codepen.io/neallkf/pen/QWmaYmd?editors=1010)                    |
 | count1count2#9636    | [Codepen](https://codepen.io/souhakusou/pen/oNqpVvK?editors=1011)                 |
 | 芝麻凜#1627          | [Codepen](https://codepen.io/bardkidd/pen/bGvaZqo?editors=0110)                   |
 | Dylan_Lin#7320       | [CodePen](https://codepen.io/lin-dylan/pen/qBopvEz?editors=1010)                  |
 | Tsuei#9284           | [CodePen](https://codepen.io/AlbertoLL/pen/BarJbrm?editors=1111)                  |
 | Yihan#5560           | [CodePen](https://codepen.io/h513hh513h/pen/VwXyRGK?editors=1011)                 |
 | Vada Chen #2055      | [CodePen](https://codepen.io/vadachen/pen/poLpYxq)                                |
 | easton#3863          | [Codepen](https://codepen.io/EastonIsCodingNow/pen/wvmpOVX)                       |
 | A-Kai#2134           | [Codepen](https://codepen.io/kenneth1002/pen/ZExvZzg?editors=1011)                |
 | christina#6185       | [Codepen](https://codepen.io/chrisc0210/pen/XWEVGQr)                              |
 | Claire#2116          | [Codepen](https://codepen.io/claire-chang-the-bashful/pen/ZExvZbz)                |
 | Rose Wu#1669         | [Codepen](https://codepen.io/Rose-Wu/pen/rNdpbMV)                                 |
 | 小班#3324            | [Codepen](https://codepen.io/jlhung168/pen/QWmaPre)                               |
 | 楓之聲#6945          | [codepen](https://codepen.io/sshane258/pen/GRxyLyB)                               |
 | charlottelee849#0366 | [Codepen](https://codepen.io/charlotte-lee/pen/vYRpMLe?editors=1012)              |
 | Sylvia-H #0024       | [Codepen](https://codepen.io/Cosmosheart/pen/XWEVQyp)                             |
 | kyle890721#1016      | [Codepen](https://codepen.io/KYLE890721/pen/KKoZYaj)                              |
 | 紅豆豆#0518          | [Codepen](https://codepen.io/zoseqlpc/pen/zYWpQOd?editors=0010)                   |
 | Ryder#7398           | [Codepen](https://codepen.io/rider159159/pen/zYWpQjj?editors=1010) 樓下嚇我一跳XD |
 | Rikku#1756           | [Codepen](https://codepen.io/rikkubook/pen/RwMxmyX) 哈哈哈哈XD                    |
 | wiimax#4564          | [Codepen](https://codepen.io/willismax/pen/qBopGML)                               |
 | 𝔼.𝕎#4742             | [Codepen](https://codepen.io/kidult316/pen/ExEoBKM)                               |
 | JimHwang#3594        | [Codepen](https://codepen.io/jimh1129/pen/qBopzNe)                                |
 | Zihur#7755           | [Codepen](https://codepen.io/Zihur/pen/KKoZjdQ?editors=1010)                      |
 | 山貓(焜)#7041        | [Codepen](https://codepen.io/pen?template=XWEVLRG)                                |
 | margo#7139           | [Codepen](https://codepen.io/ssuchen_lee/pen/qBopzRW?editors=0011)                |
 | bonnieli1414#4906    | [Codepen](https://codepen.io/bonnieli1414/pen/bGvaPYa?editors=1010)               |
 | Alex Liao#8538       | [CodePen](https://codepen.io/alex0207s/pen/QWmaXOr)                               |
 | Dale Hsu#0355        | [CodePen](https://codepen.io/dale_hsu/pen/wvmpLjp)                                |
 | 龜人#7299            | [CodePen](https://codepen.io/dullshen/pen/rNdpEyo)                                |
 | 雅帆                 | [CodePen](https://codepen.io/yafanchung/pen/xxWpvGV)                              |
 | Renren #8437         | [CodePen](https://codepen.io/ehren-chen/pen/BarJXmv)                              |
 | 真．穎旻粉撕#4995    | [CodePen](https://codepen.io/gbnbihif/pen/QWmaegR?editors=1010)                   |
 | POKA #2168           | [CodePen](https://codepen.io/POKAHSIAO/pen/rNdpXpe?editors=1010)                  |
 | Pandaa#7740          | [CodePen](https://codepen.io/pandaachu/pen/mdxpNzG)                               |
 | Evileye#0666         | [Codepen](https://codepen.io/gn-lin/pen/YzaYmJL)                                  |
 | crowley#7180         | [CodePen](https://codepen.io/pon88/pen/vYRdErj?editors=1010)                      |
 | Wu#0167              | [CodePen](https://codepen.io/Xander0705/pen/wvmpYVJ)                              |
 | Mitour#0672          | [CodePen](https://codepen.io/mitour/pen/poLajBq?editors=0010)                     |
 | 魚魚#0937            | [CodePen](https://codepen.io/fish0522/pen/gOevPpv)                                |
 | Kenge#3690           | [CodePen](https://codepen.io/pgkusn/pen/JjLpGbb)                                  |
 | 棒腿#9350            | [CodePen](https://codepen.io/frankHsu/pen/eYMVJvm)                                |
 | 翔#0859              | [CodePen](https://codepen.io/energy95272z/pen/eYMVJPz)                            |
 | Doris#1140           | [CodePen](https://codepen.io/doris79588/pen/GRxQozw)                              |
 | Eric Su#7798         | [CodePen](https://codepen.io/wc-su/pen/ZExvVOE)                                   |
 | East#4003            | [CodePen](https://codepen.io/EastM/pen/mdxXPWg?editors=1010)                      |
 | shoppingq            | [CodePen](https://codepen.io/shoppingq/pen/JjLpGxr)                               |
 | carrieT#9628         | [CodePen](https://codepen.io/echocarriet/pen/MWVQeJB)                             |
 | 城堡#2126            | [Codepen](https://codepen.io/tthcastle/pen/LYdQZwZ)                               |
 | EvaLin#4546          | [Codepen](https://codepen.io/evalin0316/pen/LYdQRER)                              |
 | ねこ*#9385           | [Codepan](https://codepen.io/kunpao0104/pen/VwXQKJd)                              |
 | IreneLee#7932        | [Codepan](https://codepen.io/ntjtcxpt-the-animator/pen/VwXQmrg?editors=1010)      |
 | andersonshen#4675    | [Codepan](https://codepen.io/luxyenni-the-bold/pen/QWmQGzp)                       |
 | YJ#1839              | [Codepan](https://codepen.io/cshjufxc/pen/poLaejY)                                |
 | Evachan#5729         | [Codepan](https://codepen.io/Eva-go/pen/QWmQpXW)                                  |
 | Hank Hsiao#8569      | [Codepan](https://codepen.io/hank-hsiao/pen/ExEQmwQ)                              |
 | leoneboy#0851        | [Codepan](https://codepen.io/Leoneboy/pen/oNqprQL?editors=1111)                   |
 | Otis#8455            | [Codepan](https://codepen.io/humming74/pen/wvmyeqe)                               |
 | IceSam#7836          | [Codepen](https://codepen.io/sam-hsu/pen/QWmaYQd)                                 |
 | Chaim#5739           | [Codepen](https://codepen.io/hgit915/pen/vYRdJGJ)                                 |
 | 陳sam#9117           | [Codepen](https://codepen.io/euldpliv/pen/gOevGaE)                                |
 | Li-Ninja#0471        | [Codepen](https://codepen.io/li-ninja/pen/NWYyaJb?editors=0110)                   |
 | Anson #3594          | [Codepen](https://codepen.io/huanmingchang/pen/LYdQOGo)                           |
 | Mickey Hsu #9693     | [Codepen](https://codepen.io/kikmiao1995/pen/NWYyaaG)                             |
 | Viva #2816           | [Codepen](https://codepen.io/viva-chan/pen/VwXQrKw)                               |
  | 時雨 #8837           | [Codepen](https://codepen.io/jjustin-35/pen/KKoQygZ)                               |
  | JessSong#5050           | [Codepen](https://codepen.io/jssanji03/pen/abYqVwx)                               |
|TedWang|[Codepen](https://codepen.io/wangtaiyan/pen/PoRQOXK?editors=1011)|
|GL#2256|[Codepen](https://codepen.io/4genie/pen/XWEZVRb)|
 | Yushi #3972           | [Codepen](https://codepen.io/yus3/pen/xxWporv) |
 | 連小艾#0791 | [Codepen](https://codepen.io/bolaslien/pen/qBoxpgX?editors=1010) |
  | Emily Hsi #9066 | [Codepen](https://codepen.io/EmilyHsi/pen/gOevray) |
|鉛筆#7763| [Codepen](https://codepen.io/zoeguava/pen/JjLpLJQ?editors=0011) |
|anby#7112| [Codepen](https://codepen.io/andy-ch-bo-an/pen/zYWRWLQ?editors=1011) |
|喬喬#2824| [Codepen](https://codepen.io/joanne-wei/pen/mdxXayw?editors=1010) |
|黑白兔#0684| [Codepen](https://codepen.io/johnny329/pen/bGvYPzm) |
|Nico#8739| [Codepen](https://codepen.io/Nicof2e/pen/ExEQroo) |
| 吉利#3810 |[codepen](https://codepen.io/gillianyy/pen/mdxXvWv) |
| Shani#4593 |[codepen](https://codepen.io/ShaniMa/pen/WNzMWey) |
| 薯餅#3581 |[codepen](https://codepen.io/ColdingPoTaTo/pen/oNqEOXL) |
| k.sin#3115 |[codepen](https://codepen.io/sin588/pen/ExEQJrN?editors=1011) |
| 彼得#1923 |[codepen](https://codepen.io/shiou-ho/pen/MWVQdVp) |
| Neuf#3083 | [codepen](https://codepen.io/yifanneuf/pen/QWmQXra?editors=0010)|
|        Chelly#6129        |     [Codepen](https://codepen.io/chellyhsu/pen/bGvLPPL?editors=1111)      |
| hungya#0773 | [codepen](https://codepen.io/hungya777/pen/JjLLPjy)|
| JasonLU#7163 | [codepen](https://codepen.io/wnptocip/pen/MWVVgpj?editors=1010)| 
| yoshidc#0455 | [codepen](https://codepen.io/yoshiyyc/pen/RwMQqYG)| 
|minmin#8960|[codepen](https://codepen.io/minfan-chen/pen/yLKKLrR?editors=1111)|
|hobby#6565|[codepen](https://codepen.io/hobbyling/pen/eYMMNbG)|
|yiwun#0953|[codepen](https://codepen.io/kagamiakira_IBUN/pen/jOzzbGa)|
| whatsupmm#6761 | [Codepen](https://codepen.io/meidada/pen/JjLLJKw?editors=1010) |
| 眼睛 #0314 | [Codepen](https://codepen.io/riecball/pen/GRxvNGM?editors=1010) |
| larahuang#8309 | [Codepen](https://codepen.io/lara1105huang/pen/jOzzmLb) |
| Shau#6400 | [Codepen](https://codepen.io/shau-chen/pen/XWEEzbE) |
| 豆豆#9088 | [Codepen](https://codepen.io/qaz326978547/pen/jOzzaQZ) |
| MarsKuo#6015 | [Codepen](https://codepen.io/MarsKuo/pen/vYRRRmB) |
| Murmurline#6969 |  [Codepen](https://codepen.io/murmurline/pen/BarrOLJ) |
| kir4che#7701 |  [Codepen](https://codepen.io/kir4che/pen/qBoYEqd) |
| Carol Li #2269| [Codepen](https://codepen.io/carolli834/pen/zYWjGZo?editors=1010)|
| 蘇蘇 #0426| [Codepen](https://codepen.io/sabine1123/pen/qBoYOXL)|
| Josh DB #3366 | [Codepen](https://codepen.io/joshjong/pen/eYMrvQq)|
| kotony #1552 |[Codepen](https://codepen.io/myjekfdm/pen/zYWjEgE)|
| NinaKuo#3332 |[Codepen](https://codepen.io/ninakuo0814/pen/BarxYLG)|
| john21429#9343 |[Codepen](https://codepen.io/john21429/pen/bGvMMXx)|
|YuZhun#1362|[Codepen](https://codepen.io/danzhun/pen/PoReZqp?editors=1011)|
|許揚民 Evan#4546|[Codepen](https://codepen.io/gitevanhsu/pen/abYGMbV)|
|emma #3398|[Codepen](https://codepen.io/itsems/pen/NWYMmdw?editors=1010)|
|Judy ☻#7874|[Codepen](https://codepen.io/hsiaohan/pen/gOezyZG?editors=1010)|
|Wins #8457|[Codepen](https://codepen.io/winszhuang/pen/VwXxJqJ)|
| Wendy Chang #8310 |[Codepen](https://codepen.io/Zhangbun/pen/JjLvWbj)
|夕璇#5662|[Codepen](https://codepen.io/SiShiuan/pen/PoRaYMg?editors=1010)|
|猜猜我是誰|[codepen](https://codepen.io/wei-nie/pen/BarVzGK?editors=0011)|
| 咻蹦#1526 |[codepen](https://codepen.io/emmasyu/pen/gOezyGW)|
| ryo#0160 |[codepen](https://codepen.io/ryo72/pen/ExERNgP)|
| james#1443 |[codepen](https://codepen.io/clothn0105700/pen/LYdrxNm?editors=0010)|
|阿暟|[codepen](https://codepen.io/patrickrrr007/pen/YzaaqPL)|
|Louise|[codepen](https://codepen.io/LouiseHuang/pen/gOeKmom)|
|toshow#5609|[CodePen](https://codepen.io/toshow/pen/vYRrPGz)|
|Sabrina77#1675|[CodePen](https://codepen.io/sabrina-huang/pen/QWmxorE?editors=1010)|
|Justin|[CodePen](https://codepen.io/just-perfect/pen/YzajKdY)|
|Double C#7388|[codepen](https://codepen.io/Double-C/pen/ZExrLMw)|
|sophiee#7015 |[codepen](https://codepen.io/sophiee2727/pen/ExEpLaL?editors=1111)|
|ninipopo#7983 |[codepen](https://codepen.io/Robinnini/pen/xxWJaeo)|
|Cookie SSS#6991|[codepen](https://codepen.io/sqhjikpa-the-selector/pen/MWVBoxm?editors=1010)|
|Rocker#6235|[codepen](https://codepen.io/RockerLi/pen/KKoBVxR)|
|VicSun|[codepen](https://codepen.io/hsuan333/pen/bGvxgbQ)|
|雪莉#4827|[codepen](https://codepen.io/utshang216/pen/OJvBJgB)|
|Frank5177|[codepen](https://codepen.io/Frankhu5150/pen/WNzajxE?editors=1010)|
|Cherry ZY#4647|[CodePen](https://codepen.io/qoosdd89382/pen/abYRwmN?editors=0010)|
|hsiuhsiu #7412|[CodePen](https://codepen.io/hsiuhsiu/pen/RwMejoj?editors=1010)|
|Mori#5582|[CodePen](https://codepen.io/flower9312/pen/mdxzprv)|
|魚魚#1220|[CodePen](https://codepen.io/vkkkmkbv-the-selector/pen/GRxYewB)|
|SunnyCheng#4113|[CodePen](https://codepen.io/Sunny0509/pen/mdxzZwq)|
|kancheng#3915|[CodePen](https://codepen.io/kancheng/pen/wvmQZVa)|
|helen #1041  |[CodePen](https://codepen.io/Tian-Lin/pen/QWmJRqv)
|Emily #3648  |[CodePen](https://codepen.io/flien/pen/NWYBXpd?editors=1010)|
|eching#9183  |[CodePen](https://codepen.io/echin/pen/poLGLQx?editors=1010)|
|SleepWalk#1635  |[CodePen](https://codepen.io/arthurliinn/pen/gOeEOLr?editors=0011)|
|Eileen#6454  |[CodePen](https://codepen.io/Eileen-io/pen/jOzJErQ)|
|toshow#5609|[Codepen](https://codepen.io/toshow/pen/qBQgONZ)
|Eshiunm|[Codepen](https://codepen.io/Code-My/pen/eYojbjW)


